全局數據共享 Mobox

原生小程序開發中我們可以(yǐ)通過 mobx-miniprogram 配合 mobx-miniprogram-bindings 實現全局數據共享。二者爲(wéi / wèi)外部依賴，我們需要(yào / yāo)npm或yarn去安裝構建相關依賴，才能正常使用.

npm安裝及其注意事項

小程序對 npm 的(de)支持與限制

在(zài)小程序中已經支持使用 npm 安裝第三方包，從而(ér)來(lái)提高小程序的(de)開發效率。

• 但是(shì)小程序中使用npm 包有如下5個(gè)限制：
  1. 隻支持純 js 包，不(bù)支持自定義組件，不(bù)支持依賴于(yú) Node.js 内置庫的(de)包
  2. 必須有入口文件，即需要(yào / yāo)保證 package.json 中的(de) main 字段是(shì)指向一個(gè)正确的(de)入口，如果 package.json 中沒有 main 字段，則以(yǐ) npm 包根目錄下的(de) index.js 作爲(wéi / wèi)入口文件。
  3. 測試、構建相關的(de)依賴請放入 devDependencies 字段中避免被一起打包到(dào)小程序包中，這(zhè)一點和(hé / huò)小程序 npm 包的(de)要(yào / yāo)求相同。
  4. 不(bù)支持依賴 c++ 插件的(de)包
  5. 小程序環境比較特殊，一些全局變量（如 window 對象）和(hé / huò)構造器（如 Function 構造器）是(shì)無法使用的(de)。

npm 依賴包的(de)安裝與使用

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

   npm init -y

2. 安裝 npm 包

   在(zài)小程序 package.json 所在(zài)的(de)目錄中執行命令安裝 npm 包：

   npm install pageName

   此處要(yào / yāo)求參與構建 npm 的(de) package.json 需要(yào / yāo)在(zài) project.config.js 定義的(de) miniprogramRoot 之(zhī)内。

3. 構建 npm

   點擊開發者工具中的(de)菜單欄：工具 --> 構建 npm

   

4. 

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

   

6. 

7. 構建完成後即可使用 npm 包。

   js 中引入 npm 包：

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

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

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

Mobox

1. 全局數據共享

• 共享數據是(shì)指多個(gè)進程都可以(yǐ)訪問的(de)數據，而(ér)全局變量是(shì)一個(gè)進程内的(de)多個(gè)單元可共享的(de)數據。
• 解決組件之(zhī)間數據共享的(de)問題。
• 開發中常用的(de)全局數據共享方案有：Vuex、Redux、MobX、hooks等。

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

• mobx-miniprogram： 用來(lái)創建 Store 實例對象
• mobx-miniprogram-bindings： 用來(lái)把 Store 中的(de)共享數據或方法，綁定到(dào)組件或頁面中使用

3. 使用mobx

1. 安裝 MobX 相關的(de)包

   在(zài)項目中運行如下的(de)命令，安裝 MobX 相關的(de)包：

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

注意：MobX 相關的(de)包安裝完畢之(zhī)後，記得删除 miniprogram_npm 目錄後，重新構建 npm。

2. 創建 MobX 的(de) 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方法，用來(lái)修改store中的(de)數據 -->
        updateNum1:action(function(step){
            this.num1+=tep
        })
    })
```

3. 将 Store 中的(de)成員綁定到(dào)頁面中

   import { createStoreBindings } from 'mobx-miniprogram-bindings'
   import { store } from '../../store/store'
   
   Page({
   
       data: {
   
       },
       onLoad: function (options) {
           this.storeBindings = createStoreBindings(this, {
           store,
           fields: ['num1', 'num2', 'sum'],
           actions: ['updateNum1']
           })
       },
   
       btnHandler1(e) {
       
           this.updateNum1(e.target.dataset.step)
       },
   
       onUnload: function () {
           this.storeBindings.detroyStoreBindings()
       }
   })

4. 将 Store 中的(de)成員綁定到(dào)組件中

   • 通過storeBindingsBehavior實現自動綁定
   • store：指定要(yào / yāo)綁定的(de)store
   • fields：置頂綁定的(de)數據字段

     numA:()=>store.num1
     numA:(store)=>store.num1
     numA:'num1'
     

   • actions：指定要(yào / yāo)綁定的(de)方法

   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. 什麽是(shì) behaviors

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

2. behaviors 的(de)工作方式

每個(gè) behavior 可以(yǐ)包含一組屬性、數據、生命周期函數和(hé / huò)方法。組件引用它時(shí)，它的(de)屬性、數據和(hé / huò)方法會被

合并到(dào)組件中。

每個(gè)組件可以(yǐ)引用多個(gè) behavior，behavior 也(yě)可以(yǐ)引用其它 behavior。

3. 創建 behavior

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

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

4. 導入并使用 behavior

在(zài)組件中，使用 require() 方法導入需要(yào / yāo)的(de) behavior，挂載後即可訪問 behavior 中的(de)數據或方法，示例代碼

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

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

5. behavior 中所有可用的(de)節點

6. 同名字段的(de)覆蓋和(hé / huò)組合規則

組件和(hé / huò)它引用的(de) behavior 中可以(yǐ)包含同名的(de)字段，此時(shí)可以(yǐ)參考如下 3 種同名時(shí)的(de)處理規則：

① 同名的(de)數據字段 (data)

② 同名的(de)屬性 (properties) 或方法 (methods)

③ 同名的(de)生命周期函數

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

1. 若同名的(de)數據字段都是(shì)對象類型，會進行對象合并；
2. 其餘情況會進行數據覆蓋，覆蓋規則爲(wéi / wèi)：組件 > 父 behavior > 子(zǐ) behavior 、 靠後的(de) behavior > 靠前的(de) behavior。（優先級高的(de)覆蓋優先級低的(de)，最大(dà)的(de)爲(wéi / wèi)優先級最高）

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

1. 若組件本身有這(zhè)個(gè)屬性或方法，則組件的(de)屬性或方法會覆蓋 behavior 中的(de)同名屬性或方法；
2. 若組件本身無這(zhè)個(gè)屬性或方法，則在(zài)組件的(de) behaviors 字段中定義靠後的(de) behavior 的(de)屬性或方法會覆蓋靠前的(de)同名屬性或方法；
3. 在(zài) 2 的(de)基礎上(shàng)，若存在(zài)嵌套引用 behavior 的(de)情況，則規則爲(wéi / wèi)：父 behavior 覆蓋 子(zǐ) behavior 中的(de)同名屬性或方法。

生命周期函數不(bù)會相互覆蓋，而(ér)是(shì)在(zài)對應觸發時(shí)機被逐個(gè)調用：

1. 對于(yú)不(bù)同的(de)生命周期函數之(zhī)間，遵循組件生命周期函數的(de)執行順序；
2. 對于(yú)同種生命周期函數，遵循如下規則：
   • behavior 優先于(yú)組件執行；
   • 子(zǐ) behavior 優先于(yú) 父 behavior 執行；
   • 靠前的(de) behavior 優先于(yú) 靠後的(de) behavior 執行；
3. 如果同一個(gè) behavior 被一個(gè)組件多次引用，它定義的(de)生命周期函數隻會被執行一次。