小程序如何自定義組件

本文小編為大家詳細介紹“小程序如何自定義組件”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“小程序如何自定義組件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一 小程序提供了很多api和基礎(chǔ)組件，但為減少代碼的復(fù)雜度和提高復(fù)用率，小程序也提供了自己的代碼復(fù)用機制:

    小程序復(fù)用：頁面模版（template），組件模版（component，使用時用標簽的形式）。

這兩種模版的寫法和之前頁面的寫法是一樣的，都有四個文件 wxml，js，wxss, json

二我們在使用基礎(chǔ)組件時比如 <view bindtap="" catchtap="" data-name="" id="" class="" ></view> 總會寫事件和屬性值，

自定義組件也一樣需要有自己的屬性和事件，

屬性分內(nèi)部屬性和外部屬性，這兩種屬性共同設(shè)置了組件的樣式。內(nèi)部屬性可以理解為手機的預(yù)裝軟件。外部屬性可以理解為手機的應(yīng)用商店，可以自己手動管理。當然我們也會提供接口供使用者來修改內(nèi)部屬性。

三，生命周期：

組件也有生命周期函數(shù)，和頁面一樣。

頁面有：onload   onready    onshow    onhide       onunload

組件有：created   attached   ready       detached    move

新建component組件：

四，自定義組件，這是官方提供的例子

Component({ //自定義組件的專有形式，如page頁面的page({})，app文件的App({})

behaviors: [],

properties: {

myProperty: { // 屬性名

type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）

value: '', // 屬性初始值（可選），如果未指定則會根據(jù)類型選擇一個

observer: function(newVal, oldVal){} // 屬性被改變時執(zhí)行的函數(shù)（可選），也可以寫成在methods段中定義的方法名字符串, 如：'_propertyChange'

},

myProperty2: String // 簡化的定義方式

},

data: {}, // 私有數(shù)據(jù)，可用于模版渲染

// 生命周期函數(shù)，可以為函數(shù)，或一個在methods段中定義的方法名

attached: function(){},

moved: function(){},

detached: function(){},

methods: {

onMyButtonTap: function(){

this.setData({

// 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似

})

},

_myPrivateMethod: function(){

// 內(nèi)部方法建議以下劃線開頭

this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 這里將 data.A[0].B 設(shè)為 'myPrivateData'

this.applyDataUpdates()

},

_propertyChange: function(newVal, oldVal) {

}

}

})

      在使用組件的頁面的json文件中配置

       {  useComponents:{"自定義組件名字":"組件的絕對路徑"}}     如{  useComponents:{"p":"../page/page"}}

需求：自定義組件中放其他的基礎(chǔ)組件。

方法：在自定義組件的wxml文件中使用<slot name="">標簽

自定義組件：<slot name="test"></slot>,將此標簽放入想要安置的位置。

引用頁面 ：<view style="background: _ _ _" slot="test"></view>//如果想要設(shè)置樣式的話寫在<slot>標簽中是無效的。

 組件不論是自定義組件還是基礎(chǔ)組件，都有自己的屬性，事件。

注意：如果組件wxml文件中的slot標簽中寫了name屬性，那么就必須在組件的js文件中寫上options:{multipleSlots:true}，不然不起作用。

讀到這里，這篇“小程序如何自定義組件”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。