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

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

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

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

1.樣式獨(dú)立 & 依賴獨(dú)立

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

options: {
    addGlobalClass: true,
    multipleSlots: true
}

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

options: {
    addGlobalClass: false,
    multipleSlots: true
}

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

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

const app = getApp();

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

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

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

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

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

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

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

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

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

組件內(nèi)使用：

this.triggerEvent('click',args)

頁(yè)面A：

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

頁(yè)面B：

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

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

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

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

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

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

使用組件的生命周期

組件支持生命周期，某些只需要初始化一次的數(shù)據(jù)，或者計(jì)數(shù)器函數(shù)，請(qǐng)?jiān)赼ttached內(nèi)完成

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

參考文檔

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

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

總結(jié)

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

最新評(píng)論