自定义组件

组件的创建与引用

创建组件

  1. 在项目的根目录中，鼠标右键，创建 components -> test 文件夹

  2. 在新建的 components -> test 文件夹上，鼠标右键，点击 “新建Component“

  3. 键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为.js， .json，.wxml和.wxss

引用组件

组件的引用方式分为 “局部引用” 和 “全局引用” ，顾名思义:

  • 局部引用：组件只能在当前被引用的页面内使用
  • 全局引用：组件可以在每个小程序页面中使用

根据组件的使用频率和范围,来选择合适的引用方式:

  • 如果某组件在多个页面中经常被用到，建议进行“全局引用”
  • 如果某组件只在特定的页面中被用到，建议进行”局部引用’

局部引用组件

在页面的 .json 配置文件中引用组件的方式，叫做 “局部引用”。示例代码如下:

1
2
3
4
5
6
// home.json
{
    "usingComponents": {
        "my-test1":"/components/test1/tes1t"
    }
}
1
2
<!-- home.wxml -->
<my-test1></my-test1>

全局引用组件

在 app.json 全局配置文件中引用组件的方式，叫做 “全局引用”。示例代码如下:

1
2
3
4
5
6
7
8
9
// app.json
{
  "pages":[/*....*/],
  "window":{/*....*/},
  "usingComponents": {
  	"my-test2":"/components/test2/test2"
  }
   //....
}
1
2
<!-- 页面.wxml -->
<my-test2></my-test2>

组件和页面的区别

从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，组件和页面的 .js 与 .json 文件有明显的不同:

  • 组件的 .json 文件中需要声明 “component”: true 属性
  • 组件的 .js 文件中调用的是 Component() 函数
  • 组件的事件处理函数需要定义到 methods 节点中

组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的 UI 结构

  • 组件 A 的样式不会影响组件 C 的样式
  • 组件 A 的样式不会影响小程序页面的样式
  • 小程序页面的样式不会影响组件 A 和 C 的样式

好处:

  1. 防止外界的样式影响组件内部的样式
  2. 防止组件的样式破坏外界的样式

组件样式隔离的注意点

  • app.wxss 中的全局样式对组件无效
  • 只有 class 选择器会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响

建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用id、属性、标签选择器!

修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 stylelsolation 修改组件的样式隔离选项，用法如下:

1
2
3
4
5
6
7
8
9
10
11
// 在组件的 .js 文件中新增如下配置
Component({
    options:{
        styleIsolation:'isolated'
    },
})

// 或在组件 .json 文件中新增如下配置
{
    "styleIsolation":"isolated"
}

styleIsolation 的可选值

可选值 默认值 描述
isolated 是 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响
apply-shared 否 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
shared 否 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了apply-shared 或 shared 的自定义组件

组件的数据

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

1
2
3
4
5
6
7
8
9
10
// components/test/test.js
Component({

    /**
     * 组件的初始数据
     */
    data: {
        count:0
    },
})

组件的方法

在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中，示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// components/test/test.js
Component({

    /**
     * 组件的方法列表
     */
    methods: { // 组件的方法列表 【包含事件处理函数和自定义方法】
        addCount() { // 事件处理函数
            this.setData({count:this.data.count + 1})
            this._showCount() // 通过 this 直接调用自定义方法
        },
        _showCount() { // 自定义方法建议以 _ 开头
            wx.showToast({
              title: 'count值为：' + this.data.count,
              icon: 'none'
            })
        }
    }
})

1
2
<view>count的值是：{{count}}</view>
<button bindtap="addCount">+1</button>

组件的属性

在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// components/test/test.js
Component({

    options:{
        styleIsolation:'isolated'
    },

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

    methods: { 
        addCount() { 
            if(this.data.count >= this.properties.max) return
           // ....
        }
    }
})
1
<my-test1 max="10"></my-test1>

data 和 properties 的区别

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

  • data 更倾向于存储组件的私有数据
  • properties 更倾向于存储外界传递到组件中的数据
1
this.data === this.properties // true
1
2
3
methods:{
    addMax(){ this.setData({ max:this.properties.max + 1 }) },
}
1
2
3
4
<view>
    max属性的值为：{{max}}
</view>
<button bindtap="addMax">max+1</button>

数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下:

1
2
3
4
5
6
7
Component({
    observers:{
        '字段A,字段B': function(字段A的新值,字段B的新值) {
            // do something
        }
    },
})

数据监听器的基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// components/test2/test2.js
Component({

    data: { n1:0, n2:0, sum:0 }, // 数据节点
 
    methods: { // 方法列表
        addN1(){ this.setData({ n1: this.data.n1+1 }) },
        addN2(){ this.setData({ n2: this.data.n2+1 }) }
    },

    observers:{ // 数据监听节点
        'n1,n2': function(newN1,newN2) { // 监听 n1 和 n2 数据的变化
            this.setData({ sum:newN1+newN2 }) // 通过监听器，自动计算 sum 的值
        }
    }
})

监听对象属性的变化

数据监听器支持监听对象中单个或多个属性的变化，示例语法如下:

1
2
3
4
5
6
7
8
9
10
11
Component({
    observers:{
        '对象.属性A,对象.属性B': function(属性A的新值,属性B的新值) {
            // 触发此监听器的 3 种情况
            // 【为属性A赋值】 使用 setData 设置 this.data.对象.属性A 时触发
            // 【为属性B赋值】 使用 setData 设置 this.data.对象.属性B 时触发
            // 【直接为对象赋值】 使用 setData 设置 this.data.对象 时触发
            // do something
        }
    },
})

数据监听器-案例

监听对象中所有属性的变化

如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化，示例代码如下:

1
2
3
4
5
6
7
8
observers:{
    // 使用通配符 ** 监听对象上所有属性的变化
    'rgb.**': function(obj) {
        this.setData({
            fullColor:`${obj.r},${obj.g},${obj.b}`
        })
    }
}

纯数据字段

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

应用场景：例如有些情况下，某些data中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的data字段适合被设置为纯数据字段。

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

使用规则

在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段，示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Component({

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

    /**
     * 组件的初始数据
     */
    data: {
        a: true, // 普通数据字段
        _b: true
    },
)}

组件的生命周期

组件全部的生命周期函数

小程序组件可用的全部生命周期如下表所示:

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

组件主要的生命周期函数

在小程序组件中，最重要的生命周期函数有3个，分别是 created、attached、detached。它们各自的特点如下:

  1. 组件实例刚被创建好的时候，created 生命周期函数会被触发
    • 此时还不能调用 setData
    • 通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段
  2. 在组件完全初始化完毕、进入页面节点树后，attached 生命周期函数会被触发
    • 此时, this.data 已被初始化完毕
    • 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据)
  3. 在组件离开页面节点树后，detached 生命周期函数会被触发
    • 退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
    • 此时适合做一些清理性质的工作

lifetimes 节点

在小程序组件中，生命周期函数可以直接定义在 Component 构造器的第一级参数中，可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高)。示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
Component({
    // 推荐用法
	lifetimes:{
        created() {}, // 在组件实例刚刚被创建时执行
        attached() {}, // 在组件实例进入页面节点树时执行
        detached() {} // 在组件实例被从页面节点树移除时执行
    },
    // 以下是旧式的定义方式
    created() {}, // 在组件实例刚刚被创建时执行
    attached() {}, // 在组件实例进入页面节点树时执行
    detached() {} // 在组件实例被从页面节点树移除时执行
})

组件所在页面的生命周期

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

例如：每当触发页面的 show 生命周期函数的时候，我们希望能够重新生成一个随机的 RGB 颜色值。在自定义组件中，组件所在页面的生命周期函数有如下 3 个，分别是:

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

pageLifetimes 节点

组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中，示例代码如下:

1
2
3
4
5
6
7
Component({
    pageLifetimes:{
        show: function() {}, // 页面被展示
    	hide: function() {}, // 页面被隐藏
     	resize: function(size) { } // 页面尺寸变化
    }
})

组件的插槽

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

单个插槽

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

1
2
3
4
5
6
7
<!--components/test4/test4.wxml-->
<view>
    <view>
        这里是组件的内部结构
    </view>
    <slot></slot>
</view>
1
2
3
4
<!--pages/home/home.wxml-->
<my-test4>
这里是插入到组件slot中的内容
</my-test4>

启用多个插槽

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

1
2
3
4
5
6
// components/test4/test4.js
Component({
    options:{
        multipleSlots:true // 启用多 slot 文件
    }
})

定义多个插槽

可以在组件的 .wxml 中使用多个 <slot> 标签，以不同的 name 来区分不同的插槽。示例代码如下:

1
2
3
4
5
6
7
8
<!--components/test4/test4.wxml-->
<view class="component-item">
    <slot name="before"></slot>
    <view>
        这里是组件的内部结构
    </view>
    <slot name="after"></slot>
</view>
1
2
3
4
5
6
7
8
9
<!--pages/home/home.wxml-->
<my-test4>
    <view slot="before">
    这里是插入到组件befor插槽中的内容
    </view>
    <view slot="after">
    这里是插入到组件after插槽中的内容
    </view>
</my-test4>

父子组件之间的通信

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

  1. 属性绑定
    • 用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据
  2. 事件绑定
    • 用于子组件向父组件传递数据，可以传递任意数据
  3. 获取组件实例
    • 父组件还可以通过 this.selectComponent() 获取子组件实例对象
    • 这样就可以直接访问子组件的任意数据和方法

属性绑定

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

1
2
3
4
5
6
// pages/home/home.js
Page({
    data: {
        count:0
    },
})
1
2
3
4
5
<!--pages/home/home.wxml-->
<view>
    父组件中，count值是
    {{count}}
</view>

子组件在 properties 节点中声明对应的属性并使用。示例代码如下:

1
2
3
4
5
6
7
8
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        count:Number
    },
)}
1
2
3
4
<!--components/test5/test5.wxml-->
<view>
    子组件中，count值是 {{count}}
</view>

事件绑定

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

  1. 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
  2. 在父组件的 wxml 中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件
  3. 在子组件的 js 中，通过调用 this.triggerEvent(‘自定义事件名称‘,{ /* 参数对象 */}**)**，将数据发送到父组件
  4. 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

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

1
2
3
4
5
6
7
8
9
10
11
12
// 在父组件中定义 syncCount 方法
// 将来，这个方法会被传递给子组件，供子组件进行调用

// pages/home/home.js
Page({
    data:{
        count:0
    },
    syncCount() {
        console.log('syncCount')
    },
})

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

1
2
3
4
<!-- 使用bind:自定义事件名称（推荐：结构清晰） -->
<my-test5 count="{{count}}" bind:sync="syncCount"></my-test5>
<!-- 或在 bind 后面直接写上自定义事件名称 -->
<my-test5 count="{{count}}" bindsync="syncCount"></my-test5>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// components/test5/test5.js
Component({

    properties: {
        count:Number
    },

    methods: {
        addCount(){
            this.setData({
                count:this.properties.count+1
            })
            this.triggerEvent('sync',{value:this.properties.count})
        }
    }
})

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

1
2
3
4
5
6
7
8
9
10
11
12
// pages/home/home.js
Page({
    data:{
        count:0
    },
    syncCount(e) {
        // console.log(e.detail.value);
        this.setData({
            count:e.detail.value
        })
    },
})

获取组件实例

可在父组件里调用 this.selectComponent(“id或class选择器”)**，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器**，例如 this.selectComponent(“.my-component”)。

1
2
3
4
5
6
7
8
// pages/home/home.js
Page({
    getChild() { // 按钮的事件处理函数
       const child = this.selectComponent('.my-child') // 获取子组件实例
       child.setData({count:child.properties.count+1}) // 调用子组件的 setData 方法
       child.addCount() // 调用子组件的 addCount 方法
    },
)}
1
2
3
<!--pages/home/home.wxml-->
<my-test5 count="{{count}}" bind:sync="syncCount" class="my-child"></my-test5>
<button bindtap="getChild">获取子组件实例</button>

behaviors

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

behaviors的工作方式

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

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

创建 behavior

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// behavior/my-behavior.js

// 调用 Behavuir() 方法，创建实例对象
// 并使用 module.exports 将 behavior 实例对象共享出去
module.exports = Behavior({
    // 属性节点
    properties:{},
    // 私有数据节点
    data: { username: 'zs' },
    // 事件处理函数和自定义方法节点
    methods: {}
    // 其他节点...
})

导入并使用 behavior

在组件中，使用 require() 方法导入需要的 behavior，挂载后即可访问 behavior 中的数据或方法，示例代码如下:

1
2
3
4
5
6
7
8
9
10
// components/test5/test5.js

// 使用 require() 导入需要的自定义 behavior 模块
const myBehavior = require("../../behaviors/my-behavior")

Component({
    // 将导入的 behavior 实例对象，挂载到 behaviors 数组节点中，即可生效
    behaviors: [myBehavior],
    // 组件的其他节点...
})
1
2
3
4
<!--components/test5/test5.wxml-->
<view>
        在behaviors中定义的用户名是：{{username}}
</view>

behavior 中所有可用的节点

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

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

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

  1. 同名的数据字段 (data)
  2. 同名的属性 (properties) 或方法 (methods)
  3. 同名的生命周期函数

关于详细的覆盖和组合规则，大家可以参考微信小程序官方文档给出的说明:

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html

组件的总结

  1. 创建并引用组件
    • 全局引用、局部引用、usingComponents
  2. 如何修改组件的样式隔离选项
    • options -> stylelsolation ( isolated , apply-shared, shared )
  3. 定义和使用数据监听器
    • observers
  4. 定义和使用纯数据字段
    • options -> pureDataPattern
  5. 实现组件父子通信的3种方式
    • 属性绑定、事件绑定、this.selectComponent(‘ id或class选择器’)
  6. 定义和使用behaviors
    • 调用 Behavior() 构造器方法

使用 npm 包

小程序对 npm 的支持与限制

目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用 npm 包有如下3个限制:

  1. 不支持依赖于 Node.js 内置库的包
  2. 不支持依赖于浏览器内置对象的包
  3. 不支持依赖于 C++ 插件的包

总结：虽然 npm 上的包有千千万，但是能供小程序使用的包却 “为数不多”。

Vant Weapp

Vant Weapp是有赞前端团队开源的一套小程序U组件库，助力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议，对商业使用比较友好。

官方文档地址 https://youzan.github.io/vant-weapp

安装Vant组件库

在小程序项目中，安装 Vant 组件库主要分为如下3步:

  1. 通过 npm 安装（建议指定版本为**@1.3.3**)
  2. 构建 npm 包
  3. 修改 app.json

详细的操作步骤，大家可以参考Vant官方提供的快速上手教程:

https://youzan.github.io/vant-weapp/#/quickstart#tan-zhuang

安装步骤

打开项目根目录的终端

1
2
npm init -y // 初始化包管理器
npm i @vant/weapp@1.3.3 -S --production // 安装指定版本的vant

在微信开发者工具中

  • 工具菜单栏 -> 构建npm
  • 右上角详情 -> 本地设置 -> 勾选使用npm模块 （新版好像没有这个选项）
  • 将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

使用Vant组件

安装完 Vant 组件库之后，可以在 app.json 或 页面.json 的 usingComponents 节点中引入需要的组件，即可在 wxml 中直接使用组件。示例代码如下:

1
2
3
4
5
6
7
// app.json
{
   //.....
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}
1
2
3
4
5
6
<!--pages/home/home.wxml-->
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

定制全局主题样式

Vant weapp 使用 CSS变量 来实现定制主题。关于 CSS 变量的基本用法，请参考 MDN 文档:

https://developer.mozilla.org/zh-CN/docs/Web/CsS/using_css_custom_properties

在 app.wxss 中，写入CSS变量，即可对全局生效:

1
2
3
4
5
/**app.wxss**/
page {
    --button-danger-background-color:#C00000;
    --button-danger-border-color:#D60000;
}

vant 样式变量参考：https://youzan.github.io/vant-weapp/#/theme

API Promise化

默认情况下，小程序官方提供的异步 API 都是基于回调函数实现的，例如，网络请求的 API 需要按照如下的方式调用:

1
2
3
4
5
6
7
8
wx.request({
    method:'',
    url:'',
    data:{},
    success:() => {}, // 请求成功的回调函数
    fail:() => {}, // 请求失败的回调函数
    complete:() => {} // 请求完成的回调函数
})

缺点:容易造成回调地狱的问题，代码的可读性、维护性差!

APl Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于 Promise 的异步API，从而提高代码的可读性、维护性，避免回调地狱的问题。

在小程序中，实现 APl Promise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包。它的安装和使用步骤如下:

1
npm install --save miniprogram-api-promise@1.0.4 // 安装 miniprogram-api-promise

注意：相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm。

1
2
3
4
5
6
7
8
// 在小程序入口文件中(app.js)，只需调用一次 promisifyAl1()方法，
// 即可实现异步 API的 Promise 化

import { promisifyAll } from 'miniprogram-api-promise'

const wxp = wx.p = {}
// promisify all xs`s api
promisifyAll(wx,wxp)

调用 Promise化之后的异步 API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// pages/home/home.js
Page({
    async getInfo () {
       const {data:res} = await wx.p.request({
            method:'GET',
            url:'https://www.escook.cn/api/get',
            data:{
                name:'zs',
                age:20
            }
        })
        console.log(res);
    },
})
1
<van-button type="primary" bindtap="getInfo">主要按钮</van-button>

全局数据共享

全局数据共享（又叫做:状态管理）是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有: Vuex、Redux、MobX等。

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

  • mobx-miniprogram 用来创建 Store 实例对象
  • mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

安装 MobX 相关的包

1
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

注意：MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm。

创建 MobX 的 Store 实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 在这个JS文件中，专门来创建 Store 的实例对象
import { observable,action } from 'mobx-miniprogram'

export const store = observable({
    // 数据字段
    numA:1,
    numB:2,
    // 计算属性
    get sum() {
        return this.numA + this.numB
    },
    // actions 方法，专门用来修改 store 中的数据
    updateNum1:action(function(step){
        this.numA += step
    }),
    updateNum2:action(function(step){
        this.numB += step
    }),
})

将 Store 中的成员绑定到页面中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// pages/messsage/messsage.js
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Page({

    //...

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.storeBindings = createStoreBindings(this,{ 
            store, // 数据源
            fields:['numA','numB','sum'],
            actions:['updateNum1']
        })
    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        this.storeBindings.destroyStoreBindings()
    },
})

在页面上使用 Store 中的成员

1
2
3
4
5
6
Page({
    // ...
    btnHandler1(e){
        this.updateNum1(e.target.dataset.step)
    },
)}
1
2
3
4
5
6
<!--pages/messsage/messsage.wxml-->
<view>
    {{numA}} + {{numB}} = {{sum}}
</view>
<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA + 1</van-button>
<van-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">numA - 1</van-button>

将 Store 中的成员绑定到组件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// components/numbers/numbers.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Component({
	// ...
    behaviors:[storeBindingsBehavior],

    storeBindings:{
        store, // 指定要绑定的 Store
        fields:{ // 指定要绑定的字段数据
            numA: () => store.numA, // 绑定字段的第 1 种方式
            numB: (store) => store.numB, // 绑定字段的第 2 种方式
            sum:'sum' // 绑定字段的第 3 种方式
        },
        actions:{ // 指定要绑定的方法
            updateNum2:'updateNum2'
        }
    },
)}

在组件中使用 Store 中的成员

1
2
3
4
5
6
7
8
9
10
11
// components/numbers/numbers.js
Component({
    /**
     * 组件的方法列表
     */
    methods: {
        btnHandler2(e){
            this.updateNum2(e.target.dataset.step)
        }
    }
})
1
2
3
4
5
6
<!--components/numbers/numbers.wxml-->
<view>
    {{numA}} + {{numB}} = {{sum}}
</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB + 1</van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB - 1</van-button>

分包

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

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

  • 可以优化小程序首次启动的下载时间
  • 在多团队共同开发时可以更好的解耦协作

分包的加载规则

  1. 在小程序启动时，默认会下载主包并启动主包内页面
    • tabBar 页面需要放到主包中
  2. 当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示
    • 非 tabBar 页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

分包的体积限制

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

  • 整个小程序所有分包大小不超过16M（主包＋所有分包)
  • 单个分包/主包大小不能超过2M

配置分包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "pages":[ // 主包的所有页面
    "pages/home/home",
    "pages/messsage/messsage",
    "pages/contact/contact"
  ],
  "subPackages": [ // 通过subPackages节点，声明分包的结构
    {
        "root": "pkgA", // 第一个分包的根目录
        "name": "p1", // 分包的别名
        "pages": [ // 当前分包下，所有页面的相对存放路径
            "pages/cat/cat",
            "pages/dog/dog"
        ]
    },
    {
        "root": "pkgB", // 第二个分包的根目录
        "name":"p2", // 分包的别名
        "pages": [ // 当前分包下，所有页面的相对存放路径
            "pages/apple/apple"
        ]
    }
  ],
}

通过 右上角详情 -> 基本信息 -> 本地代码 ，可以查看到分包的大小

打包原则

  1. 小程序会按 subpackages 的配置进行分包，subpackages 之外的目录将被打包到主包中
  2. 主包也可以有自己的 pages (即最外层的 pages 字段)
  3. tabBar 页面必须在主包内
  4. 分包之间不能互相嵌套

引用原则

  1. 主包无法引用分包内的私有资源
  2. 分包之间不能相互引用私有资源
  3. 分包可以引用主包内的公共资源

独立分包

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

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

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

  • 普通分包必须依赖于主包才能运行
  • 独立分包可以在不下载主包的情况下，独立运行

独立分包的应用场景

开发者可以按需，将某些具有一定功能独立性的页面配置到独立分包中。原因如下：

  • 当小程序从普通的分包页面启动时，需要首先下载主包
  • 而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度

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

独立分包的配置方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"subPackages": [
  {
      "root": "pkgA",
      "name": "p1",
      "pages": [
          "pages/cat/cat",
          "pages/dog/dog"
      ]
  },
  {
      "root": "pkgB",
      "name": "p2",
      "pages": [
          "pages/apple/apple"
      ],
      "independent": true // 通过此节点，声明当前 pkgB 分包为“独立分包”
  }
],

独立分包的引用原则

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

  1. 主包无法引用独立分包内的私有资源
  2. 独立分包之间，不能相互引用私有资源
  3. 独立分包和普通分包之间，不能相互引用私有资源
  4. 特别注意：独立分包中不能引用主包内的公共资源

分包预下载

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

配置分包的预下载

预下载分包的行为，会在进入指定的页面时触发。在 app.json中，使用 preloadRule 节点定义分包的预下载规则，示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "pages":[
    "pages/home/home",
    "pages/messsage/messsage",
    "pages/contact/contact"
  ],
  "preloadRule": { // 分包预下载的规则
      "pages/contact/contact":{ // 触发分包预下载的页面路径
          // packages 表示进入页面后，预下载哪些分包 
          // 可以通过root或name指定预下载哪些分包
          "packages": ["p1"],
          // network表示在指定的网络模式下进行预下载， 
          // 可选值为: all（不限网络）和 wifi（仅 wifi模式下进行预下载) 
          // 默认值为: wifi
          "network": "all" 
      }
  },
  // ....
}

分包预下载的限制

同一个分包中的页面享有共同的预下载大小限额 2M

总结

  1. 能够知道如何安装和配置vant-weapp 组件库
    • 参考Vant的官方文档
  2. 能够知道如何使用MobX实现全局数据共享
    • 安装包、创建Store、参考官方文档进行使用
  3. 能够知道如何对小程序的API进行Promise 化
    • 安装包、在app.js 中进行配置
  4. 能够知道如何实现自定义tabBar的效果
    • Vant组件库＋自定义组件＋全局数据共享