Westore 釋出小程式外掛開發模板和其他重大更新及原理

小程式開發 · 發表 2018-09-28 10:24:57

摘要： Westore 開源兩天就突破了 1000 star，還登頂過Github日榜第一名。期間受到了海量關注，收到了大量的中肯和實用的反饋和意見。小程式外掛開發的訴求是非常重要的意見之一。所以我馬不停蹄地努力連夜更新，看 Github 提交記錄就知道我凌晨 3 點鐘有合併 PR，也有提交程式碼 =...

Westore 開源兩天就突破了 1000 star，還登頂過Github日榜第一名。期間受到了海量關注，收到了大量的中肯和實用的反饋和意見。小程式外掛開發的訴求是非常重要的意見之一。所以我馬不停蹄地努力連夜更新，看 Github 提交記錄就知道我凌晨 3 點鐘有合併 PR，也有提交程式碼 = =！

Github地址: ofollow,noindex">github.com/dntzhang/we…

先回顧一下小程式現有的痛點:

使用 this.data 可以獲取內部資料和屬性值，但不要直接修改它們，應使用 setData 修改
setData 程式設計體驗不好，很多場景直接賦值更加直觀方便
setData 卡卡卡慢慢慢，JsCore 和 Webview 資料物件來回傳浪費計算資源和記憶體資源
元件間通訊或跨頁通訊會把程式搞得亂七八糟，變得極難維護和擴充套件

所以沒使用 westore 的時候經常可以看到這樣的程式碼:

使用 Westore 對程式設計體驗的改善:

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

這裡需要特別強調，雖然 this.update 可以相容小程式的 this.setData 的方式傳參，但是更加智慧，this.update 會按需 Diff 或者透傳給 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'}
})
複製程式碼

小程式外掛

小程式外掛是對一組 js 介面、自定義元件或頁面的封裝，用於嵌入到小程式中使用。外掛不能獨立執行，必須嵌入在其他小程式中才能被使用者使用；而第三方小程式在使用外掛時，也無法看到外掛的程式碼。因此，外掛適合用來封裝自己的功能或服務，提供給第三方小程式進行展示和使用。

外掛開發者可以像開發小程式一樣編寫一個外掛並上傳程式碼，在外掛釋出之後，其他小程式方可呼叫。小程式平臺會託管外掛程式碼，其他小程式呼叫時，上傳的外掛程式碼會隨小程式一起下載執行。

外掛開發

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 }
)
}
})
複製程式碼

在你的小程式中使用元件：

<list auth-key="{{authKey}}" bind:listChange="onListChange" />
複製程式碼

這裡來梳理下小程式自定義元件外掛怎麼和使用它的小程式通訊:

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

這麼方便簡潔還不趕緊試試 Westore外掛開發模板！

特別強調

外掛內所有元件公用的 store 和外掛外小程式的 store 是相互隔離的。

原理

頁面生命週期函式

名稱	描述
onLoad	監聽頁面載入
onShow	監聽頁面顯示
onReady	監聽頁面初次渲染完成
onHide	監聽頁面隱藏
onUnload	監聽頁面解除安裝

元件生命週期函式

名稱	描述
created	在元件例項進入頁面節點樹時執行，注意此時不能呼叫 setData
attached	在元件例項進入頁面節點樹時執行
ready	在元件佈局完成後執行，此時可以獲取節點資訊（使用 SelectorQuery ）
moved	在元件例項被移動到節點樹另一個位置時執行
detached	在元件例項被從頁面節點樹移除時執行

由於開發外掛時候的元件沒有 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)
}
複製程式碼