Westore發(fā)布小程序插件開發(fā)模板和其他重大更新及原理
Westore 開源兩天就突破了 1000 star,還登頂過Github日榜第一名。期間受到了海量關(guān)注,收到了大量的中肯和實用的反饋和意見。小程序插件開發(fā)的訴求是非常重要的意見之一。所以我馬不停蹄地努力連夜更新,看 Github 提交記錄就知道我凌晨 3 點鐘有合并 PR,也有提交代碼 = =!
Github地址: github.com/dntzhang/we…
先回顧一下小程序現(xiàn)有的痛點:
- 使用 this.data 可以獲取內(nèi)部數(shù)據(jù)和屬性值,但不要直接修改它們,應(yīng)使用 setData 修改
- setData 編程體驗不好,很多場景直接賦值更加直觀方便
- setData 卡卡卡慢慢慢,JsCore 和 Webview 數(shù)據(jù)對象來回傳浪費計算資源和內(nèi)存資源
- 組件間通訊或跨頁通訊會把程序搞得亂七八糟,變得極難維護和擴展
所以沒使用 westore 的時候經(jīng)??梢钥吹竭@樣的代碼:
使用 Westore 對編程體驗的改善:
上面兩種方式也可以混合使用。
這里需要特別強調(diào),雖然 this.update 可以兼容小程序的 this.setData 的方式傳參,但是更加智能,this.update 會按需 Diff 或者 透傳給 setData。原理:
再舉個例子:
this.store.data.motto = 'Hello Store222' this.store.data.b.arr.push({ name: 'ccc' }) this.update() 復(fù)制代碼
等同于
this.update({ motto:'Hello Store222', [`b.arr[${this.store.data.b.arr.length}]`]:{name:'ccc'} }) 復(fù)制代碼小程序插件
小程序插件是對一組 js 接口、自定義組件或頁面的封裝,用于嵌入到小程序中使用。插件不能獨立運行,必須嵌入在其他小程序中才能被用戶使用;而第三方小程序在使用插件時,也無法看到插件的代碼。因此,插件適合用來封裝自己的功能或服務(wù),提供給第三方小程序進行展示和使用。
插件開發(fā)者可以像開發(fā)小程序一樣編寫一個插件并上傳代碼,在插件發(fā)布之后,其他小程序方可調(diào)用。小程序平臺會托管插件代碼,其他小程序調(diào)用時,上傳的插件代碼會隨小程序一起下載運行。
- 插件開發(fā)者文檔
- 插件使用者文檔
Westore 提供的目錄如下:
|--components |--westore |--plugin.json |--store.js 復(fù)制代碼
創(chuàng)建插件:
import create from '../../westore/create-plugin' import store from '../../store' //最外層容器節(jié)點需要傳入 store,其他組件不傳 store create(store, { properties:{ authKey:{ type: String, value: '' } }, data: { list: [] }, attached: function () { // 可以得到插件上聲明傳遞過來的屬性值 console.log(this.properties.authKey) // 監(jiān)聽所有變化 this.store.onChange = (detail) => { this.triggerEvent('listChange', detail) } // 可以在這里發(fā)起網(wǎng)絡(luò)請求獲取插件的數(shù)據(jù) this.store.data.list = [{ name: '電視', price: 1000 }, { name: '電腦', price: 4000 }, { name: '手機', price: 3000 }] this.update() //同樣也直接和兼容 setData 語法 this.update( { 'list[2].price': 100000 } ) } }) 復(fù)制代碼
在你的小程序中使用組件:
<list auth-key="{{authKey}}" bind:listChange="onListChange" /> 復(fù)制代碼
這里來梳理下小程序自定義組件插件怎么和使用它的小程序通訊:
- 通過 properties 傳入更新插件,通過 properties 的 observer 來更新插件
- 通過 store.onChange 收集 data 的所有變更
- 通過 triggerEvent 來拋事件給使用插件外部的小程序
這么方便簡潔還不趕緊試試 Westore插件開發(fā)模板 !
特別強調(diào)插件內(nèi)所有組件公用的 store 和插件外小程序的 store 是相互隔離的。
原理頁面生命周期函數(shù)名稱 | 描述 |
---|---|
onLoad | 監(jiān)聽頁面加載 |
onShow | 監(jiān)聽頁面顯示 |
onReady | 監(jiān)聽頁面初次渲染完成 |
onHide | 監(jiān)聽頁面隱藏 |
onUnload | 監(jiān)聽頁面卸載 |
名稱 | 描述 |
---|---|
created | 在組件實例進入頁面節(jié)點樹時執(zhí)行,注意此時不能調(diào)用 setData |
attached | 在組件實例進入頁面節(jié)點樹時執(zhí)行 |
ready | 在組件布局完成后執(zhí)行,此時可以獲取節(jié)點信息(使用 SelectorQuery ) |
moved | 在組件實例被移動到節(jié)點樹另一個位置時執(zhí)行 |
detached | 在組件實例被從頁面節(jié)點樹移除時執(zhí)行 |
由于開發(fā)插件時候的組件沒有 this.page,所以 store 是從根組件注入,而且可以在 attached 提前注入:
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) } 復(fù)制代碼
第二部分:如何開通一個小商店