微信小程序組件設(shè)計規(guī)范

組件化開發(fā)的思想貫穿著我開發(fā)設(shè)計過程的始終。在過去很長一段時間里，我都受益于這種思想。

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

在日常的小程序開發(fā)組件過程中，我一般會遵循如下幾個規(guī)則：

1.樣式獨立 & 依賴獨立

在組件開發(fā)過程中，組件可以依賴于全局樣式，組件在引入時，使用該頁面樣式和全局樣式共同渲染。

options: {
    addGlobalClass: true,
    multipleSlots: true
}

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

options: {
    addGlobalClass: false,
    multipleSlots: true
}

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

組件開發(fā)過程中，組件可以引入app.js，基于

const app = getApp();

但是基于方便移植的角度考慮，組件中獲取全局數(shù)據(jù)使用storge更為合適。

即使依賴于某些js文件，可將該文件放入組件目錄下并引入。

屬性值設(shè)置偵聽器

組件可以接收頁面?zhèn)魅氲闹?，但是組件內(nèi)數(shù)據(jù)格式或許不匹配頁面展示需求，需要做某些調(diào)整，這些調(diào)整建議在組件內(nèi)實現(xiàn)。組件內(nèi)數(shù)據(jù)的修改不會影響到頁面內(nèi)數(shù)據(jù)。

properties: {
    active:{
      type:Number,
      observer:function(newVal,oldVal){
        //對數(shù)據(jù)進行預(yù)處理
      }
    }
}

3.所有使頁面棧發(fā)生變動的操作都交給頁面完成

在A頁面內(nèi)點擊組件C會跳轉(zhuǎn)到E頁面

在B頁面內(nèi)點擊組件C會跳轉(zhuǎn)到F頁面

這種情況下可以將點擊事件交給頁面來處理，組件僅做一個事件通知。具體跳轉(zhuǎn)事件交給頁面內(nèi)函數(shù)實現(xiàn)。

組件內(nèi)使用：

this.triggerEvent('click',args)

頁面A：

<c-component bind:click="navtoPageE" />

頁面B：

<c-component bind:click="navtoPageF" />

組件內(nèi)盡量不要嵌套組件

曾在組件中使用一個 loading組件，但是通過參數(shù)控制該loading組件展示，出現(xiàn)無法隱藏問題時，無法定位到具體組件。

組件定義統(tǒng)一的class

這是為了方便統(tǒng)一調(diào)用組件中某個方法，作為模板使用常使用到該方法。

let acmp = this.selectAllComponents('.card')
acmp.forEach(function (ele, index) {
    ele.closeActionBar();
})

使用組件的生命周期

組件支持生命周期，某些只需要初始化一次的數(shù)據(jù)，或者計數(shù)器函數(shù)，請在attached內(nèi)完成

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

參考文檔

微信小程序--頁面與組件之間如何進行信息傳遞和函數(shù)調(diào)用

微信小程序--關(guān)于加快小程序開發(fā)的幾個小建議

總結(jié)

到此這篇關(guān)于微信小程序開發(fā)之組件設(shè)計規(guī)范的文章就介紹到這了,更多相關(guān)微信小程序組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論