omix 简介

omix 主要提供了以下几种能力

像 vue 一样修改 data、创建函数属性

// 修改 oData，页面中的 data 也会实时修改
this.oData.userName = 'jie'

data: {
  motto: 'Hello World',
  reverseMotto() {
    return this.motto.split('').reverse().join('')
  }
},

监听、触发自定义事件

可以定义全局的事件，在不同的页面，页面中的组件触发、监听事件。
能想到的适用场景：从列表页进入到详情页，在详情页修改列表页对应的项为已读。
mitt 来自开源库 mitt

const emitter = mitt()

// listen to an event
emitter.on('foo', e => console.log('foo', e) )

// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )

// fire an event
emitter.emit('foo', { a: 'b' })

给页面中的组件注入上下文

// page
create.Page({
  //页面级别上下文，跨页面不共享
  context: {
    abc: '公共数据从页面注入到页面的所有组件'
    //事件发送和监听器,或者 create.mitt()
    emitter: create.emitter
  },
}

// component
create.Component({
  ready: function () {
    //这里可以获取组件所属页面注入的 store
    console.log(this.context)
    //触发事件
    this.context.emitter.emit('foo', { a: 'b' })
  },
})

定义 store 跨页面共享数据

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

create(store, {
  onLoad: function () {
    // 所有 页面的 store 都会更新
    this.store.data.logs = (wx.getStorageSync('logs') 
  },
})

拆解

暂时只打算用 store 和 mitt，mitt 直接拿来用就行，所以依照 omix 作者的实现方式仿写了一下 store。

store 原理

原理挺简单的，就是修改 onLoad 把每个页面的实例保存起来，修改 store 就让保存的页面实例调用 setData 同步更新数据

仿写代码

使用

先定义 store

export default {
  data: {
    test: 'haha',
  },

  onChange (data) {
    console.log(data);
  },
}

// 使用
import store from '../store'
import customPage from '../utils/customPage'

customPage({
  store,

  data: {
    
  },

  onLoad () {
    // 多个页面同步更新
    this.store.setData({
      test: 'lala',
    })
  },
})

源代码地址

https://github.com/jinglen/wx-mini-store/blob/master/utils/customPage.js

收获

• 原来微信会把 Page(options) 中的 options 克隆一下