商城系統(tǒng) 注冊(cè)

小程序自定義組件實(shí)例教程

2020-09-27|HiShop
導(dǎo)讀:小程序提供了很多api和基礎(chǔ)組件,但為減少代碼的復(fù)雜度和提高復(fù)用率,小程序也提供了自己的代碼復(fù)用機(jī)制...

小程序自定義組件實(shí)例教程

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

    小程序復(fù)用:頁(yè)面模版(template),組件模版(component,使用時(shí)用標(biāo)簽的形式)。

這兩種模版的寫(xiě)法和之前頁(yè)面的寫(xiě)法是一樣的,都有四個(gè)文件 wxml,js,wxss, json

二我們?cè)谑褂没A(chǔ)組件時(shí)比如 <view bindtap="" catchtap="" data-name="" id="" class="" ></view> 總會(huì)寫(xiě)事件和屬性值,

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

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

三,生命周期:

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

頁(yè)面有:onload   onready    onshow    onhide       onunload

組件有:created   attached   ready       detached    move

新建component組件:

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

Component({ //自定義組件的專(zhuān)有形式,如page頁(yè)面的page({}),app文件的App({})

behaviors: [],

properties: {

myProperty: { // 屬性名

type: String, // 類(lèi)型(必填),目前接受的類(lèi)型包括:String, Number, Boolean, Object, Array, null(表示任意類(lèi)型)

value: '', // 屬性初始值(可選),如果未指定則會(huì)根據(jù)類(lèi)型選擇一個(gè)

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

},

myProperty2: String // 簡(jiǎn)化的定義方式

},

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

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

attached: function(){},

moved: function(){},

detached: function(){},

methods: {

onMyButtonTap: function(){

this.setData({

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

})

},

_myPrivateMethod: function(){

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

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

this.applyDataUpdates()

},

_propertyChange: function(newVal, oldVal) {

}

}

})

      在使用組件的頁(yè)面的json文件中配置

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

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

方法:在自定義組件的wxml文件中使用<slot name="">標(biāo)簽

自定義組件:<slot name="test"></slot>,將此標(biāo)簽放入想要安置的位置。

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

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

小程序自定義組件實(shí)例教程

注意:如果組件wxml文件中的slot標(biāo)簽中寫(xiě)了name屬性,那么就必須在組件的js文件中寫(xiě)上options:{multipleSlots:true},不然不起作用。

HiShop小程序工具提供多類(lèi)型商城/門(mén)店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請(qǐng)查看:小程序商店

電話咨詢(xún) 預(yù)約演示 0元開(kāi)店