微信小程序怎么實(shí)現(xiàn)數(shù)據(jù)共享與方法共享

微信小程序怎么實(shí)現(xiàn)數(shù)據(jù)共享與方法共享，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

全局?jǐn)?shù)據(jù)共享 Mobox

原生小程序開(kāi)發(fā)中我們可以通過(guò) mobx-miniprogram 配合 mobx-miniprogram-bindings 實(shí)現(xiàn)全局?jǐn)?shù)據(jù)共享。二者為外部依賴(lài)，我們需要npm或yarn去安裝構(gòu)建相關(guān)依賴(lài)，才能正常使用.

npm安裝及其注意事項(xiàng)

小程序?qū)?npm 的支持與限制

在小程序中已經(jīng)支持使用 npm 安裝第三方包，從而來(lái)提高小程序的開(kāi)發(fā)效率。

• 但是小程序中使用npm 包有如下5個(gè)限制：

• 只支持純 js 包，不支持自定義組件，不支持依賴(lài)于 Node.js 內(nèi)置庫(kù)的包

• 必須有入口文件，即需要保證 package.json 中的 main 字段是指向一個(gè)正確的入口，如果 package.json 中沒(méi)有 main 字段，則以 npm 包根目錄下的 index.js 作為入口文件。

• 測(cè)試、構(gòu)建相關(guān)的依賴(lài)請(qǐng)放入 devDependencies 字段中避免被一起打包到小程序包中，這一點(diǎn)和小程序 npm 包的要求相同。

• 不支持依賴(lài) c++ 插件的包

• 小程序環(huán)境比較特殊，一些全局變量（如 window 對(duì)象）和構(gòu)造器（如 Function 構(gòu)造器）是無(wú)法使用的。

npm 依賴(lài)包的安裝與使用

初始化小程序生成package.json

npm init -y

安裝 npm 包

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

npm install pageName

此處要求參與構(gòu)建 npm 的 package.json 需要在 project.config.js 定義的 miniprogramRoot 之內(nèi)。

構(gòu)建 npm

點(diǎn)擊開(kāi)發(fā)者工具中的菜單欄：工具 --> 構(gòu)建 npm

勾選“使用 npm 模塊”選項(xiàng)：

構(gòu)建完成后即可使用 npm 包。

js 中引入 npm 包：

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

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

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

Mobox

1. 全局?jǐn)?shù)據(jù)共享

• 共享數(shù)據(jù)是指多個(gè)進(jìn)程都可以訪(fǎng)問(wèn)的數(shù)據(jù)，而全局變量是一個(gè)進(jìn)程內(nèi)的多個(gè)單元可共享的數(shù)據(jù)。

• 解決組件之間數(shù)據(jù)共享的問(wèn)題。

• 開(kāi)發(fā)中常用的全局?jǐn)?shù)據(jù)共享方案有：Vuex、Redux、MobX、hooks等。

2. 小程序中的全局?jǐn)?shù)據(jù)共享方案

• mobx-miniprogram： 用來(lái)創(chuàng)建 Store 實(shí)例對(duì)象

• mobx-miniprogram-bindings： 用來(lái)把 Store 中的共享數(shù)據(jù)或方法，綁定到組件或頁(yè)面中使用

3. 使用mobx

安裝 MobX 相關(guān)的包

在項(xiàng)目中運(yùn)行如下的命令，安裝 MobX 相關(guān)的包：

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

注意：MobX 相關(guān)的包安裝完畢之后，記得刪除 miniprogram_npm 目錄后，重新構(gòu)建 npm。

2. 創(chuàng)建 MobX 的 Store 實(shí)例

```
import {observable ,action} from 'mobx-miniprogram'
export const store=observable({

        <!-- 1、數(shù)據(jù)部分 -->
        num1:1,
        num2:2,

        <!-- 2、計(jì)算屬性 -->
        get sum(){
            return this.num1+this.num2
        },

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

將 Store 中的成員綁定到頁(yè)面中

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

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

• 通過(guò)storeBindingsBehavior實(shí)現(xiàn)自動(dòng)綁定

• store：指定要綁定的store

• fields：置頂綁定的數(shù)據(jù)字段

• 綁定字段方式一：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: {
        // 數(shù)據(jù)源
        store,
        fields: {
            numA: 'num1',
            numB: 'num2',
            sum: 'sum'
        },
        actions: {
        updateNum2: 'updateNum2'
        }
    },
})

組件方法共享 behaviors

1. 什么是 behaviors

behaviors 是小程序中，用于實(shí)現(xiàn)組件間代碼共享的特性，類(lèi)似于 Vue.js 中的 “mixins”。

2. behaviors 的工作方式

每個(gè) behavior 可以包含一組屬性、數(shù)據(jù)、生命周期函數(shù)和方法。組件引用它時(shí)，它的屬性、數(shù)據(jù)和方法會(huì)被

合并到組件中。

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

3. 創(chuàng)建 behavior

調(diào)用 Behavior(Object object) 方法即可創(chuàng)建一個(gè)共享的 behavior 實(shí)例對(duì)象，供所有的組件使用：

/* 
    調(diào)用Behavior()方法，創(chuàng)建對(duì)象實(shí)例
    使用module.exports講behevior 實(shí)例對(duì)象共享出去
*/
module.exports = Behavior({
    // 屬性節(jié)點(diǎn)
    properties: {},
    // 私有數(shù)據(jù)節(jié)點(diǎn)
    data: {},
    // 事件處理函數(shù)和自定義方法節(jié)點(diǎn)
    methods: {}
})

4. 導(dǎo)入并使用 behavior

在組件中，使用 require() 方法導(dǎo)入需要的 behavior，掛載后即可訪(fǎng)問(wèn) behavior 中的數(shù)據(jù)或方法，示例代碼

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

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

5. behavior 中所有可用的節(jié)點(diǎn)

6. 同名字段的覆蓋和組合規(guī)則

組件和它引用的 behavior 中可以包含同名的字段，此時(shí)可以參考如下 3 種同名時(shí)的處理規(guī)則：

① 同名的數(shù)據(jù)字段 (data)

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

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

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

1. 若同名的數(shù)據(jù)字段都是對(duì)象類(lèi)型，會(huì)進(jìn)行對(duì)象合并；

2. 其余情況會(huì)進(jìn)行數(shù)據(jù)覆蓋，覆蓋規(guī)則為：組件 > 父 behavior > 子 behavior 、 靠后的 behavior > 靠前的 behavior。（優(yōu)先級(jí)高的覆蓋優(yōu)先級(jí)低的，最大的為優(yōu)先級(jí)最高）

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

1. 若組件本身有這個(gè)屬性或方法，則組件的屬性或方法會(huì)覆蓋 behavior 中的同名屬性或方法；

2. 若組件本身無(wú)這個(gè)屬性或方法，則在組件的 behaviors 字段中定義靠后的 behavior 的屬性或方法會(huì)覆蓋靠前的同名屬性或方法；

3. 在 2 的基礎(chǔ)上，若存在嵌套引用 behavior 的情況，則規(guī)則為：父 behavior 覆蓋 子 behavior 中的同名屬性或方法。

生命周期函數(shù)不會(huì)相互覆蓋，而是在對(duì)應(yīng)觸發(fā)時(shí)機(jī)被逐個(gè)調(diào)用：

• 對(duì)于不同的生命周期函數(shù)之間，遵循組件生命周期函數(shù)的執(zhí)行順序；

• 對(duì)于同種生命周期函數(shù)，遵循如下規(guī)則：

• behavior 優(yōu)先于組件執(zhí)行；

• 子 behavior 優(yōu)先于 父 behavior 執(zhí)行；

• 靠前的 behavior 優(yōu)先于 靠后的 behavior 執(zhí)行；

• 如果同一個(gè) behavior 被一個(gè)組件多次引用，它定義的生命周期函數(shù)只會(huì)被執(zhí)行一次。

關(guān)于微信小程序怎么實(shí)現(xiàn)數(shù)據(jù)共享與方法共享問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。