分享 为你的小程序提供 mobx 数据层驱动

lyfi2003 for 深圳市百分之八十网络技术有限公司 · 发布于 2017年04月04日 · 最后由 kevin161111 回复于 2017年04月05日 · 1068 次阅读
121

最近在开发微信小程序, 造了一个轮子, 看看大家有需要的没?

微信小程序经过一段时间的发展, 生态已经比较强大了, 我认为它未来将取代微信服务号的地位, 成为另一个重要的入口.

但开发相对复杂的小程序是一个比较有挑战的事, 其重要原因在于小程序框架的数据管理能力偏弱, 无法直接跨页进行数据共享.

于是, 我们造了一个轮子: wechat-weapp-mobx, 能够让小程序添加 mobx 数据层驱动.

mobx VS redux

开始安利我们的轮子之前, 先来谈一下 mobx 与 redux 这两个数据层的框架.

毫无疑问, 现在是 redux 的天下, 用过 react 的团队大多都在使用 redux, 它是一个将函数式编程引入数据驱动的方案, 框架轻量简单. 但我们更偏爱 mobx. 它的特点就是特别自然:

  1. 对象式的数据层, 简单易于理解, 业务入侵非常小.
  2. 智能高效的驱动方式, 几乎总是比 redux 快, 甚至快 20 倍以上性能.

性能分析见这里: https://twitter.com/mweststrate/status/720177443521343488( 需翻墙 )

不仅在 react 中, 我们80%团队使用 mobx, 在小程序中, 我们也为 mobx 创造了这个轮子: wechat-weapp-mobx

如何在小程序中集成 wechat-weapp-mobx

集成方式:

  1. clone或者下载代码库到本地:
git clone https://github.com/80percent/wechat-weapp-mbox
  1. mobx.jsobserver.js 文件直接拷贝到小程序的工程中,例如 (下面假设我们把第三方包都安装在libs目录下):
cd wechat-weapp-mobx
cp mobx.js <小程序根目录>/libs
cp observer.js <小程序根目录>/libs

上面的命令将包拷贝到小程序的libs目录下

  1. 创建一个 stores 目录, 存放数据层.

如何使用

  1. 创建 mobx 的 stores

    var extendObservable = require('../libs/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. 绑定页面联动事件

    var observer = require('../libs/observer').observer;
    Page(observer({
      props: {
        todoStore: require('../stores/todoStore').default,
      },
      // your other code below
      onLoad: function(){
      }
    }))
    
  3. 说明

    完成上述两步之后,你就可以在 wxml 中用 props.todoStore 这种方式来访问了, 并且数据联动已经自动工作.

实际案例 & demo

我们已经在客户产品中使用访框架, 请放心使用它, 发现问题请在 github 上提供 issue. 我们会及时修复.

目前我们有两个产品正在使用它, 待上线后公布给大家体验.

一个完整的 todo list demo 演示: wechat-weapp-mobx-todos

如果不是对 mobx 特别有爱, 可以试试 wechat-weapp-redux

求关注

如果它对你有用, 或者即将对你有用, 请点个关注: wechat-weapp-mobx-todos

PS: 我目前正在创业, 成立了深圳市百分之八十网络技术有限公司, 专注于互联网产品的 MVP 研发, 如果你的创业想更快更高质量面向市场, 可以来谈谈. 公司官网: https://www.80percent.io

共收到 4 条回复
1453

支持飞哥

121
1453duobei 回复

哈 谢谢多北 :)

96

已经忘记了微信小程序是什么。打开次数不超过5次。

29799

支持飞哥

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册