小程序如何自定義組件

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

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

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

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

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

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

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

三，生命周期：

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

頁面有：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: '', // 屬性初始值（可選），如果未指定則會根據類型選擇一個

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

},

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

},

data: {}, // 私有數據，可用于模版渲染

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

attached: function(){},

moved: function(){},

detached: function(){},

methods: {

onMyButtonTap: function(){

this.setData({

// 更新屬性和數據的方法與更新頁面數據的方法類似

})

},

_myPrivateMethod: function(){

// 內部方法建議以下劃線開頭

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

this.applyDataUpdates()

},

_propertyChange: function(newVal, oldVal) {

}

}

})

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

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

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

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

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

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

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

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

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