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

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

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

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

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

屬性分內(nèi)部屬性和外部屬性，這兩種屬性共同設(shè)置了組件的樣式。內(nèi)部屬性可以理解為手機(jī)的預(yù)裝軟件。外部屬性可以理解為手機(jī)的應(yīng)用商店，可以自己手動(dòng)管理。當(dāng)然我們也會(huì)提供接口供使用者來修改內(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: '', // 屬性初始值（可選），如果未指定則會(huì)根據(jù)類型選擇一個(gè)

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

},

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

},

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

// 生命周期函數(shù)，可以為函數(shù)，或一個(gè)在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="">標(biāo)簽

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

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

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

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

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