使用原生小程序框架OMIX2.0总结

关于OMIX2.0

OMIX 2.0 主要特性有实现小程序全局的状态管理，具有极简的api，对小程序零入侵，支持计算属性，并适用于小游戏。
开源地址

api

1. 使用create.Page(store,soption)创建页面，store从页面注入，如果option定义了data,store的data会挂载到this.data.$下
2. create.Component(option) 创建组件
3. create.Component(store, option) 创建[组件页面]

使用OMIX2.0

使用的话用下面的快速安装

npx omi-cli init-x my-app

当然也有TypeScript的模板

npx omi-cli init-x-ts my-app

我用的是第一个，安装稍微的有点慢，安装好的目录结构是这样的。

pages和components下是官方自带的小demo，让你熟悉怎么去使用。使用index文件夹为例，我把index.js的部分代码贴出来。

import create from '../../utils/create'
import store from '../../store/index'

//获取应用实例
const app = getApp()

create.Page(store, {
  use: [
    'motto',
    'userInfo',
    'hasUserInfo',
    'canIUse',
    'newProp'
  ],
  computed: {
    reverseMotto() {
      return this.motto.split('').reverse().join('')
    }
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.store.data.userInfo = app.globalData.userInfo
      this.store.data.hasUserInfo = true

    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.store.data.userInfo = res.userInfo
        this.store.data.hasUserInfo = true
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.store.data.userInfo = res.userInfo
          this.store.data.hasUserInfo = true
        }
      })
    }
})

首先使用的时候需要引入utils中create.js和store文件夹中index.js.

声明页面的话就使用create.Page(store,soption)

把引用store中定义的变量放在use中声明，这样就可以使用this.data.$.xxx调用，也可以使用this.store.data.xxx调用。如果没有在store中定义变则要使用this.store.set(this.store.data, 'newProp', 'newPropVal')去定义。

在xwxml文件中想使用store里定义的变量的话如果是有在use中声明的就可以写成{{$.xxx}}的形式。

这样我们就在微信小程序项目中引入了状态管理。

其他配置

在store中我们可以定义我们想用的状态管理。

export default {
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    logs: []
  },
  //无脑全部更新，组件或页面不需要声明 use
  //updateAll: true,
//用来打开和关闭 log 调试:
  //debug: true

}

updateAll使用场景是如果小程序很小，就直接把 updateAll 声明为 true，这样就会全部更新，无需每个页面引入use.

debug是用来调式的，设为true会在store.data变化时打印对应的变化。

其他

使用store.onChange()去监听变化

const handler = function (evt) {
  console.log(evt)
}
//监听，允许绑定多个
store.onChange(handler)
//移除监听
store.offChange(handler) 

在app.js中使用状态管理

https://www.jianshu.com/p/7b38d42cf6f7

参考

https://juejin.im/post/5dba3f81f265da4cf50c5ea4

https://github.com/Tencent/omi/tree/master/packages/omix