前言
在第一次的小程序項(xiàng)目中丽惭，遇到了使用原生組件比較難解決的問(wèn)題辈双，
所以自己動(dòng)手構(gòu)建了一個(gè)自定義組件，也可以方便當(dāng)做模板在各個(gè)頁(yè)面中使用湃望。
這里記錄的是自己做自定義組件時(shí)的過(guò)程证芭，僅供參考。
步驟
自定義組件分為以下幾步：
- 通過(guò)wxml废士，組合理想的組件原型
- 通過(guò)js，定義組件存在的屬性和函數(shù)
- 通過(guò)json矗蕊，聲明是組件
- 通過(guò)wxss氢架，定義樣式（可忽略）
案例
在這里，我是使用 <picker> 和 <image> 組合一個(gè)帶有圖片的下拉框組件卿操。
樣子如下：
樣式是丑了點(diǎn)但問(wèn)題不大害淤，其中目錄列表如下
1.定義wxml拓售，構(gòu)建理想的組件
<!-- 組件模板 -->
<view class='custom-picker-component'>
<picker class='custom-picker' range='{{range}}' range-key='{{key}}' bindchange='_change'>
<slot></slot>
</picker>
<image src='{{src}}' class='custom-picker-image' bindtap='_tap' />
</view>
很簡(jiǎn)單一個(gè)view邻辉，包含<picker>和<image>，picker中包含一個(gè)<slot>
作用是作為一個(gè)占位符組件值骇，在使用自定義控件的時(shí)候就可以在內(nèi)部添加一個(gè)子組件吱瘩，該子組件位置就是<slot>的位置
2.編寫js，聲明函數(shù)和屬性
每個(gè)組件都有自己的函數(shù)和變量，自定義組件也不例外祝懂，可以事先設(shè)置一些屬性或函數(shù)提供給外界使用拘鞋。
Component({
/**
* 讓組件擁有表單屬性
*/
behaviors: ['wx://form-field'],
/**
* 組件的屬性列表
*/
properties: {
range: {
type: Array
},
key: {
type: String
},
src: {
type: String,
value: "../images/img_drop.png"
},
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
range: [],
},
/**
* 組件的方法列表
*/
methods: {
//我是image的事件
_tap(e) {
//為組件提供函數(shù)盆色，函數(shù)名為tap
this.triggerEvent('tap')
},
//我是picker的事件
_change(e) {
//為組件提供函數(shù)，函數(shù)名為change隔躲，并且函數(shù)還提供參數(shù)value
this.triggerEvent('change', {
value: e.detail.value
});
//為表單提供value
this.setData({
value: e.detail.value
})
}
},
})
主要分三塊：
- properties：定義屬性
- 格式：屬性名:{
type:屬性類型
value:默認(rèn)值(可不填)
}
- data：初始數(shù)據(jù)
- method：定義方法
其中上述的屬性：range宣旱，key，src浑吟；方法：_tap买置，_change都對(duì)應(yīng)wxml定義的屬性和事件。
this.triggerEvent('xxx')忿项，為提供給外界的函數(shù)，xxx就是函數(shù)名寞酿，調(diào)用時(shí)為bindxxx脱柱，
behaviors: ['wx://form-field']：作用是讓該控件具備表單功能，可以使用name惨好，最后 _change 的setData随闺，則給表單提供value，所以這里是在提交表單數(shù)據(jù)后龄句，給我提供一個(gè)picker的索引值。
3.在json中聲明為組件
{
"component": true,
"usingComponents": {}
}
使用
- 使用前傀蓉，需要在使用的頁(yè)面對(duì)應(yīng)的json聲明要使用該組件
{
"usingComponents": {
"custom-picker": "../../custom/custom-picker"
}
}
- 在wxml引入組件
<custom-picker src='../images/img_drop.png' range="{{list}}" key="name" bindtap='customTap' bindchange='customChange'>
<text>{{value?value:'請(qǐng)選擇'}}</text>
</custom-picker>
屬性：src职抡，range，key萨蚕，函數(shù)：tap蹄胰，change奕翔，都為自定義組件提供的，<text>代替了原先的<slot>
- 最后是js
Page({
data: {
value: '',
list: [{
name: 'a'
}, {
name: 'b'
}]
},
customTap: function() {
console.log("我是自定義控件的圖片點(diǎn)擊事件")
},
customChange: function(e) {
console.log("我是自定義控件的picker變更的事件")
console.log("參數(shù)e是自定義組件_change方法提供給我的")
console.log("不提供的話e.detail的值為undefined")
console.log(e)
}
})
