全局數據共享 Mobox

原生小程序開發中我們可以通過 mobx-miniprogram 配合 mobx-miniprogram-bindings 實現全局數據共享。二者為外部依賴，我們需要npm或yarn去安裝構建相關依賴，才能正常使用.

npm安裝及其注意事項

小程序對 npm 的支持與限制

在小程序中已經支持使用 npm 安裝第三方包，從而來提高小程序的開發效率。

• 但是小程序中使用npm 包有如下5個限制：
  1. 只支持純 js 包，不支持自定義組件，不支持依賴于 Node.js 內置庫的包
  2. 必須有入口文件，即需要保證 package.json 中的 main 字段是指向一個正確的入口，如果 package.json 中沒有 main 字段，則以 npm 包根目錄下的 index.js 作為入口文件。
  3. 測試、構建相關的依賴請放入 devDependencies 字段中避免被一起打包到小程序包中，這一點和小程序 npm 包的要求相同。
  4. 不支持依賴 c++ 插件的包
  5. 小程序環境比較特殊，一些全局變量（如 window 對象）和構造器（如 Function 構造器）是無法使用的。

npm 依賴包的安裝與使用

1. 初始化小程序生成package.json

   npm init -y
   

2. 安裝 npm 包
   在小程序 package.json 所在的目錄中執行命令安裝 npm 包：

   npm install pageName
   

   此處要求參與構建 npm 的 package.json 需要在 project.config.js 定義的 miniprogramRoot 之內。

3. 構建 npm
   點擊開發者工具中的菜單欄：工具 --> 構建 npm
   

4. 勾選“使用 npm 模塊”選項：
   

5. 構建完成后即可使用 npm 包。
   js 中引入 npm 包：

   const myPackage = require('packageName')
   const packageOther = require('packageName/other')
   

   使用 npm 包中的自定義組件：

   
   {
   "usingComponents": {
       "myPackage": "packageName",
       "package-other": "packageName/other"
   }
   }
   

Mobox

1. 全局數據共享

• 共享數據是指多個進程都可以訪問的數據，而全局變量是一個進程內的多個單元可共享的數據。
• 解決組件之間數據共享的問題。
• 開發中常用的全局數據共享方案有：Vuex、Redux、MobX、hooks等。

2. 小程序中的全局數據共享方案

• mobx-miniprogram： 用來創建 Store 實例對象
• mobx-miniprogram-bindings： 用來把 Store 中的共享數據或方法，綁定到組件或頁面中使用

3. 使用mobx

1. 安裝 MobX 相關的包
   在項目中運行如下的命令，安裝 MobX 相關的包：

   npm i -S mobx-miniprogram mobx-miniprogram-bindings
   

注意：MobX 相關的包安裝完畢之后，記得刪除 miniprogram_npm 目錄后，重新構建 npm。
2. 創建 MobX 的 Store 實例

3. 將 Store 中的成員綁定到頁面中

import {observable ,action} from 'mobx-miniprogram'
export const store=observable({
        <!-- 1、數據部分 -->
        num1:1,
        num2:2,
        <!-- 2、計算屬性 -->
        get sum(){
            return this.num1+this.num2
        },

        <!-- 3、actions方法，用來修改store中的數據 -->
        updateNum1:action(function(step){
            this.num1+=tep
        })
    })

4. 將 Store 中的成員綁定到組件中

   • 通過storeBindingsBehavior實現自動綁定
   • store：指定要綁定的store
   • fields：置頂綁定的數據字段
     • 綁定字段方式一：numA:()=>store.num1
     • 綁定字段方式二：numA:(store)=>store.num1
     • 綁定字段方式三：numA:'num1'
   • actions：指定要綁定的方法

   import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
   import { store } from '../../store/store'
   Component({
       behaviors: [storeBindingsBehavior],
       storeBindings: {
           // 數據源
           store,
           fields: {
               numA: 'num1',
               numB: 'num2',
               sum: 'sum'
           },
           actions: {
           updateNum2: 'updateNum2'
           }
       },
   })
   

組件方法共享 behaviors

1. 什么是 behaviors

behaviors 是小程序中，用于實現組件間代碼共享的特性，類似于 Vue.js 中的 “mixins”。

2. behaviors 的工作方式

每個 behavior 可以包含一組屬性、數據、生命周期函數和方法。組件引用它時，它的屬性、數據和方法會被
合并到組件中。
每個組件可以引用多個 behavior，behavior 也可以引用其它 behavior。

3. 創建 behavior

調用 Behavior(Object object) 方法即可創建一個共享的 behavior 實例對象，供所有的組件使用：

/* 
    調用Behavior()方法，創建對象實例
    使用module.exports講behevior 實例對象共享出去
*/
module.exports = Behavior({
    // 屬性節點
    properties: {},
    // 私有數據節點
    data: {},
    // 事件處理函數和自定義方法節點
    methods: {}
})

4. 導入并使用 behavior

在組件中，使用 require() 方法導入需要的 behavior，掛載后即可訪問 behavior 中的數據或方法，示例代碼

// components/test5/test5.js
const myBehavior = require('../../behaviors/my-behavior')

Component({
  behaviors: [myBehavior],
  /**
   * 組件的屬性列表
   */
  properties: {
    count: Number
  },
})

5. behavior 中所有可用的節點

6. 同名字段的覆蓋和組合規則

組件和它引用的 behavior 中可以包含同名的字段，此時可以參考如下 3 種同名時的處理規則：
① 同名的數據字段 (data)
② 同名的屬性 (properties) 或方法 (methods)
③ 同名的生命周期函數

如果有同名的數據字段 (data)：

1. 若同名的數據字段都是對象類型，會進行對象合并；
2. 其余情況會進行數據覆蓋，覆蓋規則為：組件 > 父 behavior > 子 behavior 、 靠后的 behavior > 靠前的 behavior。（優先級高的覆蓋優先級低的，最大的為優先級最高）

如果有同名的屬性 (properties) 或方法 (methods)：

1. 若組件本身有這個屬性或方法，則組件的屬性或方法會覆蓋 behavior 中的同名屬性或方法；
2. 若組件本身無這個屬性或方法，則在組件的 behaviors 字段中定義靠后的 behavior 的屬性或方法會覆蓋靠前的同名屬性或方法；
3. 在 2 的基礎上，若存在嵌套引用 behavior 的情況，則規則為：父 behavior 覆蓋 子 behavior 中的同名屬性或方法。

生命周期函數不會相互覆蓋，而是在對應觸發時機被逐個調用：

1. 對于不同的生命周期函數之間，遵循組件生命周期函數的執行順序；
2. 對于同種生命周期函數，遵循如下規則：
   • behavior 優先于組件執行；
   • 子 behavior 優先于 父 behavior 執行；
   • 靠前的 behavior 優先于 靠后的 behavior 執行；
3. 如果同一個 behavior 被一個組件多次引用，它定義的生命周期函數只會被執行一次。