[Open source] Published by Tencent OMi-MP-create

Small but sophisticated applets framework, the applets almost zero intrusion → Github

Omi – MP-Create, like OMIO, uses OBAA in OMI Packages to listen for data changes and automatically update views. Compared with the early release of WeStore, there is no need for diff, setData shortest path automatically comes out after data changes, performance is a level.

Master the OMi-MP-Create in 5 minutes

API

  • create.Page(option)Create the page
  • create.Component(option)Create components
  • create.mitt()Event transmitters and listeners
  • create.emitterEvent transmitters and listeners
  • this.oDataData for manipulating pages or components (views are automatically updated)
  • this.storePage injection store, page and page all components are available

In actual combat

page

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

const app = getApp()

create.Page({
  store: {
    abc: 'Public data is injected from the page to all components of the page'.// Event sender and listener, or create.mitt()
    emitter: create.emitter
  },
  data: {
    motto: 'Hello World'.userInfo: {},hasUserInfo: false.canIUse: wx.canIUse('button.open-type.getUserInfo')},... . onLoad:function () {... . .// Listen on events
    this.store.emitter.on('foo', e => console.log('foo', e) )
    
    setTimeout((a)= > {
      this.oData.userInfo = {
        nickName: 'dnt'.avatarUrl: this.data.userInfo.avatarUrl
      }
    }, 2000)


    setTimeout((a)= > {
      this.oData.userInfo.nickName = 'dntzhang'
    }, 4000)}})Copy the code

Call (‘ nickName ‘, ‘data’, ‘data’, ‘nickName’, ‘data’, ‘data’, ‘data’) Because userInfo changes automatically listen for all attributes in userInfo:

this.oData.userInfo = {
  nickName: 'dnt'.avatarUrl: this.data.userInfo.avatarUrl
}
Copy the code

Of course, you can also declare it directly in data:

  data: {
    motto: 'Hello World'.userInfo: { nickName: null},...Copy the code

component

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

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

  ready: function () {
    // This can be the store injected by the page the component belongs to
    console.log(this.store)
    // Trigger the event
    this.store.emitter.emit('foo', { a: 'b' })
    setTimeout((a)= >{
      this.oData.a.b = 1
    },3000)}})Copy the code

An array of

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((a)= > {
      this.oData.logs[0] = 'Changed! '
    }, 1000)}})Copy the code

It is important to note that changing the length of the array does not trigger a view update. The size method is used instead:

this.oData.yourArray.size(3)
Copy the code

other

this.oData.arr.push(111) // View updates are triggered
// Each array method has a corresponding pureXXX method
this.oData.arr.purePush(111) // View updates are not triggered

this.oData.arr.size(2) // View updates are triggered
this.oData.arr.length = 2 // View updates are not triggered

Copy the code

Mitt grammar

const emitter = mitt()

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

// listen to all events
emitter.on(The '*', (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
Copy the code

See Mitt Github for details

Todo

  • supports fn props

Who is using

Use immediately

– making

MTI Lic