微信小程式--資料共享與方法共享

久宇詩發表於2022-01-07
微信小程式

目錄

全域性資料共享 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 例項
```
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
        })
    })
```

  1. 將 Store 中的成員繫結到頁面中

    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()
    }
})

  2. 將 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 中所有可用的節點

可用的節點 型別 是否必填 描述
properties Object Map 否 同元件的屬性
data Object 否 同元件的資料
methods Object 否 同自定義元件的方法
behaviors String Array 否 引入其它的 behavior
created Function 否 生命週期函式
attached Function 否 生命週期函式
ready Function 否 生命週期函式
moved Function 否 生命週期函式
detached Function 否 生命週期函式

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 被一個元件多次引用，它定義的生命週期函式只會被執行一次。

相關文章