微信小程式自定義元件Component總結
沒有看過微信小程式自定義元件(以下稱Component)的同學可以到官網上了解一下。
以下是對Component的總結:
一、Component概念
Component像頁面一樣由wxml、wxss、js和json4個檔案組成,且需要把這4個檔案放在同一個目錄中。與頁面不一樣的是,Component中的建構函式(也可以稱構造器)是Component({}),而頁面中的建構函式是Page({})。
二、slot
Component的slot(slot意思是插槽),主要是讓你在外部的wxml可以自由的在你的Component的wxml裡插入模組。大家可以在https://github.com/zhu12345618/slotDemo
還有一個例項是是Component接受外部樣式的,官網中有例子。
三、Component構造器
在Component構造器中需要注意的幾個屬性是:properties、data、methods。
其他的:如果是屬性的話,感覺用到的不多,所以就不說了;如果是函式,則都是Component的生命週期函式,官網上即可瞭解得很清楚。
1. properties:對外屬性,即如果外部的wxml檔案傳入資料時,會把資料設定成properties的屬性。
如官網例子的index.wxml:
<!-- 頁面的 WXML --> <my-component my-property="example" />
這個"my-property"即對應custom-component.js裡properties屬性的myProperty,修改my-property就是修改myProperty。
custom-component.js如下:
Component({ behaviors: [], properties: { myProperty: { // 屬性名 type: String, // 型別(必填),目前接受的型別包括:String, Number, Boolean, Object, Array, null(表示任意型別) value: '', // 屬性初始值(可選),如果未指定則會根據型別選擇一個 observer: function (newVal, oldVal) { } // 屬性被改變時執行的函式(可選),也可以寫成在methods段中定義的方法名字串, 如:'_propertyChange' }, myProperty2: String // 簡化的定義方式 }, data: { A: [{ B: 'init data.A[0].B' }] }, // 私有資料,可用於模版渲染 // 生命週期函式,可以為函式,或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { onMyButtonTap: function () { this.setData({ // 更新屬性和資料的方法與更新頁面資料的方法類似 myProperty: 'Test' }) }, _myPrivateMethod: function () { // 內部方法建議以下劃線開頭 this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 這裡將 data.A[0].B 設為 'myPrivateData' this.applyDataUpdates() }, _propertyChange: function (newVal, oldVal) { } } })
但是!小程式有一個問題:是如果properties中的屬性是帶有數字的,如:myProperty2,這樣wxml裡對應的就是my-property2,但是這樣程式會報錯,希望小程式以後可能修復這個問題。
2. data:這裡的data和頁面中的data是一致的,但是這裡的data只在元件內部使用。
Tips:properties和data裡的屬性不能一樣,否則會有衝突。
3. methods:元件中的方法都是在這個物件裡定義。
四、元件與外部通訊事件
上面的"myProperty"是父節點設定資料到元件裡,元件傳資料到父節點是用事件的方式。
註冊事件,index.wxml和index.js:
<!-- 引用元件的頁面模版 -->
<view>
<my-component id="test" bindmyevent="myEventListener">
<view>這裡是插入到元件slot中的內容</view>
</my-component>
<!-- 或者可以寫成 -->
<!--
<my-component id="test" bindmyevent="myEventListener">
<view>這裡是插入到元件slot中的內容</view>
</my-component>
-->
</view>
監聽事件:
Page({
data: {
},
onLoad : function() {
console.log(this.selectComponent("#test"));
},
myEventListener: function(e) {
console.log("Event in index")
}
})
發射事件component-tag-name.wxml和component-tag-name.js:
<!-- 元件模板 -->
<view class="wrapper">
<button bindtap="onTap">點選這個按鈕將觸發“myevent”事件</button>
</view>
// components/component-tag-name.js
Component({
properties: {},
methods: {
onTap: function () {
var myEventDetail = {} // detail物件,提供給事件監聽函式
var myEventOption = {} // 觸發事件的選項
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
五、元件通訊的最後大招
如果以上通訊還不能滿足需求,可以用this.selectComponent("#test"),這個方法需要傳一個id號。
注意上面的index.wxml中有一個程式碼是id="test",這樣定義之後,就可以在js檔案中用this.selectComponent("#test")獲取到這個元件了。
最後,Component還有behaviors、元件關係、抽象節點等特性,但是對於一般的需求來說,不經常用到,所以就不作總結了。如果需要了解的話,可以去官網學習。
以上是本人的一點小總結,如有不足之處,還請各位指正!