小程序全局数据共享
全局数据共享(状态管理)是为了解决组件之间数据共享的问题
开发中常用全局共享方案有:vuex、redux、mobx等
在小程序中,可以使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局共享:
mobx-miniprogram:创建Store实例对象
mobx-miniprogram-bindings:把Store中的共享数据或方法,绑定到组件或页面中使用
安装mobx相关包:
npm insatll --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
注意安装成功后,先删除,再重新构建npm
使用
1.新建store文件夹,在文件夹中新建store.js文件
//创建Store实例对象
import {observable} 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
}),
})
2.在页面中使用 .js(在onload生命周期进行绑定,在onUnload生命周期函数中清理)
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from 'store/store'
Page({
onLoad:function(){
this.storeBindings=createStoreBindings(this,{//this是页面实例,第二个参数page对象
store,
fields:['numA','numB','sum'],
actions:['updateNum1']
})
},
onUnload:function(){
this.storeBindings.destoryStoeBindings()
},
//事件方法
btn(e){
this.updateNum1(e.target.dataset.step)
}
})
在wxml页面用法
<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="default" bindtap="btn" data-step="{{1}}">默认按钮</van-button>
将Store中的成员绑定到组件中
新建Components文件夹,在里面建组件所需文件
import {StoreBindingsBehavios} from 'mobx-miniprogram-bindings'
import {store} from 'store/store'
Component({
behaviors:[StoreBindingsBehavios],//建一个behaviors数组
storeBindings:{ //建一个page对象,进行绑定
store,//数据源
fields:{
numA:()=>store.numA,
numB:()=>store.numB,
sum:'sum'
}
actions:{
updateNum1:'updateNum1'
}
},
methods:{
btn2(e){
this.updateNum1(e.target.dataset.step)
}
}
})
在wxml页面用法
<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="default" bindtap="btn2" data-step="{{1}}">默认按钮</van-button>
分包
指把一个完整的小程序项目,按照需求划分成不同的子包,在构建时打包成不同的分包,用户在使用的时按需加载。
1.分包前,项目中所有的页面和资源都被打包到了一起,导致了项目体积过大,影响小程序的首次启动下载时间
2.分包后,包括一个主包+多个分包组成
主包:一般包含项目的启动页面或TabBar页面、以及所有分包都需要用到的一些公告资源
分包:只包含和当前分包有关的页面和私有资源
3.分包下载规则
启动时,默认会下载主包并启动主包包含的页面
tabbar页面放在主包中
当用户进入分包页面,客户端会把对应分包下载下来,下载完成后展示
非tabbar页面可以按照功能不同,划分不同的分包之后,按需加载
4.分包体积限制
整个小程序所有分包的大小不超过16M
单个分包/主包大小不超过2M
5.配置
5.打包
打包原则
小程序会按subpackages的配置进行打包,subpackages之外目录打包到主包
主包也有自己的pages
tabBar页面必须在主包内
分包之间不能相互嵌套
6.引用原则
独立分包
独立分包本质上也是分包,只不过比较特殊,可以独立于主包和其他分包而独立运行
独立分包和普通分包的区别:是否依赖于主包才能运行
1.应用场景
开发者可以按需,将一些具有一定独立性的页面配置到独立分包中,原因如下
当小程序从普通分包页面启动时,需要先下载主包;而独立分包不依赖于主包即可运行,很大程度上提高了分包页面的启动速度
一个小程序可以有多个独立分包
2.配置方法:通过加上”indepeendent“:true节点配置
3.引用原则
独立分包和普通分包以及主包之间,是相互隔绝的,也不能相互引用彼此的资源
注意:独立分包也不能引用主包内的公共资源
分包预下载
分包预下载:当小程序进入到某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面的启动速度
1.配置
分包预下载,会在进入指定的页面时触发。在app.json中,使用preloadRule节点定义分包的预下载规则
2,分包预下载限制
同一个分包中的页面享有共同的预下载大小限额2M
预下载分包的页面加起来不超过2M