大家好，最近在学习微信小程序并把知识点总结了一下希望对你们有所帮助

常用wxml组件

view 视图组件，作用于div标签差不多

scroll-view 运行滚动的视图容器

常用属性：

scroll-y 可以纵向滚动

scroll-x 可以横向滚动

swiper 轮播图组件 ，需要配合swiper-item组件使用

常用属性：

indicator-dost 是否显示指示版，取值为布尔类型

indicator-color 指定指示版点颜色，取值为#000类型

indicator-active-color 指定选中指示版颜色，取值为#000类型

autoplay 自动播放轮播图，取值为布尔

interval 自动轮播间隔，取值为毫秒

circular 是否采用链式滑动，取值为布尔

vertical 是否纵向滑动图片，取值为布尔

easing-function 轮播的图采用什么动画效果

easing-function动画取值：

default 默认值

linear 线性动画

easelnCubic 缓入动画

easeOutCubic 缓出动画

easelnOutCubic 缓入缓出动画

swiper-item 要轮播的每一项

常用属性：

item-id 给当前的swiper-item一个标识

button 按钮主键

常用属性：

size: 大小，取值为 default 与 mini

checkbox 多选按钮

常用属性：

value：值，取值为string

checked：是否当前选中

color：选中颜色

input 输入框

属性：

属性	类型	默认值	必填	说明
value	string		是	输入框的初始内容
type	string	text	否	input 的类型
password	boolean	false	否	是否是密码类型
placeholder	string		是	输入框为空时占位符
placeholder-style	string		是	指定 placeholder 的样式
placeholder-class	string	input-placeholder	否	指定 placeholder 的样式类
disabled	boolean	false	否	是否禁用
maxlength	number	140	否	最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing	number	0	否	指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
auto-focus	boolean	false	否	(即将废弃，请直接使用 focus )自动聚焦，拉起键盘
focus	boolean	false	否	获取焦点
confirm-type	string	done	否	设置键盘右下角按钮的文字，仅在type='text'时生效
always-embed	boolean	false	否	强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
confirm-hold	boolean	false	否	点击键盘右下角按钮时是否保持键盘不收起
cursor	number		是	指定 focus 时的光标位置
selection-start	number	-1	否	光标起始位置，自动聚集时有效，需与 selection-end 搭配使用
selection-end	number	-1	否	光标结束位置，自动聚集时有效，需与 selection-start 搭配使用
adjust-position	boolean	true	否	键盘弹起时，是否自动上推页面
hold-keyboard	boolean	false	否	focus时，点击页面的时候不收起键盘
safe-password-cert-path	string		否	安全键盘加密公钥的路径，只支持包内路径
safe-password-length	number		否	安全键盘输入密码长度
safe-password-time-stamp	number		否	安全键盘加密时间戳
safe-password-nonce	string		否	安全键盘加密盐值
safe-password-salt	string		否	安全键盘计算 hash 盐值，若指定custom-hash 则无效
safe-password-custom-hash	string		否	安全键盘计算 hash 的算法表达式，如 md5(sha1('foo' + sha256(sm3(password + 'bar'))))
bindinput	eventhandle		是	键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus	eventhandle		是	输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持
bindblur	eventhandle		是	输入框失去焦点时触发，event.detail = { value, encryptedValue, encryptError }
bindconfirm	eventhandle		是	点击完成按钮时触发，event.detail = { value }
bindkeyboardheightchange	eventhandle		是	键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}

radio 单选按钮

属性：

属性	类型	默认值	必填	说明
value	string		否	radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value
checked	boolean	false	否	当前是否选中
disabled	boolean	false	否	是否禁用
color	string	#09BB07	否	radio的颜色，同 css 的color

radio-group 单项选择器，内部由多个radio组成

属性：

属性	类型	默认值	必填	说明
bindchange	EventHandle		否	radio-group中选中项发生改变时触发 change 事件，detail = {value:[选中的 radio 的value的数组]}

slider 滑动选择器

属性：

属性	类型	默认值	必填	说明
min	number	0	否	最小值
max	number	100	否	最大值
step	number	1	否	步长，取值必须大于 0，并且可被(max - min)整除
disabled	boolean	false	否	是否禁用
value	number	0	否	当前取值
color	color	#e9e9e9	否	背景条的颜色（请使用 backgroundColor）
selected-color	color	#1aad19	否	已选择的颜色（请使用 activeColor）
activeColor	color	#1aad19	否	已选择的颜色
backgroundColor	color	#e9e9e9	否	背景条的颜色
block-size	number	28	否	滑块的大小，取值范围为 12 - 28
block-color	color	#ffffff	否	滑块的颜色
show-value	boolean	false	否	是否显示当前 value
bindchange	eventhandle		否	完成一次拖动后触发的事件，event.detail = {value}
bindchanging	eventhandle		否	拖动过程中触发的事件，event.detail = {value}

switch 开关选择器

属性：

属性	类型	默认值	必填	说明
checked	boolean	false	否	是否选中
disabled	boolean	false	否	是否禁用
type	string	switch	否	样式，有效值：switch, checkbox
color	string	#04BE02	否	switch 的颜色，同 css 的 color
bindchange	eventhandle		否	点击导致 checked 改变时会触发 change 事件，event.detail={ value}

icon 图标组件

属性：

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。
color	string		否	icon的颜色，同 css 的color

progress 进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)

属性：

属性	类型	默认值	必填	说明
percent	number		否	百分比0~100
show-info	boolean	false	否	在进度条右侧显示百分比
border-radius	number/string	0	否	圆角大小
font-size	number/string	16	否	右侧百分比字体大小
stroke-width	number/string	6	否	进度条线的宽度
color	string	#09BB07	否	进度条颜色（请使用activeColor）
activeColor	string	#09BB07	否	已选择的进度条的颜色
backgroundColor	string	#EBEBEB	否	未选择的进度条的颜色
active	boolean	false	否	进度条从左往右的动画
active-mode	string	backwards	否	backwards: 动画从头播；forwards：动画从上次结束点接着播
duration	number	30	否	进度增加1%所需毫秒数
bindactiveend	eventhandle		否	动画完成事件

rich-text 富文本可插入html标签

属性：

nodes 插入html标签，nodes="<h1>标题</h1>"

text 文本

属性：空

image 图片

属性：

属性	类型	默认值	必填	说明
src	string		否	图片资源地址
mode	string	scaleToFill	否	图片裁剪、缩放的模式
webp	boolean	false	否	默认不解析 webP 格式，只支持网络资源
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
show-menu-by-longpress	boolean	false	否	长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。
binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}

更多组件可以前往官方文档查阅：微信小程序组件

微信小程序摸版语法

{{}} 插值

事件绑定

tap点击事件绑定，tap事件由手指触摸立即离开触发，类似click事件

tap绑定方式：tapbind或bind:tap

input 文本框输入事件

input绑定方式：inputbind或bind:input

change 状态改变时触发事件

change绑定事件方式：changebind或bind:change

当触发事件回调时，会收到一个event对象

event对象属性包含：

target 触发事件的组件属性的集合

detail 额外的信息

事件传值

传值方式：

data-参数名="{{数据}}"

如：

<view tapbind="add" data-n="{{2}}">{{n}}</view>

通过event.target.dataset.参数名 可以访问到传过来的参数

数据绑定

将{{}}插值里的数据与data中的所绑定，通过setData({})方法来绑定

语法：

setData({
    要修改的值名:修改后的值
})

如：

<view tapbind="add" data-x="{{2}}">{{n}}</view>
​
​
page({
    data:{
        n:0
    },
    add(e){
        this.setData({
            //修改data中的n
            n:this.data.n+e.target.dataset.x
        })
    }
})

条件渲染

wx:if 与 wx:else

wx:if 通过判断来决定是否显示此组件

语法：wx:if="{{判断值}}"

如：

<view wx:if={{inShow}}>我显示了</view>  //当inShow为真则渲染此组件

wx:if还可以配合wx:else来使用

如：

<view wx:if={{type===1}}>男</view>  //当值为真则渲染此组件
<view wx:else={{type===2}}>女</view>

block

可以一次性控制多个组件的显示与隐藏

如：

<block wx:if="{{inShow}}">
    <view>11111</view>
    <view>22222</view>
</block>

hidden

hidden控制组件的隐藏于显示

语法：hidden="{{要判断的值}}"

如：

<view hidden={{inShow}}>我显示了</view>  //当inShow为真则显示此组件

hidden与wx:if对比

hidden 通过样式控制组件的显示与隐藏

wx:if 通过创建组件与移除组件来达到显示与隐藏的效果

建议：

当需要频繁的显示与隐藏组件使用hidden，如果不是则使用wx:if

列表渲染

wx:for

wx:for 可以根据指定的数组循环渲染重复的组件结构

语法：

<view wx:for="{{array}}">{{index}}是循环数组的当前索引，{{item}}是每次循环数组的当前值</view>

也可以手动定义当前循环的索引与当前循环的值

语法：

<view wx:for="{{array}}" wx:for-index="idx" wx-for-item="itemName">{{idx}}是循环数组的当前索引，{{itemName}}是每次循环数组的当前值</view>

wx:key

wx:key 给wx:for渲染的每一项添加上唯一的key值

语法：wx:key="itme.id"

<view wx:for="{{array}}" wx:for-index="idx" wx-for-item="itemName" wx:key="item.id">{{idx}}是循环数组的当前索引，{{itemName}}是每次循环数组的当前值</view>

微信小程序的wxss

rpx

rpx ： 把当前屏幕宽度分为750份，即1rpx为1份

样式导入

通过@import 的语法，可以导入外来的wxss样式

语法：@import "comment.wxss"

全局配置

小程序根目录下的app.json是全局配置文件

① pages

记录当前小程序所有页面的存放路径

② window

全局设置小程序窗口的外观

③ tabBar

设置小程序底部的 tabBar 效果

④ style

是否启用新版的组件样式

window

window常用配置节点

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

全局配置tabBar

tabBar的六个组成部分

① backgroundColor：tabBar 的背景色

② selectedIconPath：选中时的图片路径

③ borderStyle：tabBar 上边框的颜色

④ iconPath：未选中时的图片路径

⑤ selectedColor：tab 上的文字选中时的颜色

⑥ color：tab 上文字的默认（未选中）颜色

tabBar的节点配置

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar 的位置，仅支持 bottom/top
borderStyle	String	否	black	tabBar 上边框的颜色，仅支持 black/white
color	HexColor	否		tab 上文字的默认（未选中）颜色
selectedColor	HexColor	否		tab 上的文字选中时的颜色
backgroundColor	HexColor	否		tabBar 的背景色
list	Array	是		tab 页签的列表，最少 2 个、最多 5 个 tab

每个 tab 项的配置选项

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在 pages 中预先定义
text	String	是	tab 上显示的文字
iconPath	String	否	未选中时的图标路径；当 postion 为 top 时，不显示 icon
selectedIconPath	String	否	选中时的图标路径；当 postion 为 top 时，不显示 icon

配置tabBar

在app.json中配置

{
    "tabBar":{
        "list":[
            {
                "pagePath":"page/index/index",
                "text":"首页",
                "iconPath":"page/icon/iamg.png",
                "selectedIconPath":"page/icon/iamg.png"
            },
            {
                "pagePath":"page/page2/page2",
                "text":"消息",
                "iconPath":"page/icon/iamg2.png",
                "selectedIconPath":"page/icon/iamg2.png"
            },
        ]
    }
}

页面配置

页面配置是在对应页面的.json文件中配置

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	当前页面导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	当前页面导航栏标题颜色，仅支持 black / white
navigationBarTitleText	String		当前页面导航栏标题文字内容
backgroundColor	HexColor	#ffffff	当前页面窗口的背景色
backgroundTextStyle	String	dark	当前页面下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否为当前页面开启下拉刷新的效果
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为 px

网络数据请求

wx.request方法

语法：

wx.request({
	url:"请求地址",
    method:"请求类型",
    data:{
        ...请求参数
    },
    success:(res)=>{//请求成功的回调函数
        console.log(res)
    }
})

页面导航——声明式导航

navigator组件

navigator 导航组件，通过点击navigator组件实现跳转

语法：

导航到tabBar页面

使用navigator组件

如：

<navigator url="/pages/index/index" open-type="switchTab">点击跳转到主页</navigator>

使用navigator组件导航到tabBar页面open-type必须为switchTab

导航到非tabBar页面

使用navigator组件

如：

<navigator url="/pages/info/info" open-type="navigate">点击跳转到info页面</navigator>

使用navigator组件导航到非tabBar页面时，open-type="navigate"可以省略

后退导航

后退导航指的是返回上一页或多页面时

使用方法

<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

后退导航的open-type值必须是navigateBack

delta 表示后退的层级，如果只是后退1步则可以省略

页面导航——编程式导航

wx.switchTab

wx.switchTab 方法导航到tabBar页面

语法：

wx.switchTab({
	url:"pages/index/index",//url是必填参数
    
    //success是跳转成功时执行的回调，非必填
    success:function(){
        ......
    },
    
    //fail 是跳转失败是执行的回调，非必填   
    fail:function(){
        ......
    },
        
    //complet是无论跳转成功或失败都执行的回调，非必填    
    complete:function(){
        ......
    }
})

wx.navigateTo

wx.navigateTo 方法是跳转到非tabBar页面

语法：

wx.navigateTo({
	url:"pages/index/index",//url是必填参数
    
    //success是跳转成功时执行的回调，非必填
    success:function(){
        ......
    },
    
    //fail 是跳转失败是执行的回调，非必填   
    fail:function(){
        ......
    },
        
    //complet是无论跳转成功或失败都执行的回调，非必填    
    complete:function(){
        ......
    }
})

wx.navigateBack

wx.navigateBack 后退导航

语法：

wx.navigateBack({

	delta:1  //delta默认值为1，非必填
    
    //success是跳转成功时执行的回调，非必填
    success:function(){
        ......
    },
    
    //fail 是跳转失败是执行的回调，非必填   
    fail:function(){
        ......
    },
        
    //complet是无论跳转成功或失败都执行的回调，非必填    
    complete:function(){
        ......
    }
})

页面事件——下拉刷新

启用下拉刷新有两种方式

① 全局开启下拉刷新

在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true

② 局部开启下拉刷新

在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true

在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。

监听下拉刷新事件

onPullDownRefresh() 监听下拉刷新事件

语法：

onPullDownRefresh:function(){
    ......
}

wx.stopPullDownRefresh() 停止当前页面刷新

页面事件——上拉触底

配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。

可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。

小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。

监听上拉触底

onReachBottom() 监听上拉触底事件

语法：

onReachBottom:function():{
    ......
}

生命周期

小程序应用的生命周期

小程序的应用生命周期函数需要在 app.js 中进行声明

onLaunch() 小程序初始化完成时，执行函数，全局只执行一次，可用于完成一些初始化工作

语法：

onLaunch:function(){
	......
}

onShow() 小程序从后台进入前台显示时触发

语法：

onShow:function(){
	......
}

onHide() 小程序从前台进入后台时触发

语法：

onHide:function(){
	......
}

页面的生命周期

小程序的页面生命周期函数需要在页面的 .js文件中进行声明

onLoad() 监听页面加载，一个页面只加载一次

onShow() 监听页面的显示

onReady() 监听页面初次渲染完成，一个页面只调用一次

onHide() 监听页面隐藏

onUnload() 监听页面卸载

自定义组件

组件的创建于引用

创建组件

1、在根目录下创建一个 components文件夹

2、在components文件夹中创建一个组件，一个组件就是一个文件夹，文件夹内容分别有.wxml、.wxss、.js、.json四个文件

引用组件

组件的引用分为局部引用与全局引用

局部引用：只能在被引用的页面中使用，在页面的.json文件中配置

{
    "usingComponents":{
        "组件名":"组件路径"
    }
}

在页面中使用：<组件名></组件名>

全局引用：组件可在每个小程序中使用，在根目录中的app.json中配置

{
    "pages":{...},
    "window":{...},
	"usingComponents":{
        "组件名":"组件路径"
    }
}

注意：

1、组件的 .json 文件中需要声明 "component": true 属性

2、组件的 .js 文件中调用的是 Component() 函数

3、组件的事件处理函数需要定义到 methods 节点中

自定义组件的数据、方法、属性

data数据

在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中

methods方法

在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中

properties属性

在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据

properties:{
    //完整定义属性的方式,当需要指定属性默认值时，建议使用此方式
    max:{
        type:Number,//属性值的数据类型
        value:10//属性值的默认值   
    },
    max:Number//简化定义属性的方式，指当不需要默认值时，可以使用此方式   
}

data与properties的区别

在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过：

data 更倾向于存储组件的私有数据

properties 更倾向于存储外界传递到组件中的数据

也可以使用setData()方法来修改properties的值

properties:{
    //完整定义属性的方式,当需要指定属性默认值时，建议使用此方式
    max:{
        type:Number,//属性值的数据类型
        value:10//属性值的默认值   
    },
    max:Number//简化定义属性的方式，指当不需要默认值时，可以使用此方式   
},
methods:{
    upValue(){
        this.setData({
            "max":this.properties.max+1
        })
    }
}    

自定义组件——数据监听

基本用法

observers 数据监听节点，要监听的数据写在observers节点中

语法：

observers:{//数据监听节点
    //可以一次性监听多个数据，回调里的参数时监听数据发生改变后的值
    "要监听的数据":function(监听的数据1，监听的数据2...){
        //数据发生改变时要执行的代码
    }
}

如：

observers:{
	"n1,n2":function(n1,n2){//监听n1,n2数据的变化
        console.log(n1,n2)
    }
}

监听对象的变化

数据监听器支持监听对象中单个或多个属性的变化

observes:{
	"obj.a,obj.b":function(a,b){
        console.log(a,b)
    }
}

自定义组件——纯数据字段

什么是纯数据字段？

概念：纯数据字段指的是那些不用于界面渲染的 data 字段。

应用场景：例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前

组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。

好处：纯数据字段有助于提升页面更新的性能

使用纯数字字段

在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则

表达式的字段将成为纯数据字段

如：

options:{
    //指定所有以_开头的数据为纯数据字段
    pureDataPattern:/^_/
}

自定义组件的生命周期

组件的生命周期

组件可用的生命周期如下表：

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行

组件的3个重要生命周期

在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached。

1、组件实例刚被创建好的时候，created 生命周期函数会被触发

• 此时还不能调用 setData
• 通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

2、在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发

• 此时， this.data 已被初始化完毕
• 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）

3、在组件离开页面节点树后， detached 生命周期函数会被触发

• 退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
• 此时适合做一些清理性质的工作

lifetimes 节点

在小程序组件中，生命周期函数可以直接定义在 Component 构造器的第一级参数中，可以在 lifetimes 字段

内进行声明（这是推荐的方式，其优先级最高）

如：

Component({
	lifetimes:{
        created(){...},//组件实例刚刚被创建时执行
        attached(){...},//组件实例进入页面节点树时执行
        detached(){...}//组件实例被从页面节点树移除时执行    
    }
})

组件所在页面的生命周期

自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。

组件所在页面的生命周期有三个，如表：

生命周期函数	参数	描述说明
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	Object Size	组件所在的页面尺寸变化时执行

pageLifetimes节点

组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中

Component({
	pageLifetimes:{
        show(){...},
        hide(){...},
        resize(){...}    
    }
})

插槽

在自定义组件的 wxml 结构中，可以提供一个 节点（插槽），用于承载组件使用者提供的 wxml 结构。

单个插槽

在小程序中，默认每个自定义组件中只允许使用一个 进行占位，这种个数上的限制叫做单个插槽

使用：

1.在组件中预留好一个插槽

<!--组件 My-test-->
<view>这是自定义组件</view>
<view>给组件预留好一个坑位（插槽）</view>
<slot></slot><!--预留的插槽-->

2.在组件的使用者上插入节点

<My-test>
    <!--者部分内容将会放在组件的slot位置上-->
	<view>插入</view>
</My-test>

多个插槽

启用多个插槽

在小程序的自定义组件中，需要使用多 插槽时，可以在组件的 .js 文件中，通过如下方式进行启用。

Component({
	options:{
		multipleSlots:true//在组件定义时的选项中启用多slot支持
	}
})

定义多个插槽与使用

定义多个插槽需要通过name属性来区分不同的插槽

如：

<!--组件 My-test-->
<view>这是自定义组件</view>
<slot name="slot1"></slot><!--预留的插槽-->
<slot name="slot2"></slot>

在使用带有多个插槽的自定义组件时，需要用 slot 属性来将节点插入到不同的 中

如：

<My-test>
	<view solot="slot1">插槽1</view>
    <view solot="slot2">插槽2</view>
</My-test>

父子组件间的通信

1. 父子组件之间通信的 3 种方式

1、属性绑定

• 用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据

2、事件绑定

• 用于子组件向父组件传递数据，可以传递任意数据

3、获取组件实例

• 父组件还可以通过 this.selectComponent() 获取子组件实例对象
• 这样就可以直接访问子组件的任意数据和方法

属性绑定

属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。

使用方法：

父组件

//父组件的data数据
data:{
    conut:0
}

//父组件的wxml结构
<my-test conut="{{count}}"></my-test>

子组件

子组件在 properties 节点中声明对应的属性并使用

//子组件的properties节点
properties:{
	count:Number
}
//子组件的wxml
<view>子组件中的count为{{count}}</view>

事件绑定

事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下：

① 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

② 在父组件的 wxml 中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件

③ 在子组件的 js 中，通过调用 this.triggerEvent('自定义事件名称', { /* 参数对象 */ }) ，将数据发送到父组件

④ 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

使用方法：

第一步：

• 在父组件的.js中定义一个函数

  methods:{
  	getchild(e){
          console.log("我是父组件，我收到了子组件的值")
          console.log(e.detail.value)//通过e.detail来接收子组件传来的值
      }
  }
  

第二步：

• 在父组件的 wxml 中，通过自定义事件的形式，将第一步中定义的函数引用，传递给子组件。

  自定义事件绑定语法：bind:自定义方法名="方法"

  <my-test bind:getchild="getchild"></my-test>
  

第三步：

• 在子组件的 js 中，通过调用 this.triggerEvent('自定义事件名称', { /* 参数对象 */ }) ，将数据发送到父组件

  methods:{
      send(){
          this.triggerEvent('getchild',{value:100})
      }
  }
  

获取组件实例

可在父组件里调用 this.selectComponent("id或class选择器") ，获取子组件的实例对象，从而直接访问子组

件的任意数据和方法。调用时需要传入一个选择器。

使用方法：

//wxml部分
<my-test class="my-test"></my-test>
<button bindtap="getchild">点击获取组件实例</button>


//js部分
getchild(){
    //获取组件实例
	const child=this.selectComponent(".my-test")
    child.get()//调用子组件get方法
}

behavior

behaviors 是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”。

behaviors 的工作方式

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被

合并到组件中。

每个组件可以引用多个 behavior，behavior 也可以引用其它 behavior。

创建behaviors

调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象，供所有的组件使用

如：

//调用Behaviors创建实例对象
const behavior1 = Behavior({
	//属性节点
    properties:{...},
    //私有数据节点
    data:{...},
    //事件处理函数，与自定义方法节点
    methods:{...}
})
//将创建好的Behavior实例共享出去
exports {behavior1}

引入并使用 behavior

在使用behaviors后会进行混入，behaviors对应的properties、data、methods混入到使用的组件中对应的properties、data、methods中

如：

//引入behavior
import {behavior1} from "../../behaviors/behavior1"

component({
    //将导入的behavior实例对象，挂载到被haviors数组节点中
    behaviors:[behavior1]
})

behavior 中所有可用的节点

可用的节点	类型	是否必填	描述
properties	Object Map	否	同组件的属性
data	Object	否	同组件的数据
methods	Object	否	同自定义组件的方法
behaviors	String Array	否	引入其它的 behavior
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函数
moved	Function	否	生命周期函数
detached	Function	否	生命周期函数

同名字段的覆盖和组合规则

组件和它引用的 behavior 中可以包含同名的字段，此时可以参考如下 3 种同名时的处理规则：

① 同名的数据字段 (data)

② 同名的属性 (properties) 或方法 (methods)

③ 同名的生命周期函数

全局数据共享

全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等

小程序中的全局数据共享

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享

安装Mobx相关包

npm i --save mobx-miniprogram mobx-miniprogram-bindings

创建Mobx的Store实例

创建一个store.js的文件

1.引入mobx-miniprogram中的observable、action

import {observable,action} from "mobx-miniprogram"

2.Store结构

如下：

export const store = {
    //数据
    num1:10,
    num2:20,
    //计算属性
    get sum(){
        return this.num1+this.num2
    }
    //action方法，用来修改store中的数据
    updataNum1:action(function(step){
        this.num1 += step
    })
    updataNum2:action(function(step){
        this.num2 += step
    })
}

3.将store中的成员绑定到页面中

//页面的.js文件
import {createStoreBindings} from "mobx-miniprogram-bindings"
import {store} from "../../store/store"
page({
    onLoad(){
        this.storeBindings=createStoreBindings(this,{
            store,
            fields:["num1","num2","sum"],//指定要绑定的数据，数组方式
            actions:['updataNum1',"updataNum2"]//指定要绑定的方法，数组方式
        })
    }
})

4.将store中的成员绑定到组件中

import {storeBindingsBehavior} from "mobx-miniprogram-bindings"
import {store} from '../../store/store'
component({
	behaviors:[storeBindingsBehavior],//通过storeBindingsBehavior来实现自动绑定
    storeBindings:{
        store,//指定要绑定的store
        fields:{//指定要绑定的数据，对象方式
            num1:()=>store.num1,//绑定的第一种方式
            num2:(store)=>store.num2,//绑定的第二种方式
            sum:"sum"//第三种方式
        },
        actions:{//指定要绑定的方法，对象方式
            updataNum1:'updataNum1',
            updataNum2:'updataNum2'
        }
    }
})

分包

对小程序进行分包的好处主要有以下两点：

• 可以优化小程序首次启动的下载时间

• 在多团队共同开发时可以更好的解耦协作

分包的基础概念

分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的

下载时间。

分包后，小程序项目由 1 个主包 + 多个分包组成：

• 主包：一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源

• 分包：只包含和当前分包有关的页面和私有资源

分包的加载规则

1.在小程序启动时，默认会下载主包并启动主包内页面

• tabBar 页面需要放到主包中

2.当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示

• 非 tabBar 页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

分包的体积规则

目前，小程序分包的大小有以下两个限制：

• 整个小程序所有分包大小不超过 16M（主包 + 所有分包）

• 单个分包/主包大小不能超过 2M

普通分包

普通分包的引用规则

① 主包无法引用分包内的私有资源

② 分包之间不能相互引用私有资源

③ 分包可以引用主包内的公共资源

配置普通分包

在app.json的subPackages中配置

//app.json
{
     "subPackages": [//通过subPackages来声明分包结构
    {
      "root": "PagesA",//第一个分包的根目录
      "pages": [//当前页面下所有分包的存放路径
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root":"PagesB",
      "pages":[
        "pages/apple/apple"
      ],
    }
  ],
}

独立分包

独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行。

独立分包与普通分包的区别

最主要的区别：是否依赖于主包才能运行

• 普通分包必须依赖于主包才能运行

• 独立分包可以在不下载主包的情况下，独立运行

注意：一个小程序中可以有多个独立分包

独立分包的配置方法

独立分包只需要在配置分包下加上一句"independent": true就成了独立分包

//app.json
{
    "subPackages": [//通过subPackages来声明分包结构
    {
      "root": "PagesA",//第一个分包的根目录
      "pages": [//当前页面下所有分包的存放路径
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root":"PagesB",
      "pages":[
        "pages/apple/apple"
      ],
      "independent": true//通过"independent": true声明PagesB分包为独立分包
    }
  ],
}

独立分包的引用原则

独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源！例如：

1.主包无法引用独立分包内的私有资源

2.独立分包之间，不能相互引用私有资源

3.独立分包和普通分包之间，不能相互引用私有资源

4.特别注意： 独立分包中不能引用主包内的公共资源

分包的预下载

分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包

页面时的启动速度。

配置分包的预下载

预下载分包的行为，会在进入指定的页面时触发。在 app.json 中，使用 preloadRule 节点定义分包的预下载

规则

//app.json
{
    "subPackages": [//通过subPackages来声明分包结构
    {
      "root": "PagesA",//第一个分包的根目录
      "pages": [//当前页面下所有分包的存放路径
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root":"PagesB",
      "pages":[
        "pages/apple/apple"
      ],
      "independent": true//通过"independent": true声明PagesB分包为独立分包
    }
  ],
    "preloadRule": {//分包预下载规则
    "pages/index/index":{//触发预下载的页面路径
      //network表示在指定的网络进行预下载
      //network可选值为all（不限网络）与wifi（wifi模式下）
      "network": "all",
      //packages表示进入页面后，预下载哪些分包
      //可以通过root或name指定预下载的分包
      "packages": ["PagesA"]
​
    }
  }
}

注意：预下载的总分包体积不能超过2M