dao42 / 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.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

wechat-weapp-mobx's Issues

set

store默认是全局的？

导出
module.exports = {
default: new orderStore
}
但是每次进入小程序页面的时候，这个store里面的属性都不是初始化的属性

ES6 示例说明

是否有考虑支持Component呢？

期望 Component 也能实现 observer 😄

如何在小程序组件中使用 Mobx

现在在页面上使用 可以进行全局的状态管理并且可以实时更新
但是现在需求是在页面上有一个自定义组件 player 这个组件如何使用全局数据进行更新
只能在页面上进行传递吗

<player player-info="{{props.player.info}}"></player>

能否直接在我的组件里面使用 望指教

props被注入到data上的时机太晚

现在props是在page.onLoad时第一次被注入到page.data中，在page实例化的过程中，data.props的值一开始是undefined，onLoad时才变成state中初始化的值
下面这个场景：
state = {
loading: true
}
在wxml中一个自定义组件绑定了props中的值：

进入页面拉取数据后把loading变为false
期望是：loading从true=>false，进入页面后componentA先不展示，loading变成false后展示，componentA只创建一次
实际结果是：loading从undefined=>true=>false，componentA先被创建然后被销毁，又创建

目前的解决办法：
修改了observer.js
在observer方法中，先给page.data上加上props

请教下：但发现 mobx 4.9.2 版本下，props 数据对象会被小程序框架错误清空。

我在用官方的 小程序的 MobX 绑定辅助库
也碰到了相同的问题

想请教下您是怎么处理（解决/规避）这个问题的

Improve setData performance

Recently, we found very large data or very deep data cause page._update update view slowly.

After some research, there is a way to improve it:

Use mobx.extras.deepEqual to reduce setData quantities.

see more: https://github.com/mobxjs/mobx/blob/master/src/utils/utils.ts#L158

mobxjs/mobx#951

ES5 示例说明

请问在小程序的JS文件里如何读取store的值？

请问在小程序的JS文件里如何读取store的值？

在wxml里可以正常读取，在JS中， 目前在store中定义的字符串变量是可以读出来的，但是对象就读取不出来，对象读取出来是一个$mobx对象

使用小程序自定义组件后，调用时找不到action

使用小程序自定义组件，在页面的json文件中添加
usingComponents
调用action会提示undefined in not a function
去掉该属性后一切正常

小程序开启增强编译后会有问题

如题
开启增强编译后
observable的属性的默认值无效，直接变为undefined或者null

observer的page如果没有props的话会报错

observer.js第86行，没有对mobx.observable传入参数进行校验，如果业务传入对page没有props对话会报错，目前处理都是使用这个的时候在外面做一层判断，其实这个判断可以加在observer.js文件里好点吧?
var _props = mobx.observable(page.props || {}) || {};

mobx的computed装饰的getter 和 一般getter 无法在wxml里使用

var _mergeGetterValue = function(res, object){
  Object.getOwnPropertyNames(object).forEach( function(propertyName){
    if(propertyName === "$mobx"){ return };
    var descriptor = Object.getOwnPropertyDescriptor(object, propertyName);
    if( descriptor && !descriptor.enumerable && !descriptor.writable ){
      res[propertyName] = toJS(object[propertyName]);
    }
  })
}

在class里声明的getter是不可遍历的。
虽然在observer.js里有检查不可遍历的属性， 但是在class里声明的getter拦截器是声明在prototype上的, 实例化后getter是在__proto__里的, Object.getOwnPropertyNames不会去获取__proto__的属性。

目前解决方法是把computed方法里的enumerable改为true，使其可遍历。

能解释下 这个方法干什么的吗？

function syncKeys(current, pre) { if (current === pre) return const rootCurrentType = type(current) const rootPreType = type(pre) if (rootCurrentType == OBJECTTYPE && rootPreType == OBJECTTYPE) { if(Object.keys(current).length >= Object.keys(pre).length){ for (let key in pre) { const currentValue = current[key] if (currentValue === undefined) { current[key] = null } else { syncKeys(currentValue, pre[key]) } } } } else if (rootCurrentType == ARRAYTYPE && rootPreType == ARRAYTYPE) { if (current.length >= pre.length) { pre.forEach((item, index) => { syncKeys(current[index], item) }) } } }

关于 store 状态存储的理解问题，请教一下~

你好，这几天有个疑问，像 mobx-react 实现全局状态是依靠 Provider 和 ReactContext 来实现全局的 store，也就是我在 A 页面修改了store 的状态，在 B 页面能访问到修改后的状态。

借助wechat-weapp-mobx也能达到 A 页面修改了store 的状态，在 B 页面能访问到修改后的状态。但是我发现wechat-weapp-mobx并没有借助小程序的globalData来实现，而只要import对应的store即可,是因为小程序对模块的解析是像 webpack 那样做的吗？对模块有缓存，从而能实现全局的 store吗？

为何要重写toJS方法呢？

为何要重写toJS方法呢？mobx自带有这个方法啊

props 动态设置的 key 不支持联动

根据介绍的写法，stores里面所有的值都是被观测的？

mobx的写法是可以做到观测部分需要的值，如果希望达到这样的效果，代码应该如何写？

vuex 风格

兄弟有想法将 mobx 包装一下，做成vuex风格吗？这事 mpx 已经做过了，但只能在 mpx 的开发环境用，这里有个兄弟自己开发了一个类vuex的解决方案，但毕竟没有经过项目的检验。

我在这里罗列了一下目前我翻到的微信小程序 store 方案：

zfxmnb/westore#1

missing isObservableValue

When I used require('./libs/observer').observer, I got some errors:

TypeError: isObservableValue is not a function

mobx5.x 研究支持

action 将 state 数据修改后，小程序页面没有更新