wechat weapp mobx

微信小程式mobx 綁定( wechat weapp mobx )

頁間通訊的利器

為你的小程式加入mobx資料層驅動

目前版本: 0.2.0

依賴mobx 版本: 4.9.2

安裝

方式一: npm 包( 推薦)

小程式已經支援使用npm 安裝第三方包，詳見npm 支持

npm install wechat-weapp-mobx -S --production

方式二: 手動安裝

1. clone或下載程式碼庫到本機:

    git clone https://github.com/dao42/wechat-weapp-mbox

2. 將dist/mobx.js , dist/diff.js和dist/observer.js檔案直接拷貝到小程式的工程中,例如(下面假設我們把第三方套件都安裝在libs目錄下):

    cd wechat-weapp-mobx
    cp mobx.js <小程序根目录> /libs
    cp diff.js <小程序根目录> /libs
    cp observer.js <小程序根目录> /libs

   上面的指令將包拷貝到小程式的<小程序根目录>/libs目錄下

3. 建立一個<小程序根目录>/stores目錄, 存放資料層.

使用( 使用ES5 語法)

1. 建立mobx 的stores

    // <小程序根目录>/stores/todoStore.js
   // 手动安装时引入的路径
   // var extendObservable = require('../../libs/mobx').extendObservable;
   // npm 包安装引入的路径
   var extendObservable = require ( 'wechat-weapp-mobx/mobx' ) . extendObservable ;
   var TodoStore = function ( ) {
     extendObservable ( this , {
       // observable data
       todos : [ ] ,
       todoText : 'aaa' ,
       // computed data
       get count ( ) {
         return this . todos . length ;
       }
     } ) ;
   
     // action
     this . addTodo = function ( title ) {
       this . todos . push ( { title : title } ) ;
     }
   
     this . removeTodo = function ( ) {
       this . todos . pop ( ) ;
     }
   }
   
   module . exports = {
     default : new TodoStore ,
   }

2. 綁定頁面聯動事件

    // <小程序根目录>/pages/index/index.js
   // 手动安装时引入的路径
   // var observer = require('../libs/observer').observer;
   // npm 包安装引入的路径
   var observer = require ( 'wechat-weapp-mobx/observer' ) . observer ;
   // 关键, 监控页面事件, 让 mobx 有机会更新页面数据
   Page ( observer ( {
     props : {
       todoStore : require ( '../stores/todoStore' ) . default ,
     } ,
     // your other code below
     onLoad : function ( ) {
     }
   } ) )

3. 說明

   完成上述兩步之後,你就可以在wxml 中用props.todoStore這種方式來訪問了, 並且數據聯動已經自動工作.

    // <小程序根目录>/pages/index/index.wxml
   < view > { { props . todoStore . todoText } } </ view >

4. 數據自動聯動

stores 中的資料可以跨頁面同時訪問，並且資料更新後，頁面也會自動更新。從而節省大量邏輯程式碼。

組件中使用

• 綁定元件聯動事件

 Component ( observerComponment ( {
  props : {
    todoStore : require ( '../stores/todoStore' ) . default
  }
} ) ) 

ES6 語法範例

請直接查看範例: wechat-weapp-mobx-todos-npm

版本更新記錄

0.2.1

• 支援元件中使用observerComponment語法

0.2.0

• 最佳化：提前將props 注入page.data ，避免頁面渲染過慢。

0.1.9

• （穩定性）經一段時間驗證，專案穩定支援mobx 4.9.2 版本。
• 最佳化：修正一個可能引發連動問題的observer 問題。
• 最佳化：調整Unload callback 執行順序。
• 建議0.1.8 的用戶升級至0.1.9。

0.1.8

• （重大）正式升級mobx 至4.9.2 版本，支援最新的mobx 裝飾器語法。
• 嘗試性支持ES6 語法，如有bug，請及時回饋。

感謝Danney 的貢獻。

0.1.7 (勿用)

• 嘗試性升級mobx 至4.9.2 版本，增加新的裝飾器語法。
• 但發現mobx 4.9.2 版本下，props 資料物件會被小程式框架錯誤清空。

0.1.6

• 同步更新npm 套件至0.1.6

0.1.5

• 優化toJSWithGetter 介面, 效能再提升2倍.
• 調整目錄, 發布npm 套件.

0.1.4

• 增加diff 流程, 大幅提高觸發效能

0.1.3

• 重構autorun 機制, 提高觸發性能.

0.1.2

• 重構toJS 邏輯, 支援嵌套的computed value 顯示.
• 支援props 已有的屬性值觀測, 修改可以觸發更新視圖.

0.1.1

• 最佳化效能, 避免重複的mobx toJS 物件.
• 新增版本號支援.

0.1.0

• 實作mobx 核心支援.

範例( npm 整合，ES6 語法示範)

詳細的使用例子可參考: wechat-weapp-mobx-todos-npm

真機實測版請clone下面這個repo，用小程式開發工具開啟預覽:

 git clone https://github.com/dao42/wechat-weapp-mobx-todos-npm.git

範例( 手動安裝)

詳細的使用例子可參考: wechat-weapp-mobx-todos

真機實測版請clone下面這個repo，用小程式開發工具開啟預覽:

 git clone https://github.com/dao42/wechat-weapp-mobx-todos.git

實際案例

Ballu -- 一個即時的籃球計分工具

點評: 此專案是一個非常"複雜" 的小程式, 專案多處頁面需要使用websocket 與服務端進行同步的資料更新, 深度使用wechat-weapp-mobx作為資料驅動層後, 資料狀態同步的問題輕鬆化解. 最終專案成功上線.

開發( 發布npm 版本)

$ npm login --registry https://registry.npmjs.org/
$ npm publish

協議( LICENSE )

MIT