微信小程序組件設計規範
組件化開發的思想貫穿着我開發設計過程的始終。在過去很長一段時間裏，我都受益於這種思想。
- 組件可複用 - 減少了重複代碼量
- 組件做爲抽離的功能單元 - 方便維護
- 組件作爲
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){
//對數據進行預處理
}
}
}
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組件展示，出現無法隱藏問題時，無法定位到具體組件。
- 組件定義統一的
class
這是爲了方便統一調用組件中某個方法，作爲模板使用常使用到該方法。
let acmp = this.selectAllComponents('.card')
acmp.forEach(function (ele, index) {
ele.closeActionBar();
})
- 使用組件的生命週期
組件支持生命週期，某些只需要初始化一次的數據，或者計數器函數，請在attached內完成
lifetimes:{
attached(){
this.setData({
openid:app.globalData.openid
})
}
}
參考文檔