全局数据共享

全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。而我们微信小程序常用的全局共享方案是：MobX

使用

在小程序中，可使用 mobx-miniprogram（迷你普肉给门） 配合 mobx-miniprogram-bindings（迷你普肉给门） 实现全局数据共享。其中：

mobx-miniprogram 用来 创建 Store 实例对象mobx-miniprogram-bindings 用来 把 Store中的共享数据或方法 ，绑定到组件或页面中使用

安装Mobx相关的包

npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

mobx相关的包安装完后，删除mini-program-npm ,重新构建npm（工具---构建npm）

创建store实例

根目录下新建store/index.js

import {observable,action} from 'mobx-miniprogram'

// 创建store实例
export const store = observable({
  // 定义共享数据  数据字段
  numA:1,
  numB:1,
  // 计算属性
  get sum(){
    return this.numA+this.numB
  },
  // actions 方法  用来修改state中的数据
  updateNuma:action(function(n){
    this.numA+=n
  }),
  updateNumb:action(function(n){
    this.numB+=n
  })
})

把store中的成员绑定到页面中

使用store的手工绑定方式 应用于页面或者组件， 使用createStoreBindings 创建绑定，会返回一个清理函数的对象用于取消绑定

在页面的onUnload(组件detached) 调用清理函数，否则会导致内存泄露

页面的wxml

<view>
{{ numA}}+{{numB}}={{sum}}
</view>
<button data-n="{{4}}" bindtap="handClick">numA</button>

页面的js文件

import {createStoreBindings}  from 'mobx-miniprogram-bindings'
import {store}  from '../../store'
Page({
    handClick(e){
    this.updateNuma(e.target.dataset.n)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 返回一个清理函数的对象用于取消绑定
  this.storeBinds=createStoreBindings(this,{
      // 绑定store实例  指定要绑定的store
      store,
      // fields:['numA','numB','sum'],   //数组形式  把store中的数据拿来
      // fields:{                        //映射形式
      //    a:'numA',   //this.data.a=store.numA   
      //    b:'numB'    //this.data.b=store.numB
      // },
      // 函数形式
      fields:{
        numA:()=>store.numA,
        numB:()=>store.numB,
        sum:'sum'
      },
      actions:['updateNuma','updateNumb']
    })
  },
  
   onUnload() {
    // 调用清理函数  否则将造成内容泄露
    this.handClick.destroyStoreBindings()
  },
})

behavior

behavior绑定适用于Component构造器，使用storeBindingsBehavior和storeBindings定义数据段

语法

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
Component({
    behaviors:[storeBindingsBehavior],
    storeBindings:{
        //配置项
        store,
        fields:['numA','numB'],
        actions:{
           buttonTap:'updateNuma'
        }
    }
})

组件的wxml

<view>{{numA}}+{{numB}}={{sum}}</view>
<button data-n="{{5}}" bindtap="handClick">numA</button>

组件的js

// components/myNumber/myNumber.js

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store'
Component({
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    // 配置项
    store,
    fields:['numA','numB','sum'],
    actions:['updateNuma']
  },
  methods: {
    handClick(e){
      console.log(123)
      this.updateNuma(e.target.dataset.n)
    }
  }
})

behaviors

behaviors 是用于组件间代码共享的特性

分包

把一个完整的小程序项目，按照需求划分为不同的子包，最终打包成不同的分包，用户在使用时按需进行加载

好处：

优化小程序首次启动的下载时间

分包后项目构成

分包后小程序由1个主包和多个分包组成

• 主包：一般只包含项目的启动页面或Tabbar页面

• 分包：只包含和当前分包有关的页面和资源

分包体积限制

• 整个小程序所有包大小不超过16M（主包+分包）

• 单个分包/主包大小不能超过2M

app.json中声明分包的结构

//声明分包的结构
"subPackages": [
    {
       "root":"packageA",   //第一个分包的根目录
       "pages": [   //分包下所有页面的存放路径
         "pages/detail/detail"
       ]
    },
    {
      "root":"packageB",
      "pages": [
        "pages/goods/goods"
      ]
   }
  ],

自定义tabBar

根目录下自定义组件新建custom-tab-bar/index

把点击的active定义为共享的数据

store.js

// 创建store实例  
export  const store = observable({
  // 定义共享数据  数据字段
  activeTabBarIndex:0,   //点击的下标

  updateActiveIndex:action(function(index){
    this.activeTabBarIndex = index
  })
})

wxml

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item  info="{{item.info?item.info:''}}" wx:for="{{list}}" wx:key="index">
  <image slot="icon" src="{{item.iconPath}}" style="width: 25px; height: 25px;"  mode="aspectFit"></image>
  <image slot="icon-active" src="{{item.selectedIconPath}}" style="width: 25px; height: 25px;"  mode="aspectFit"></image>
  {{item.text}}
  </van-tabbar-item>
</van-tabbar>

js

import {storeBindingsBehavior} from  "mobx-miniprogram-bindings"
import {store} from '../store'

Component({

  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store,
    fields:{
      sum:'sum',
      active:'activeTabBarIndex'
    },
    actions:{
      updateActive:"updateActiveIndex"
    }
  },
   
  observers:{
    'sum':function(val){
      this.setData({
        'list[1].info':val
      })
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
   
    "list": [
        {
          "pagePath": "/pages/home/home",
          "text": "首页",
          "iconPath": "/images/tabs/home.png",
          "selectedIconPath": "/images/tabs/home-active.png"
        },
        {
          "pagePath": "/pages/message/message",
          "text": "消息",
          "iconPath": "/images/tabs/message.png",
          "selectedIconPath": "/images/tabs/message-active.png",
          "info":1
        },
        {
          "pagePath": "/pages/contact/contact",
          "text": "联系我们",
          "iconPath": "/images/tabs/contact.png",
          "selectedIconPath": "/images/tabs/contact-active.png"
        },
        {
          "pagePath": "/pages/contact/contact",
          "text": "联系我们",
          "iconPath": "/images/tabs/contact.png",
          "selectedIconPath": "/images/tabs/contact-active.png"
        }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      // this.setData({ active: event.detail });
      this.updateActive(event.detail)
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
      
    },
  }
})

配置信息

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

• 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启

"tabBar":{
    "custom":true,
    "list":[]
}