Westore 開源兩天就(jiu)突破(po)了(le)(le) 1000 star，還登頂過(guo)Github日榜(bang)第一(yi)名。期(qi)間受到了(le)(le)海量關注，收到了(le)(le)大(da)量的(de)(de)中(zhong)肯和實用的(de)(de)反饋(kui)和意(yi)見。小程序插件(jian)開發的(de)(de)訴求是非常(chang)重要(yao)的(de)(de)意(yi)見之一(yi)。所以我(wo)(wo)馬不停蹄地(di)努力連(lian)夜(ye)更新，看 Github 提交記錄就(jiu)知道我(wo)(wo)凌晨 3 點鐘(zhong)有合并 PR，也有提交代碼 = =！

先回顧一下小程(cheng)序現有(you)的痛點:

• 使用 this.data 可以獲取內部數據和屬性值，但不要直接修改它們，應使用 setData 修改
• setData 編程體驗不好，很多場景直接賦值更加直觀方便
• setData 卡卡卡慢慢慢，JsCore 和 Webview 數據對象來回傳浪費計算資源和內存資源
• 組件間通訊或跨頁通訊會把程序搞得亂七八糟，變得極難維護和擴展

所以(yi)沒使用 westore 的時(shi)候經常可(ke)以(yi)看(kan)到這樣的代(dai)碼:

使用 Westore 對編程體驗的改善:

上面兩種方式也可(ke)以混合使用。

這里需要特別強調，雖然 this.update 可以兼容小程序的 this.setData 的方式傳(chuan)(chuan)參，但是更加智能，this.update 會(hui)按需 Diff 或者 透傳(chuan)(chuan)給 setData。原理:

再舉個例子：

this.store.data.motto = 'Hello Store222'
this.store.data.b.arr.push({ name: 'ccc' })
this.update()
復制代碼
等同于

this.update({
  motto:'Hello Store222',
  [`b.arr[${this.store.data.b.arr.length}]`]:{name:'ccc'}
})
復制代碼

小程序插件

插(cha)件(jian)開(kai)發者可以像(xiang)開(kai)發小程(cheng)序一(yi)樣編寫一(yi)個插(cha)件(jian)并上(shang)傳代碼，在插(cha)件(jian)發布之后，其(qi)他小程(cheng)序方可調(diao)用。小程(cheng)序平臺會托管插(cha)件(jian)代碼，其(qi)他小程(cheng)序調(diao)用時，上(shang)傳的插(cha)件(jian)代碼會隨小程(cheng)序一(yi)起下載運行。

• 插件開發者文檔
• 插件使用者文檔

插件開發

Westore 提供的目錄如下:

|--components
|--westore	
|--plugin.json	
|--store.js
復制代碼
創建插件:

import create from '../../westore/create-plugin'
import store from '../../store'

//最外層容器節點需要傳入 store，其他組件不傳 store
create(store, {
  properties:{
    authKey:{
      type: String,
      value: ''
    }
  },
  data: { list: [] },
  attached: function () {
    // 可以得到插件上聲明傳遞過來的屬性值
    console.log(this.properties.authKey)
    // 監聽所有變化
    this.store.onChange = (detail) => {
      this.triggerEvent('listChange', detail)
    }
    // 可以在這里發起網絡請求獲取插件的數據
    this.store.data.list = [{
      name: '電視',
      price: 1000
    }, {
      name: '電腦',
      price: 4000
    }, {
      name: '手機',
      price: 3000
    }]

    this.update()

    //同樣也直接和兼容 setData 語法
    this.update(
        { 'list[2].price': 100000 }
    )
  }
})
復制代碼

在你的(de)小(xiao)程(cheng)序(xu)中使用(yong)組件：

<list auth-key="{{authKey}}" bind:listChange="onListChange" />
復制代碼

這里來梳理下(xia)小程(cheng)(cheng)序(xu)(xu)自定義組件插件怎(zen)么(me)和使用它(ta)的小程(cheng)(cheng)序(xu)(xu)通(tong)訊:

• 通過 properties 傳入更新插件，通過 properties 的 observer 來更新插件
• 通過 store.onChange 收集 data 的所有變更
• 通過 triggerEvent 來拋事件給使用插件外部的小程序

這么(me)方(fang)便簡潔還(huan)不趕緊試試 Westore插件開(kai)發模(mo)板 ！

特別強調

插件內(nei)所有組件公用(yong)的 store 和(he)插件外小程序(xu)的 store 是相(xiang)互隔(ge)離的。

原理

頁面生命周期函數

組件生命周期函數

由于(yu)開發插件(jian)時(shi)候的組(zu)件(jian)沒有 this.page，所以 store 是從根(gen)組(zu)件(jian)注(zhu)入，而且可以在(zai) attached 提(ti)前注(zhu)入:

export default function create(store, option) {
    let opt = store
    if (option) {
        opt = option
        originData = JSON.parse(JSON.stringify(store.data))
        globalStore = store
        globalStore.instances = []
        create.store = globalStore
    }

    const attached = opt.attached
    opt.attached = function () {
        this.store = globalStore
        this.store.data = Object.assign(globalStore.data, opt.data)
        this.setData.call(this, this.store.data)
        globalStore.instances.push(this)
        rewriteUpdate(this)
        attached && attached.call(this)
    }
    Component(opt)
}
復制代碼