wechat weapp mobx

Wechat mini program mobx binding (wechat weapp mobx)

A powerful tool for communication between pages

Add mobx data layer driver to your applet

Current version: 0.2.0

Depends on mobx version: 4.9.2

Install

Method 1: npm package (recommended)

The mini program already supports using npm to install third-party packages. For details, see npm support.

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

Method 2: Manual installation

1. Clone or download the code library locally:

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

2. Copy the dist/mobx.js , dist/diff.js and dist/observer.js files directly to the mini program project, for example (suppose below that we install all third-party packages in the libs directory):

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

   The above command copies the package to the mini program's <小程序根目录>/libs directory.

3. Create a <小程序根目录>/stores directory to store the data layer.

Use (using ES5 syntax)

1. Create 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. Bind page linkage events

    // <小程序根目录>/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. illustrate

   After completing the above two steps, you can access it using props.todoStore in wxml, and the data linkage will work automatically.

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

4. Automatic data linkage

Data in stores can be accessed simultaneously across pages, and when the data is updated, the page will be automatically updated. This saves a lot of logic code.

used in components

• Bind component linkage events

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

ES6 syntax example

Please check the example directly: wechat-weapp-mobx-todos-npm

Version update record

0.2.1

• Supports the use of observerComponment syntax in components

0.2.0

• Optimization: Inject props into page.data in advance to avoid page rendering being too slow.

0.1.9

• (Stability) After verification for a period of time, the project stably supports mobx version 4.9.2.
• Optimization: Fix an observer problem that may cause linkage problems.
• Optimization: Adjust the execution order of Unload callback.
• Users of 0.1.8 are recommended to upgrade to 0.1.9.

0.1.8

• (Major) Officially upgrade mobx to version 4.9.2, supporting the latest mobx decorator syntax.
• Trial support for ES6 syntax. If there are bugs, please report them in time.

Thanks to Danney for his contribution.

0.1.7 (Do not use)

• Tried to upgrade mobx to version 4.9.2, adding new decorator syntax.
• However, it was found that under mobx version 4.9.2, the props data object would be cleared by the mini program framework by mistake.

0.1.6

• Synchronously update npm package to 0.1.6

0.1.5

• Optimize the toJSWithGetter interface and improve the performance by 2 times again.
• Adjust the directory and publish the npm package.

0.1.4

• Add diff process to greatly improve triggering performance

0.1.3

• Reconstruct the autorun mechanism to improve triggering performance.

0.1.2

• Refactor toJS logic to support nested computed value display.
• Supports observation of existing property values ​​of props, and modifications can trigger view updates.

0.1.1

• Optimize performance and avoid duplicate mobx toJS objects.
• Add version number support.

0.1.0

• Implement mobx core support.

Examples (npm integration, ES6 syntax demonstration)

For detailed usage examples, please refer to: wechat-weapp-mobx-todos-npm

For the actual test version, please clone the following repo and use the mini program development tool to enable preview:

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

Example (manual installation)

For detailed usage examples, please refer to: wechat-weapp-mobx-todos

For the actual test version, please clone the following repo and use the mini program development tool to enable the preview:

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

Actual cases

Ballu - a real-time basketball scoring tool

Comment: This project is a very "complex" small program. Many pages of the project need to use websocket to synchronize data updates with the server. After using wechat-weapp-mobx as the data driver layer in depth, the problem of data status synchronization can be easily resolved. . The final project was successfully launched.

Development (publish npm version)

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

LICENSE

MIT