/wechat-weapp-mobx

微信小程序(wechat weapp) mobx 绑定, 跨页面通信的利器, 现已发布npm包

微信小程序 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.jsdist/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 作为数据驱动层后, 数据状态同步的问题轻松化解. 最终项目成功上线.

ballu

开发( 发布 npm 版本 )

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

协议( LICENSE )

MIT