【開源】騰訊 omi-mp-create 釋出 - 極小卻精巧的小程式框架

當耐特發表於2018-12-19

【開源】騰訊 omi-mp-create 釋出

極小卻精巧的小程式框架，對小程式入侵性幾乎為零 → Github

omi-mp-create 和 omio 一樣，使用了 omi packages 裡的 obaa 監聽資料變化自動更新檢視。和早期釋出的 westore 對比的話，就是不用 diff 了，資料變更之後 setData 的最短路徑自動就出來了，效能上一個檔次。

5分鐘精通 omi-mp-create

API

create.Page(option) 建立頁面
create.Component(option) 建立元件
create.mitt() 事件傳送和監聽器
create.emitter 事件傳送和監聽器
this.oData 操作頁面或元件的資料（會自動更新檢視）
this.store 頁面注入的 store，頁面和頁面所有元件可以拿到

實戰

頁面

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

const app = getApp()

create.Page({
  store: {
    abc: '公共資料從頁面注入到頁面的所有元件',
    //事件傳送和監聽器,或者 create.mitt()
    emitter: create.emitter
  },
  data: {
    motto: 'Hello World',
    userInfo: { },
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  ...
  ...
  onLoad: function () {

    ...
    ...
    ...
     //監聽事件
    this.store.emitter.on('foo', e => console.log('foo', e) )
    
    setTimeout(() => {
      this.oData.userInfo = {
        nickName: 'dnt',
        avatarUrl: this.data.userInfo.avatarUrl
      }
    }, 2000)


    setTimeout(() => {
      this.oData.userInfo.nickName = 'dntzhang'
    }, 4000)
  }
})
複製程式碼

這裡需要注意，oData 必須直接操作 data 裡定義好的資料才能直接更新檢視，比如 nickName 一開始沒有定義好，更新它是不會更新檢視，只有通過下面程式碼執行之後，才能更新 nickName，因為 userInfo 的變更會自動監聽 userInfo 內的所有屬性：

this.oData.userInfo = {
  nickName: 'dnt',
  avatarUrl: this.data.userInfo.avatarUrl
}
複製程式碼

當然你也可以直接在 data 裡宣告好：

  data: {
    motto: 'Hello World',
    userInfo: { nickName: null },
    ...
複製程式碼

元件

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

create.Component({
  data: {
    a: { b: Math.random() }
  },

  ready: function () {
    //這裡可以或者元件所屬頁面注入的 store
    console.log(this.store)
    //觸發事件
    this.store.emitter.emit('foo', { a: 'b' })
    setTimeout(()=>{
      this.oData.a.b = 1
    },3000)
  },
})
複製程式碼

陣列

import create from '../../utils/create'
import util from '../../utils/util'

create.Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.oData.logs = (wx.getStorageSync('logs') || []).map(log => {
      return util.formatTime(new Date(log))
    })

    setTimeout(() => {
      this.oData.logs[0] = 'Changed!'
    }, 1000)

  }
})
複製程式碼

這裡需要注意，改變陣列的 length 不會觸發檢視更新，需要使用 size 方法:

this.oData.yourArray.size(3)
複製程式碼

其他

this.oData.arr.push(111) //會觸發檢視更新
//每個陣列的方法都有對應的 pureXXX 方法
this.oData.arr.purePush(111) //不會觸發檢視更新

this.oData.arr.size(2) //會觸發檢視更新
this.oData.arr.length = 2 //不會觸發檢視更新

複製程式碼

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' })

// working with handler references:
function onFoo() {}
emitter.on('foo', onFoo)   // listen
emitter.off('foo', onFoo)  // unlisten
複製程式碼