微信小程序--數據共享與方法共享 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

微信小程序--數據共享與方法共享

發表時間:2022-7-26

發布人:葵宇科技

浏覽次數:42

目錄

      • 小程序對 npm 的支持與限制
      • npm 依賴包的安裝與使用
  • 組件方法共享 behaviors
    • 2. behaviors 的工作方式
    • 4. 導入并使用 behavior
    • 5. behavior 中(zhōng)所有可(kě)用的節點
    • 6. 同名字段的覆蓋和(hé)組合規則

全局數據共享 Mobox

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

npm安裝及其注意事項

小程序對 npm 的支持與限制

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

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

npm 依賴包的安裝與使用

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

    npm init -y
  2. 安裝 npm 包

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

    npm install pageName

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

  3. 構建 npm

    點擊開發者工具中(zhōng)的菜單欄:工具 --> 構建 npm

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

  5. 構建完成後即可(kě)使用 npm 包。

    js 中(zhōng)引入 npm 包:

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

    使用 npm 包中(zhōng)的自定義組件:

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

Mobox

1. 全局數據共享

  • 共享數據是指多個(gè)進程都可(kě)以訪問(wèn)的數據,而全局變量是一個(gè)進程内的多個(gè)單元可(kě)共享的數據。
  • 解決組件之間數據共享的問(wèn)題。
  • 開發中(zhōng)常用的全局數據共享方案有:Vuex、Redux、MobX、hooks等。

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

  • mobx-miniprogram: 用來創建 Store 實例對象
  • mobx-miniprogram-bindings: 用來把 Store 中(zhōng)的共享數據或方法,綁定到組件或頁面中(zhōng)使用

3. 使用mobx

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

    在項目中(zhōng)運行如(rú)下(xià)的命令,安裝 MobX 相關(guān)的包:

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

注意:MobX 相關(guān)的包安裝完畢之後,記得删除 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中(zhōng)的數據 -->
        updateNum1:action(function(step){
            this.num1+=tep
        })
    })
```
  1. 将 Store 中(zhōng)的成員綁定到頁面中(zhōng)

    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 中(zhōng)的成員綁定到組件中(zhōng)

    • 通(tōng)過storeBindingsBehavior實現自動(dòng)綁定
    • 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 是小程序中(zhōng),用于實現組件間代碼共享的特性,類似于 Vue.js 中(zhōng)的 “mixins”。

2. behaviors 的工作方式

每個(gè) behavior 可(kě)以包含一組屬性、數據、生命周期函數和(hé)方法。組件引用它時,它的屬性、數據和(hé)方法會被

合并到組件中(zhōng)。

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

3. 創建 behavior

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

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

4. 導入并使用 behavior

在組件中(zhōng),使用 require() 方法導入需要的 behavior,挂載後即可(kě)訪問(wèn) behavior 中(zhōng)的數據或方法,示例代碼

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

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

5. behavior 中(zhōng)所有可(kě)用的節點

可(kě)用的節點類型是否必填描述
propertiesObject Map同組件的屬性
dataObject同組件的數據
methodsObject同自定義組件的方法
behaviorsString Array引入其它的 behavior
createdFunction生命周期函數
attachedFunction生命周期函數
readyFunction生命周期函數
movedFunction生命周期函數
detachedFunction生命周期函數

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

組件和(hé)它引用的 behavior 中(zhōng)可(kě)以包含同名的字段,此時可(kě)以參考如(rú)下(xià) 3 種同名時的處理規則:

① 同名的數據字段 (data)

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

③ 同名的生命周期函數

如(rú)果有同名的數據字段 (data):

  1. 若同名的數據字段都是對象類型,會進行對象合并;
  2. 其餘情況會進行數據覆蓋,覆蓋規則為:組件 > 父 behavior > 子(zǐ) behavior 、 靠後的 behavior > 靠前的 behavior。(優先級高的覆蓋優先級低的,最大的為優先級最高)

如(rú)果有同名的屬性 (properties) 或方法 (methods):

  1. 若組件本身有這個(gè)屬性或方法,則組件的屬性或方法會覆蓋 behavior 中(zhōng)的同名屬性或方法;
  2. 若組件本身無這個(gè)屬性或方法,則在組件的 behaviors 字段中(zhōng)定義靠後的 behavior 的屬性或方法會覆蓋靠前的同名屬性或方法;
  3. 在 2 的基礎上,若存在嵌套引用 behavior 的情況,則規則為:父 behavior 覆蓋 子(zǐ) behavior 中(zhōng)的同名屬性或方法。

生命周期函數不會相互覆蓋,而是在對應觸發時機被逐個(gè)調用:

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

相關(guān)案例查看更多