微信小程序組件設計規范
組件化開發的思想貫穿着我開發設計過程的始終。在過去很長一段時間里，我都受益於這種思想。
- 組件可復用 - 減少了重復代碼量
- 組件做為抽離的功能單元 - 方便維護
- 組件作為
template使用，可以方便計算各種屬性而不是在wxml引入wxs
在日常的小程序開發組件過程中，我一般會遵循如下幾個規則：
1.樣式獨立 & 依賴獨立
在組件開發過程中，組件可以依賴於全局樣式，組件在引入時，使用該頁面樣式和全局樣式共同渲染。
options: {
addGlobalClass: true,
multipleSlots: true
}
但是基於組件的可移植性考慮，建議每個組件配置為不依賴於全局樣式。
options: {
addGlobalClass: false,
multipleSlots: true
}
選擇在每個組件的wxss配置該組件所需的樣式。
組件開發過程中，組件可以引入app.js，基於
const app = getApp();
但是基於方便移植的角度考慮，組件中獲取全局數據使用storge更為合適。
即使依賴於某些js文件，可將該文件放入組件目錄下並引入。
- 屬性偵聽器 & 引用透明
組件可以接收頁面傳入的值，但是組件內數據格式或許不匹配頁面展示需求，需要做某些調整，這些調整建議在組件內實現。組件內數據的修改不會影響到頁面內數據。
雖然組件可以通過修改頁面棧和其他的方式對父組件進行修改，但是這種方法是不被建議的，設計組件要保證引用透明原則，即一個組件內屬性變化不應該對父組件產生影響。
properties: {
active:{
type:Number,
observer:function(newVal,oldVal){
//對數據進行預處理
}
}
}
可以在偵聽器中做一些對數據簡單的處理，對於比較復雜的邏輯計算，請采用計算屬性computed。
雖然原生的小程序並不支持該方式，但是可以通過引入第三方依賴完成，具體請參考官方文檔computed | 微信開放文檔 (qq.com)
3.事件委托
組件中所有會使頁面棧發生變化的事件，需要跨頁面操作數據的，全部交給父組件(頁面)完成。
在A頁面內點擊組件C會跳轉到E頁面
在B頁面內點擊組件C會跳轉到F頁面
這種情況下可以將點擊事件交給頁面來處理，組件僅做一個事件通知。具體跳轉事件交給頁面內函數實現。
組件內使用：
this.triggerEvent('click',args)
頁面A：
<c-component bind:click="navtoPageE" />
頁面B：
<c-component bind:click="navtoPageF" />
- 組件層級限制
盡量不要在組件中嵌套組件，曾在組件中使用一個 loading組件，但是通過參數控制該loading組件展示，出現無法隱藏問題時，無法定位到具體組件。
其次如果層級比較多，各種 props 傳遞，事件傳遞，維護成本比較高。
如果頁面邏輯復雜，需要划分組件，請保證邏輯執行都在高層級組件完成，低層組件只做渲染使用。可以理解為低層級組件作為template
- 組件定義統一的
class（錨點）
這是為了方便統一調用組件中某個方法，作為模板使用常使用到該方法。
let acmp = this.selectAllComponents('.card')
acmp.forEach(function (ele, index) {
ele.closeActionBar();
})
調用單一組件方法，可以定義ID
- 使用組件的生命周期
組件支持生命周期，某些只需要初始化一次的數據，或者計數器函數，請在attached內完成
lifetimes:{
attached(){
this.setData({
openid:app.globalData.openid
})
}
}
參考文檔