全局數據共享 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 被一個組件多次引用,它定義的生命周期函數只會被執行一次。

微信小程序--數據共享與方法共享的更多相關文章

  1. 微信小程序數據請求方法wx.request小測試

    微信小程序數據請求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...

  2. 微信小程序開發系列教程三:微信小程序的調試方法

    微信小程序開發系列教程 微信小程序開發系列一:微信小程序的申請和開發環境的搭建 微信小程序開發系列二:微信小程序的視圖設計 這個教程的前兩篇文章,介紹了如何用下圖所示的微信開發者工具自動生成一個Hel ...

  3. 微信小程序最新授權方法,getUserInfo

    20180511微信小程序正式關閉原先getUserInfo的邏輯 不再允許自動彈出授權框. 方法一: index.wxml(准備一個用於給用戶授權的頁面,我這裏直接用了一個全屏按鈕) <vie ...

  4. 微信小程序——wxParse使用方法

    wxParse是一個微信小程序富文本解析組件.現在小程序裏面自帶了一個<rich-text>組件也能解析富文本,但是錶現不盡人意.所以我還是采用的wxParse來解析富文本的. wxPar ...

  5. 微信小程序節點查詢方法:wx.createSelectorQuery()的使用場景與注意事項

    小程序由於內置於微信,這使得它有了得天獨厚的宣傳和使用優勢,本著學習的心態,我在官網上看了一遍開發文檔,大致得出小程序框架的設計模式與使用注意事項(重點來了,其實開發文檔某些方面敘述的並不仔細,甚至存 ...

  6. 微信小程序特殊字符轉義方法——&amp;轉義&amp;amp;等等

    在我編寫公司小程序的過程中,有一次在網頁端添加了一張圖片,結果在小程序端訪問失敗了,究其原因,竟然是因為該圖片名稱中有一個“&”符號,網頁端添加後,自動轉義成了“&”存儲到了數據庫.當 ...

  7. 微信小程序~生命周期方法詳解

    生命周期是指一個小程序從創建到銷毀的一系列過程 在小程序中 ,通過App()來注册一個小程序 ,通過Page()來注册一個頁面 先來看一張小程序項目結構 從上圖可以看出,根目錄下面有包含了app.js ...

  8. 微信小程序 weui 使用方法

      https://github.com/Tencent/weui-wxss/ 下載地址用於小程序的https://github.com/Tencent/weui   下載地址用於H5    運用示例 ...

  9. 微信小程序,全局變量方法的使用

    方法一:app.js 內設置全局變量(如屏寬,屏高的設置) 1.app.js文件,定義全局變量 /定義全局變量 globalData:{ userInfo:null, sysInfo:null, wi ...

  10. 模擬微信小程序頁面Page方法

    1.依賴 a.jQuery b.angularjs 2.page.js文件 1 var Page = function (options) { 2 var myApp = angular.module ...

隨機推薦

  1. 安裝.NET Framework進度條卡住不動的解决方案

    VS在安裝之前需要安裝.NET Framework,我安裝的是4.0版本.但是安裝進度條到一半左右時就卡住不動了.前前後後重試多次,還有幾次重新開機,但都沒用. 開始還以為是安裝的系統有問題.後來在網 ...

  2. 迅雷9、迅雷極速版之迅雷P2P加速:流量吸血鬼?為什麼你裝了迅雷之後電腦會感覺很卡很卡?

    原文地址:http://www.whosmall.com/post/90 關閉極速版迅雷ThunderPlatform.exe進程 ThunderPlatform.exe目的:利用P2P技術進行用戶間 ...

  3. OC-block

    #import <Foundation/Foundation.h> /* block要掌握的東西 1> 如何定義block變量 int (^sumBlock)(int, int); ...

  4. iOS - OC NSCache 緩存

    前言 NSCache 是蘋果提供的一個專門用來做緩存的類,當內存 "不足" 或超過限制的時候,會自動清理緩存,使用時可以指定緩存的數量和成本.用法與 NSMutableDictio ...

  5. ASP.NET反射

    (轉載至博客園 dodo-yufan) 兩個現實中的例子:1.B超:大家體檢的時候大概都做過B超吧,B超可以透過肚皮探測到你內髒的生理情况.這是如何做到的呢?B超是B型超聲波,它可以透過肚皮通過向你體 ...

  6. PHP ckeditor富文本編輯器 結合ckfinder實現圖片上傳功能

    一:前端頁面代碼 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id ...

  7. Java提高篇(二):IO字節流、字符流和處理流

    在我們的Java語言當中,通常會有對文件進行讀寫,因此我們引入java的IO類來進行文件的讀寫. 一.字節流 下面是一個字節流的實例: import java.io.*; public class I ...

  8. 跟我學SharePoint2013視頻培訓課程——設置列錶名稱、描述、導航等基本信息(12)

    課程簡介 第12天,怎樣在SharePoint 2013設置列錶名稱.描述.導航等基本信息. 視頻 SharePoint 2013 交流群 41032413

  9. python遞歸評論tree形圖代碼

    首先我有必要記錄下來這段代碼,因為我遇到了這個問題, 然後沒有解决 後來, 前段說我找到一段代碼給我看看, 我並沒有在意, 然後她實現了, 她實現了,她真的實現了, 我... 為了感謝她,我陪她玩了一 ...

  10. Spring Boot 熱部署的實現 - 原創

    實現方式有兩大種(其中包含3種): 一.基於springloaded 1.1)Maven啟動方式 第一步:在pom.xml中的“plugin節點”裏面添加如下依賴: <dependencies& ...