全局数据共享

1. 全局数据共享介绍

全局数据共享即状态管理，是为了解决组件之间数据共享的问题，将数据统一存到Store仓库里，各组件都能直接访问仓库内的数据，避免了各组件间频繁的数据传递等问题。

类似的有Vue中的Vuex，Redux，Mobx等。

不使用Store：
在这里插入图片描述
使用Store：

2. 小程序中的全局数据共享方案

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

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

3. 安装Mobx相关的包

npm install --save mobx-miniprogram mobx-miniprogram-bindings

注意：安装完成后记得重新构建npm

4. 创建Mobx中Store实例

项目根目录下创建store文件夹用于存放Mobx相关的JS文件

创建store.js用来创建store实例
在这里插入图片描述

store.js：

//在这个JS文件里，专门来创建Store的实例对象

import { action, observable } from 'mobx-miniprogram'
export const store = observable({
    //数据字段
    numA: 1,
    numB: 2,
    //计算属性：当numA或numB变化时，自动更新sum的值
    get sum() {
        return this.numA + this.numB
    },
    // actions 方法，用来修改store中的数据
    updateNum1: action(function (step) {
        this.numA += step
    }),
    updateNum2: action(function (step) {
        this.numB += step
    })
})

注意：

计算属性的值是==只读==的，不能也不需要对其进行手动修改

==直接修改store里的数据可能会带来危险==，所以一般在actions方法里修改store里的数据

5. 页面中使用Store成员

5.1 在页面的JS中写入以下代码：

// 页面的.js文件
import { createStoreBindings } from "mobx-miniprogram-bindings";
import { store } from "../../store/store";
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

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

代码分析：

引入mobx的createStoreBindings 方法和我们创建的store实例:

import { createStoreBindings } from "mobx-miniprogram-bindings";
import { store } from "../../store/store";

createStoreBindings 方法可以将 Store中的数据或方法绑定到我们的页面中

在页面加载时，绑定Store：

   onLoad: function (options) {
        this.storeBindings = createStoreBindings(this,{
            store,
            fields:['numA','numB','sum'],
            actions:['updateNum1']
        })
    },

createStoreBindings方法接收两个参数，一个是this代表当前页面的实例，第二参数是配置对象，包含三个属性：

store代表数据源

fields代表我们需要将哪些字段绑定到我们的页面中

actions代表我们需要将哪些方法绑定到我们的页面中

createStoreBindings的调用有一个返回值，我们将这个返回值挂载到了当前页面上作为一个自定义属性storeBindings而存在，这样我们就可以在页面卸载时利用storeBindings来清理挂载的Store实例

在页面卸载时接触绑定的Store：

    onUnload: function () {
        this.storeBindings.destroyStoreBindings()
    },

调用 destroyStoreBindings方法即可进行清理 Store

5.2 在页面上使用Store数据

页面的.wxm结构：

<view>
{{numA}} +{{numB}} = {{sum}}
<button type="primary" bindtap="btn1" data-step="{{1}}">numA+1</button>
<button type="primary" bindtap="btn1" data-step="{{-1}}">numA-1</button>
</view>

在页面的JS中添加按钮tap事件的处理函数：

btn1(e){
    this.updateNum1(e.target.dataset.step)
}

6. 组件中使用Store成员

6.1 在组件的JS中写入以下代码：

// components/numbers/numbers.js
import {storeBindingsBehavior} from "mobx-miniprogram-bindings"
import {store} from '../../store/store'
Component({
    //通过storeBindingsBehavior来实现自动绑定
    behaviors:[storeBindingsBehavior],
    storeBindings:{
        //指定要绑定的Store
        store,
        fields:{
            // 绑定字段的第1种方式
            numA:()=>store.numA,
            // 绑定字段的第2种方式
            numB:(store)=>store.numB,
            // 绑定字段的第3种方式
            sum:'sum'
        },
        actions:{
            updateNum2:'updateNum2'
        }
    },
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})

6.2 在组件上使用Store数据

组件的.wxm结构：

{{numA}}+{{numB}}={{sum}}
<button type="primary" bindtap="Cbtn1" data-step="{{1}}">CnumA+1</button>
<button type="primary" bindtap="Cbtn1" data-step="{{-1}}">CnumA-1</button>

在组件JS中的methods方法列表中加入添加按钮tap事件的处理函数：

Cbtn1(e){
    this.updateNum2(e.target.dataset.step)
},

分包

1. 基础概念

什么是分包？

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

分包的好处？
- 可以优化小程序首次启动的下载时间
- 在多团队共同开发时可以更好的解耦协作
- 分包前项目的构成

分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间。
在这里插入图片描述

分包后项目的构成

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

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

在这里插入图片描述

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

分包的体积限制

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

整个小程序所有分包大小不超过==16M==（主包+所有分包）
单个分包/主包大小不能超过==2M==

2. 使用分包

配置方法

在这里插入图片描述

在这里插入图片描述
app.json中添加以下分包的配置，保存后会自动生成相应的文件：

//app.json
  "subpackages": [
    {
      "root":"pkgA",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root":"pkgB",
      "pages": [
        "pages/apple/apple"
      ]
    }
  ],

在这里插入图片描述

查看分包的体积大小

在这里插入图片描述

打包原则
- 小程序会按subpackages的配置进行分包，subpackages之外的目录将被打包到主包中
- 主包也可以有自己的pages（即最外层的pages字段）
```
  "pages":[
         "pages/home/home",
           "pages/message/message",
          "pages/contact/contact"
   ],
```
- tabBar页面必须在主包内
如上代码即是 tabBar页面的配置，配置到了主包的pages里
- 分包之间不能互相嵌套
引用原则
- 主包无法引用分包内的私有资源
- 分包之间不能相互引用私有资源
- 分包可以引用主包内的公共资源

在这里插入图片描述
## 3. 独立分包

什么是独立分包

独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其它分包而单独运行。
在这里插入图片描述

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

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

* 普通分包必须依赖于主包才能运行
    >必须先进入主包才能跳到普通分包
* 独立分包可以在不下载主包的情况下，独立运行

独立分包的应用场景

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

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

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

独立分包的配置方法

独立分包的目录结构于普通分包一样，独立分包只需在JSON配置中通过independent进行声明：

//app.json
//pkgB设置为独立分包
"subpackages": [
    {
      "root":"pkgA",
      "name": "p1",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root":"pkgB",
      "name": "p2",
      "pages": [
        "pages/apple/apple"
      ],
      "independent": true
    }
  ],

独立分包的引用原则

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

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

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

配置分包的预下载
预下载分包的行为，会在进入指定的页面时触发。在app.json中，使用preloadRule节点定义分包的预下载规则，示例代码如下：
```
"preloadRule": {
    "pages/contact/contact":{
      "packages": ["p1"],
      "network": "all"
    }
  },
  "subpackages": [
    {
      "root":"pkgA",
      "name": "p1",
      "pages": [
        "pages/cat/cat",
        "pages/dog/dog"
      ]
    },
    {
      "root":"pkgB",
      "name": "p2",
      "pages": [
        "pages/apple/apple"
      ],
      "independent": true
    }
  ],
```
上述代码配置的是打开pages/contact/contact页面时，在任意网络环境下都会预下载p1分包。
打开pages/contact/contact页面时查看调试器控制台会有正在预下载p1和预下载成功的提示：
- 分包预下载的限制
同一个分包的页面享有共同的预下载大小限额2M，例如：
案例：自定义tabBar
1.案例效果

在此案例中，用到的主要知识点如下：

自定义组件
Vant组件库
MobX数据共享
组件样式隔离
组件数据监听器
组件的behaviors
Vant 样式覆盖

2. 实现步骤

配置信息

在app.json文件的tabBar中添加"custom": true同时保留list里的配置项：

  "tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabs/contact.png",
      "selectedIconPath": "/images/tabs/contact-active.png"
    }]
  },

添加tabBar代码文件

项目根目录创建custom-tab-bar文件夹，然后右键此文件夹新建Component，起名为index

此时页面底部显示：

在这里插入图片描述
表示添加tabBar代码文件和配置成功

编写tabBar代码

custom-tab-bar/index.wxml：

<!--使用vant的van-tabbar 组件-->
<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#13A7A0">
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info?item.info:''}}">
    <image
      slot="icon"
      src="{{ item.iconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    <image
      slot="icon-active"
      src="{{ item.selectedIconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

`custom-tab-bar/index.wxss`：


```css
/* 修改van-tabbar样式进行样式覆盖 */

.van-tabbar-item {
    --tabbar-item-margin-bottom:0;
}
```
`custom-tab-bar/index.js`：


```javascript
// custom-tab-bar/index.js
import { storeBindingsBehavior } from "mobx-miniprogram-bindings"
import { store } from '../store/store'
Component({
    //在自定义组件中使用 Vant Weapp 组件时，需开启styleIsolation: 'shared'才能进行样式覆盖
    options: {
        styleIsolation: 'shared'
    },
    //通过storeBindingsBehavior来实现自动绑定
    behaviors: [storeBindingsBehavior],
    storeBindings: {
        //指定要绑定的Store
        store,
        fields: {
            sum: 'sum',
            active:'active'
        },
        actions:{
            changeActive:'changeActive'
        },
    },
    /**
     * 数据监听器
     */
    observers:{
        "sum":function (val) {
            // 赋值操作
           this.setData({
               'list[1].info':val
           })
        }
    },
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
   
        list: [{
            pagePath: "/pages/home/home",
            text: "首页",
            iconPath: "/images/tabs/home.png",
            selectedIconPath: "/images/tabs/home-active.png"
        }, {
            pagePath: "/pages/message/message",
            text: "消息",
            // 消息数量
            info: 0,
            iconPath: "/images/tabs/message.png",
            selectedIconPath: "/images/tabs/message-active.png"
        }, {
            pagePath: "/pages/contact/contact",
            text: "联系我们",
            iconPath: "/images/tabs/contact.png",
            selectedIconPath: "/images/tabs/contact-active.png"
        }]

    },

    /**
     * 组件的方法列表
     */
    methods: {
        onChange(event) {
            // event.detail为选中项索引
            // 调用store里的修改tabBar选中项索引的函数
             this.changeActive(event.detail)
            //  手动实现页面跳转
             wx.switchTab({
               url: this.data.list[event.detail].pagePath,
             })
        },
    }
})

```
`store/store.js`：


```javascript
//在这个JS文件里，专门来创建Store的实例对象

import { action, observable } from 'mobx-miniprogram'
export const store = observable({
    //数据字段
    numA: 1,
    numB: 2,
    // tabBar选中项索引
    active: 0,
    //计算属性：当numA或numB变化时，自动更新sum的值
    get sum() {
        return this.numA + this.numB
    },
    // actions 方法，用来修改store中的数据
    updateNum1: action(function (step) {
        this.numA += step
    }),
    updateNum2: action(function (step) {
        this.numB += step
    }),
    changeActive: action(function (index) {
        this.active = index
    })
})
```

详细步骤，可以参考小程序官方文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

【微信小程序】——Mobx全局数据共享和分包

全局数据共享

1. 全局数据共享介绍

2. 小程序中的全局数据共享方案

3. 安装Mobx相关的包

4. 创建Mobx中Store实例

5. 页面中使用Store成员

6. 组件中使用Store成员

分包

1. 基础概念

2. 使用分包

案例：自定义tabBar

1.案例效果

2. 实现步骤

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【微信小程序】——Mobx全局数据共享和分包

全局数据共享

1. 全局数据共享介绍

2. 小程序中的全局数据共享方案

3. 安装Mobx相关的包

4. 创建Mobx中Store实例

5. 页面中使用Store成员

6. 组件中使用Store成员

分包

1. 基础概念

2. 使用分包

案例：自定义tabBar

1.案例效果

2. 实现步骤

热门文章

最新文章

相关课程

相关电子书

相关实验场景