【微信小程序】——Mobx 全局数据共享和分包
全局数据共享
1. 全局数据共享介绍
全局数据共享即状态管理，是为了解决组件之间数据共享的问题，将数据统一存到Store仓库里，各组件都能直接访问仓库内的数据，避免了各组件间频繁的数据传递等问题。
类似的有Vue中的Vuex，Redux，Mobx等。
不使用Store：
使用Store：
2. 小程序中的全局数据共享方案
在小程序中，可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。
mobx-miniprogram：用来创建Store实例对象mobx-miniprogram-bindings：用来把Store中的共享数据或方法，绑定到组件或页面中使用
3. 安装 Mobx 相关的包
注意：安装完成后记得重新构建 npm
4. 创建 Mobx 中 Store 实例
项目根目录下创建 store 文件夹用于存放 Mobx 相关的 JS 文件
创建 store.js 用来创建 store 实例
store.js：
注意：
计算属性的值是==只读==的，不能也不需要对其进行手动修改
==直接修改 store 里的数据可能会带来危险==，所以一般在 actions 方法里修改 store 里的数据
5. 页面中使用 Store 成员
5.1 在页面的 JS 中写入以下代码：
代码分析：
引入
mobx的createStoreBindings方法和我们创建的store实例:
createStoreBindings方法可以将Store中的数据或方法绑定到我们的页面中
在页面加载时，绑定
Store：
createStoreBindings方法接收两个参数，一个是this代表当前页面的实例，第二参数是配置对象，包含三个属性：
store代表数据源
fields代表我们需要将哪些字段绑定到我们的页面中
actions代表我们需要将哪些方法绑定到我们的页面中
createStoreBindings的调用有一个返回值，我们将这个返回值挂载到了当前页面上作为一个自定义属性storeBindings而存在，这样我们就可以在页面卸载时利用storeBindings来清理挂载的 Store 实例
在页面卸载时接触绑定的
Store：
调用
destroyStoreBindings方法即可进行清理Store
5.2 在页面上使用Store数据
页面的.wxm结构：
在页面的 JS 中添加按钮 tap 事件的处理函数：
6. 组件中使用 Store 成员
6.1 在组件的 JS 中写入以下代码：
6.2 在组件上使用Store数据
组件的.wxm结构：
在组件 JS 中的methods方法列表中加入添加按钮 tap 事件的处理函数：
分包
1. 基础概念
什么是分包？分包指的是把一个完整的小程序项目，按照需求划分为不同的之包，在构建时打包成不同的分包，用户在使用时按需进行加载。
分包的好处？
可以优化小程序首次启动的下载时间
在多团队共同开发时可以更好的解耦协作
分包前项目的构成分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间。
分包后项目的构成分包后，小程序项目由 1 个主包+多个分包组成：
主包：一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源
分包：只包含和当前页面有关的页面和私有资源
分包的加载规则
在小程序启动时，默认会下载主包并启动主包内页面
tabBar 页面需要放到主包中
当用户进入分包内某个页面时，客户端会把对应的分包下载下来，下载完成后再进行展示
非 tabBar 页面可以按照功能的不同， 划分为不同的分包之后，进行按需下载
分包的体积限制目前，小程序分包的大小有以下两个限制：
整个小程序所有分包大小不超过==16M==（主包+所有分包）
单个分包/主包大小不能超过==2M==
2. 使用分包
配置方法
app.json 中添加以下分包的配置，保存后会自动生成相应的文件：
查看分包的体积大小
打包原则
小程序会按
subpackages的配置进行分包，subpackages之外的目录将被打包到主包中主包也可以有自己的
pages（即最外层的pages字段）
引用原则
主包 无法引用分包内的私有资源
分包之间不能相互引用私有资源
分包可以引用主包内的公共资源
3. 独立分包
什么是独立分包独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其它分包而单独运行。
独立分包和普通分包的区别最主要的区别：是否依赖于主包才能运行
普通分包必须依赖于主包才能运行
必须先进入主包才能跳到普通分包
独立分包可以在不下载主包的情况下，独立运行
独立分包的应用场景开发者可以按需，将某些具有一定功能独立性的页面配置到独立分包中，原因如下：
当小程序从普通的分包页面启动时，需要首先下载主包
而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度
注意：一个小程序中可以有多个独立分包
独立分包的配置方法独立分包的目录结构于普通分包一样，独立分包只需在
JSON配置中通过independent进行声明：
独立分包的引用原则独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用批次的资源！例如：
主包无法引用独立分包内的私有资源
独立分包之间，不能相互引用私有资源
独立分包和普通分包之间，不能相互引用私有资源
特别注意：独立分包中不能引用主包内的公共资源
4. 分包预下载
分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。
配置分包的预下载预下载分包的行为，会在进入指定的页面时触发。在
app.json中，使用preloadRule节点定义分包的预下载规则，示例代码如下：
分包预下载的限制同一个分包的页面享有共同的预下载大小限额 2M，例如：
案例：自定义 tabBar
1.案例效果
在此案例中，用到的主要知识点如下：
自定义组件
Vant 组件库
MobX 数据共享
组件样式隔离
组件数据监听器
组件的 behaviors
Vant 样式覆盖
2. 实现步骤
配置信息在
app.json文件的tabBar中添加"custom": true同时保留 list 里的配置项：
添加 tabBar 代码文件项目根目录创建
custom-tab-bar文件夹，然后右键此文件夹新建Component，起名为index此时页面底部显示：
表示添加 tabBar 代码文件和配置成功
编写 tabBar 代码
custom-tab-bar/index.wxml：
详细步骤，可以参考小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
版权声明: 本文为 InfoQ 作者【海底烧烤店ai】的原创文章。
原文链接:【http://xie.infoq.cn/article/0c1a45fc16bc9098adceb5033】。文章转载请联系作者。
前端之行，任重道远！ 2022.08.25 加入
本科大三学生、CSDN前端领域新星创作者、华为云享专家、第十三届蓝桥杯国赛三等奖获得者
评论