Minii

Why

I wanna keep it simple when developing Wechat Mini app. No need to import another framework(React, Vue) or bundler(Webpack, Gulp), the only thing I need is a state management.

我希望只依照小程序的文档，用小程序原生框架进行开发而不用去引入其它前端框架从而增加复杂度。而在用原生框架时，唯一缺失的就是一个类似Redux，Mobx这样的状态管理工具

Tiny: < 1KB 在导入小程序后小于1KB
Simple: 2 API 两个简单的API就可以完成状态管理

Installation 安装

The base library should greater than 2.2.1 (小程序基础库版本 2.2.1 或以上)

$ npm install minii --production
In WeChat Developer Tool, Tools -> build npm (在开发者工具里面依次点击工具 -> 构建 npm)
In WeChat Developer Tool, Details -> check Use NPM module (在开发者工具的详情里面勾选 使用 npm 模块)

Official doc: how to use npm in wechat

How to use 如何使用

1. Subsribe your state 订阅你的状态

import { observe } from 'minii'

class UserStore {
  constructor () {
    this.name = 'A'
  }
  
  changeName (name) {
    this.name = name
  }
}

export default observe(new UserSore(), 'user')

2. connect the state to the page 将状态和页面联系起来

import { mapToData } from 'minii'
import userStore from '../../stores/user'

const connect = mapToData((state) => {
  return {
    myName: state.user.name
  }
})

Page(connect({
 onChangeName () {
   userStore.chnageName('B')
 }
}))

3. That'it, the state has bind to Page's data 完成了，页面中的data和状态就这样被绑定在了一起

<view>
  <text>My name</text>
  <text>{{ myName }}</text>
  <button bindtap="onChangeName">Change Name</button>
</view>

API

mapToData

Accept: (Function) | (state) => {}
Return: Object

mapToData会将状态映射到你当前页面的data上，和react-redux中的connect是类似的概念，这里的state是全局的状态，比如你之前用observe订阅了一个store observer(instance, 'user')，这个store里的状态就会在state.user上

observe

Accept: (Object, String) | Object 是一个store的实例，String是它在全局state上的变量名，如果没有则会用storeIntance.constructor.name.toLowerCase()

observe会将一个store里面的变量都订阅在全局状态下，并通过mapToData让一个页面订阅这些变量，当在任何地方改变store里面的变量，变量的更新都会推送到订阅这些变量的页面中从而更新界面。

推荐所有改变变量的方法都作为instance method写在store里面，而不是在其它任意的地方随意的改变一个store的变量

Deployment

$ npm run build
$ npm publish

License

MIT

YikaJ/minii