微信小程式元件設計規範

元件化開發的思想貫穿着我開發設計過程的始終。在過去很長一段時間裡，我都受益于這種思想。

在日常的小程式開發元件過程中，我一般會遵循如下幾個規則：

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
      })
    }
}

參考文檔

微信小程式--頁面與元件之間如何進行資訊傳遞和函數調用 - Kindear - 部落格園 (cnblogs.com)

微信小程式--關于加快小程式開發的幾個小建議 - Kindear - 部落格園 (cnblogs.com)