全局数据共享

全局数据共享（又叫做状态管理）是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案有：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

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