小程序自定義組件實(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ǔ)組件，都有自己的屬性，事件。

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

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