微信小程式元件設計規範

Kindear發表於2021-05-24
微信小程式元件

微信小程式元件設計規範

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

  1. 元件可複用 - 減少了重複程式碼量
  2. 元件做為抽離的功能單元 - 方便維護
  3. 元件作為template使用，可以方便計算各種屬性而不是在wxml引入wxs

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

1.樣式獨立 & 依賴獨立

在元件開發過程中，元件可以依賴於全域性樣式，元件在引入時，使用該頁面樣式和全域性樣式共同渲染。

options: {
    addGlobalClass: true,
    multipleSlots: true
}

但是基於元件的可移植性考慮，建議每個元件配置為不依賴於全域性樣式。

options: {
    addGlobalClass: false,
    multipleSlots: true
}

選擇在每個元件的wxss配置該元件所需的樣式。

元件開發過程中，元件可以引入app.js，基於

const app = getApp();

但是基於方便移植的角度考慮，元件中獲取全域性資料使用storge更為合適。

即使依賴於某些js檔案，可將該檔案放入元件目錄下並引入。

  1. 屬性值設定偵聽器

元件可以接收頁面傳入的值，但是元件內資料格式或許不匹配頁面展示需求，需要做某些調整，這些調整建議在元件內實現。元件內資料的修改不會影響到頁面內資料。

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" />
  1. 元件內儘量不要巢狀元件

曾在元件中使用一個 loading元件，但是通過引數控制該loading元件展示，出現無法隱藏問題時，無法定位到具體元件。

  1. 元件定義統一的class

這是為了方便統一呼叫元件中某個方法，作為模板使用常使用到該方法。

let acmp = this.selectAllComponents('.card')
acmp.forEach(function (ele, index) {
    ele.closeActionBar();
})
  1. 使用元件的生命週期

元件支援生命週期，某些只需要初始化一次的資料，或者計數器函式，請在attached內完成

lifetimes:{
    attached(){
      this.setData({
        openid:app.globalData.openid
      })
    }
}

參考文件

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

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

相關文章