微信小程序

本文主要是介绍微信小程序，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信小程序

文件介绍

微信小程序每个页面就是一个文件夹文件夹文件夹结构为:
index.js //页面脚本 入口
index.json //页面配置
index.wxml //页面 html
index.xxss //页面样式

配置

全局配置和局部配置 app.json/page.json

全局配置

{
    "pages": [//页面配置 默认第一个页面 
        "pages/index/index",
        "pages/news/index"
    ],
    "window": {
        "enablePullDownRefresh": true,//是否开启下拉刷星 默认false
        "backgroundTextStyle": "light",//下拉刷星样式 light/dark
        "backgroundColor":"#ccc",//下拉刷新背景色
        "navigationBarBackgroundColor": "#fff",//导航栏背景颜色
        "navigationBarTitleText": "博文",//导航栏标题
        "navigationBarTextStyle": "black",//导航栏文字颜色 仅支持 white/black
    },
    "tabBar": { //标签页
        "list": [
            {
                "pagePath": "pages/index/index",//点击显示的页面
                "text": "首页",//图标文字
                "iconPath": "./static/tabicon/default/shouye.png",//默认图标
                "selectedIconPath": "./static/tabicon/select/shouye.png"//选中时的图标
            },
            {
                "pagePath": "pages/me/me",
                "text": "我的",
                "iconPath": "./static/tabicon/default/wode.png",
                "selectedIconPath": "./static/tabicon/select/wode.png"
            }
        ]
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

页面配置

可以单独配置不同的window配置 页面文件夹下的json就是页面配置文件
例如 /me/me:
me.json
{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ccc",//当前页面标题栏背景色
}

sitemap

此配置用于配置小程序页面是否被微信索引,json文件 默认所有页面被索引 微信搜索程序时可以配置此项z 

生命周期

Page({
	//页面的初始数据
  data: {
    name:"李连杰",
    parms:{a:2,b:2}
  },
	//生命周期函数--监听页面加载
  onl oad: function (options) {
  },
  //生命周期函数--监听页面初次渲染完成
  onReady: function () {
  },
   //生命周期函数--监听页面显示
  onShow: function () {
  },
   //生命周期函数--监听页面隐藏
  onHide: function () {
  },
   //生命周期函数--监听页面卸载
  onUnload: function () {
  },
   * 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function () {
  },
   //页面上拉触底事件的处理函数
  onReachBottom: function () {
  },
   // 用户点击右上角分享
  onShareAppMessage: function () {
  }
})

this.setData

//设置data数据
this.setData({
	name:'成龙',
	parms:{a:3}
})

条件渲染

<view wx:if="{{isshow}}">张三</view>
<video ws:else>李四</video>

for循环

     wx:for//循环的对象 wx:for-item 循环值 wx:fro-index 循环索引 for-item for-index 默认item index
	 <view 
      wx:for="{{list}}"
      wx:for-item="item" 
      wx:for-index="index"
      wx:key="index"
     >
        {{index+item}}
    </view>

block标签

 渲染时会把block标签移除掉 相当于占位符
 <block>
        {{value+key}}
 </block>

事件绑定

微信小程序事件通过bind绑定 
wxml:
    <input bindinput="chenage" type="text"/>
	 <view>
        值:{{num}}
    </view>
js:
   chenage(e){
        this.setData({//不能直接使用this.data.num修改必须使用setData方法来修改
            num:e.detail.value
        })
    },
    data: {
        num:0
    },

参数传递

微信小程序无法在事件触发中穿参数 解决方法 通过自定义属性传递
 wxml:
    <button bindtap="append" data-val="11">+</button>
 js:
 	append(e){
 		 let {val}=e.currentTarget.dataset
 	}

wxss

rpx单位

将屏幕分为750份
1rpx =   750 / 屏幕宽度
当屏幕宽度等于750 时 rpx=1px 

页面大小像素= 750 rpx
1px = 页面宽度/750
100px = 750rpx*100 / page宽度

样式导入

支持@import 导入css样式 @import "/a.wxss" 也可以和less混合使用

选择器和less

特别注意小程序不支持 * 通配符 其他的一样支持 class elementName id ::after ::before

使用less 
	使用编译器 安装插件 easy less
	打开vscode 设置 配置文件settings.json
		"less.comite":{
			outExt:'wxss'
		}
     编译less文件之后自动生成一个wxcss文件

常用组件

view text input button 	image navigater icon swiper radio checkbox rich-text 等

介绍

view 代替原来的div
	hover-class="" 当用户按下自动添加类
	hover-stare-time 按下后多就触发
	hover-stay-teim 松开后多久失效
	hover-stop-propagetion 阻止冒泡
text 文本标签
	selectable 是否可选 true/false 默认false
	decode 是否解码 true/code	默认false &npsp;
image 
	src 文件路径
	mode 图片缩放 裁剪 scaleToFill 默认 拉伸填充 
	lazyl-load 图片懒加载 true/false 默认false
	
	跟多官网查=看
swiper 轮播图
	swiper-item 轮播内容 
    circular='true' 衔接滚动
	indicator-dots7 是否显示小点 true/false
navigator 路由跳转
	url 跳转地址
	target 当前小程序内跳转还是其他小程序 默认self 当前小程序
open-type 跳转方式
		默认保留当前页面 跳转后含有返回按钮可以返回 但是不能跳转到tabbar
		
	

微信提供给api

//路由跳转
wx.redirectTo({
	url:'/pages/login1/index'
})
//提示
wx.showToast({
       title: '完成',
 })

这篇关于微信小程序的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！