全局数据共享
全局数据共享(又叫做状态管理)是为了解决组件之间数据共享的问题。
开发中常用的全局数据共享方案有:Vuex、Redux、Mobx等。
小程序中的全局共享方案
在小程序中,可使用 mobx-miniprogram
配合 mobx-miniprogram-bindings
实现全局数据共享。
mobx-miniprogram
用来创建 Store 实例对象
mobx-miniprogram-bindings
用来把 Store 中的共享数据或方法,绑定到组件或页面中使用
安装 Mobx 相关的包
npm install --save [email protected] [email protected]
安装完成后,记得重新构建 npm
创建 Mobx 的 Store 实例对象
// 创建一个 Store 文件夹 和 Store.js 文件
import { observable, action } form '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 中的成员绑定到页面中
// 页面的 .js 文件
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
page({
onLoad: function(){ // 生命周期函数,监听页面加载
this.storeBindings = createStoreBindings(this, {
store,
field: ['numA', 'numB', 'sum'],
actions: ['updateNum1']
})
},
onUnload: function(){ // 生命周期函数,监听页面卸载
this.storeBindings.destoryStoreBindings()
}
})
在页面上使用 Store 中的成员
// 页面的 .wxml 结构
<view>{{numA}} + {{numB}} = {{sum}}</view>
<button bindtao="btnHandler1" data-step="{{1}}"> numA + 1</button>
<button bindtao="btnHandler1" data-step="{{-1}}"> numA - 1</button>
// 按钮 tap 事件的处理函数
btnHandler1(e){
this.updateNum1(e.target.dataset.step)
}
将 Store 中的成员绑定到组件中
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Component({
behaviors: [storeBindingsBehavior], // 通过 storeBindingsBehavior 来实现自动绑定
storeBindings: {
store, // 指定要绑定的 Store
fields: { // 指定要绑定字段数据
numA: () => store.numA, // 绑定字段的第 1 种方式
numB: (store) => store.numA, // 绑定字段的第 2 种方式
sum: 'sum', // 绑定字段的第 3 种方式
},
actions: { // 指定要绑定的方法
updateNum2: 'updateNum2'
}
}
})
在组件中使用 Store 中的成员
// 组件的 .wxml 结构
<view>{{numA}} + {{numB}} = {{sum}}</view>
<button bindtao="btnHandler2" data-step="{{1}}"> numB + 1</button>
<button bindtao="btnHandler2" data-step="{{-1}}"> numB - 1</button>
// 按钮 tap 事件的处理函数B
btnHandler2(e){
this.updateNum2(e.target.dataset.step)
}
分包
分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。
分包的好处:
-
可以优化小程序首次启动的下载时间
-
在多团队共同开发时可以更好的解耦协作
分包后项目的构成
-
主包:一般只包含项目的启动页面或 TabBar 页面,以及所有分包都需要用到的一些公共资源
-
分包:只包含和当前分包有关的页面和私有资源
分包的加载规则
-
在小程序启动时,默认会下载主包并启动主包内页面
-
tabBar 页面需要放到主包中
-
-
当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示
-
非 tabBar 页面可以按照功能的不同,划分为不同的分包之后,进行按需下载
-
分包的体积限制
小程序分包的大小有两个限制:
-
整个小程序所有分包大小不超过 16M(主包 + 所有分包)
-
单个分包 / 主包大小不能超过 2M
分包配置方法
-
app.js
-
app.json
-
app.wxss
-
pages -- 主包的所有页面
-
index
-
logs
-
-
packageA -- 第一个分包
-
pages -- 第一个分包的所有页面
-
act
-
dog
-
-
-
packageB -- 第二个分包
-
pages -- 第二个分包的所有页面
-
apple
-
banana
-
-
-
utils
{
"pages": [ // 主包的所有页面
"pages/index",
"pages/logs"
],
"subpackages": [ // 通过 subpackages 节点,声明分包的结构
{
"root": "packageA", // 第一个分包的根目录
"pages": [ // 当前分包下,所有页面的相对存放路径
"pages/car",
"pages/dog"
]
},{
"root": "packageB", // 第二个分包的根目录
"name": "pack2", // 分包的别名
"pages": [ // 当前分包下,所有页面的相对存放路径
"pages/apple",
"pages/banana"
]
}
]
}
分包打包规则
-
小程序会按 subpackages 的配置进行分包,subpackages 之外的目录将被打包到主包中
-
主包也可以有自己的 pages (即最外层的 pages 字段)
-
tabBar 页面必须在主包内
-
分包之间不能互相嵌套
分包的引用原则
-
主包无法引用分包内的私有资源
-
分包之间不能相互引用资源
-
分包可以引用主包内的公共资源
独立分包
独立分包:本质上也是分包,只不过它比较特殊,可以独立于主包和其他分包而单独运行。
独立分包和普通分包的区别
最主要的区别:是否依赖于主包才能运行
-
普通分包必须依赖于主包才能运行
-
独立分包可以在不下载主包的情况下,独立运行
一个小程序中可以有多个独立分包
独立分包配置方法
{
"pages": [ // 主包的所有页面
"pages/index",
"pages/logs"
],
"subpackages": [ // 通过 subpackages 节点,声明分包的结构
{
"root": "packageA", // 第一个分包的根目录
"pages": [ // 当前分包下,所有页面的相对存放路径
"pages/car",
"pages/dog"
]
},{
"root": "packageB", // 第二个分包的根目录
"name": "pack2", // 分包的别名
"pages": [ // 当前分包下,所有页面的相对存放路径
"pages/apple",
"pages/banana"
],
"independent": true // 独立分包
}
],
}
独立分包引用原则
-
主包无法引用独立分包内的私有资源
-
独立分包之间不能相互引用资源
-
独立分包和普通分包之间,不能相互应用私有资源
-
独立分包中不能引用主包内的公共资源
分包预下载
预下载分包的行为,会在进入指定的页面时触发。在 app.json 中,使用 preloadRule
节点定义分包的预下载规则。
{
"preloadRule": { // 分包预下载
"pages/contact/contact": { // 触发分包预下载的页面路径
// network 表示在指定的网络模式下进行预下载
// 可选值为: all(不限网络)和 wifi(仅 wifi 模式下进行预下载)
// 默认值为:wifi
"network": "all",
// packages 表示进入页面后,预下载哪些分包
// 可以通过 root 或 name 指定预下载哪些分包
"packages": ["pkgA"]
}
}
}
分包预下载的限制
同一个分包中的页面享有共同的预下载大小限额 2 M
标签:numA,数据共享,分包,主包,全局,pages,store,页面 From: https://www.cnblogs.com/c0lmd0wn/p/16974101.html