小程序全局数据共享/分包

小程序全局数据共享

全局数据共享（状态管理）是为了解决组件之间数据共享的问题
开发中常用全局共享方案有：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