https://github.com/dao42/wechat-weapp-mobx
微信小程序(wechat weapp) mobx 绑定, 跨页面通信的利器, 现已发布npm包
https://github.com/dao42/wechat-weapp-mobx
mobx redux weapp wechat wechat-framework wechat-weapp
Last synced: 5 months ago
JSON representation
微信小程序(wechat weapp) mobx 绑定, 跨页面通信的利器, 现已发布npm包
- Host: GitHub
- URL: https://github.com/dao42/wechat-weapp-mobx
- Owner: dao42
- Created: 2017-03-30T03:52:03.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-12-13T03:52:10.000Z (over 6 years ago)
- Last Synced: 2025-10-17T05:42:04.270Z (8 months ago)
- Topics: mobx, redux, weapp, wechat, wechat-framework, wechat-weapp
- Homepage:
- Size: 116 KB
- Stars: 210
- Watchers: 26
- Forks: 30
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
微信小程序 mobx 绑定( wechat weapp mobx )
==============
页面间通信的利器
为你的小程序添加mobx数据层驱动
当前版本: 0.2.0
依赖 mobx 版本: 4.9.2
## 安装
### 方式一: npm 包( 推荐 )
小程序已经支持使用 npm 安装第三方包，详见 [npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm)
```shell
npm install wechat-weapp-mobx -S --production
```
### 方式二: 手动安装
1. clone或者下载代码库到本地:
```shell
git clone https://github.com/dao42/wechat-weapp-mbox
```
2. 将 `dist/mobx.js`, `dist/diff.js` 和 `dist/observer.js` 文件直接拷贝到小程序的工程中,例如 (下面假设我们把第三方包都安装在libs目录下):
```shell
cd wechat-weapp-mobx
cp mobx.js <小程序根目录>/libs
cp diff.js <小程序根目录>/libs
cp observer.js <小程序根目录>/libs
```
上面的命令将包拷贝到小程序的`<小程序根目录>/libs`目录下
3. 创建一个 `<小程序根目录>/stores` 目录, 存放数据层.
## 使用( 使用 ES5 语法 )
1. 创建 mobx 的 stores
```js
// <小程序根目录>/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. 绑定页面联动事件
```js
// <小程序根目录>/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` 这种方式来访问了, 并且数据联动已经自动工作.
```js
// <小程序根目录>/pages/index/index.wxml
{{props.todoStore.todoText}}
```
4. 数据自动联动
stores 中的数据可以跨页面同时访问，并且数据更新后，页面也会自动更新。从而节省大量逻辑代码。
## 组件中使用
* 绑定组件联动事件
```js
Component(observerComponment({
props: {
todoStore: require('../stores/todoStore').default
}
}))
```
## ES6 语法示例
请直接查看示例: [wechat-weapp-mobx-todos-npm](https://github.com/dao42/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](https://github.com/dannnney) 的贡献。
### 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](https://github.com/dao42/wechat-weapp-mobx-todos-npm)
真机实测版请clone下面这个repo，用小程序开发工具开启预览:
```
git clone https://github.com/dao42/wechat-weapp-mobx-todos-npm.git
```
## 示例( 手动安装 )
详细的使用例子可以参照: [wechat-weapp-mobx-todos](https://github.com/dao42/wechat-weapp-mobx-todos)
真机实测版请clone下面这个repo，用小程序开发工具开启预览:
```
git clone https://github.com/dao42/wechat-weapp-mobx-todos.git
```
## 实际案例
**Ballu -- 一个实时的篮球计分工具**
> 点评: 此项目是一个非常 "复杂" 的小程序, 项目多处页面需要使用 websocket 与服务端进行同步的数据更新, 深度使用 `wechat-weapp-mobx` 作为数据驱动层后, 数据状态同步的问题轻松化解. 最终项目成功上线.
## 开发( 发布 npm 版本 )
```bash
$ npm login --registry https://registry.npmjs.org/
$ npm publish
```
## 协议( LICENSE )
MIT