一、自定義元件介紹
1. 什麼是自定義元件？
當微信官方提供的元件，不能滿足我們的需求時，且使用系統元件構造模板 wxml 較為複雜，我們就可以考慮使用微信官方提供的元件架構，定義符合我們需求的元件。
2. 自定義元件組成
自定義的組成和小程式的一般頁面的結構一樣。由：jsjsonwxmlwxss 四個檔案構成，其中：
js : 負責元件的邏輯。
json: 負責定義元件的配置。
wxml: 負責定義元件的佈局。
wxss: 負責元件的樣式。
我將按照如下順序，定義一個簡單的元件。
1、編寫元件的頁面，僅僅顯示一行文字，以演示建立和編寫元件的檔案。
2、引用上一步編寫的元件，以演示如何引用自定義元件。
3、編寫元件邏輯結構，實現元件資料由 js 邏輯控制，元件內部實現響應用於操作事件。
4、提供介面用於回撥元件內部事件。
5、提供方法以便外部直接呼叫使用元件。
複製程式碼二、實現自定義元件
1、新建元件
在定好的目錄下右鍵新建一個 Component 目錄，系統會自動幫助我們建立好自定義元件的四個必要檔案，步驟與結果如圖一、二所示。
下面我們來編寫元件 wxml 檔案內容。
// test-component.wxml 的內容
<text>這是自定義元件</text>
複製程式碼元件 json 內容
如果是使用微信開發者工具建立的 component 檔案，那麼 ide 會幫助我們自動建立如下程式碼（手動的自己新增就好）：
{
"component": true,
"usingComponents": {}
}
// component 表明元件的身份。
// usingComponents 元件引用的子元件（元件是可以使用別的自定義元件的，系統元件無需宣告）
複製程式碼元件 js 內容，ide 會自動建立如下程式碼:
Component({
/**
* 元件的屬性列表
*/
properties: {
},
/**
* 元件的初始資料
*/
data: {
},
/**
* 元件的方法列表
*/
methods: {
}
})
複製程式碼元件的 wxss 我們可以暫時不用理會，就是一般的樣式程式碼。
到這裡我們的一個簡單的自定義元件就已經完成，下面進行引用。
2、使用自定義元件
使用自定義元件只需要兩步：
第一、在需要引用的頁面 json 配置程式碼中新增如下配置：
"usingComponents": {
"test-1": "/pages/component/test-component"
}
// usingComponents 為依賴元件的配置項
// test-1 為依賴元件的別名（可以隨意定），在使用頁面的佈局中使用此別名。
// /pages/component/test-component 為依賴元件的路徑（無需新增字尾）。
複製程式碼第二、在對於佈局頁面中使用，和使用系統元件一樣，上一步定的 「別名」作為標籤名。
<!-- index.wxml 檔案內容 -->
<view>
<test></test>
</view>
複製程式碼儲存重新編譯之後，頁面就出現了我們自定義元件的內容。
3、實現響應使用者操作事件
這一步將實現使用者的點選事件。在使用者點選自定義元件之後，將改變自定義元件的文字內容。
第一、捕獲自定義元件的點選事件。
自定義元件的事件處理和在一般頁面一樣，catchtap 對應的事件,然後在 js 檔案中定義好對應的處理函式。程式碼如下：
<!-- test-component.wxml 的內容 -->
<text catchtap=`onClick`>{{text}}</text>
複製程式碼// pages/component/test-component.js
Component({
/**
* 元件的初始資料
*/
data: {
text:`這是初始文字`
},
methods:{ // 方法一定要放在這個裡面
/**
* 響應用於點選的方法
*/
onClick: function (e) {
// 設定資料也是採用資料判定的方法，和一般頁面一致。
this.setData({
text: `點選了`
});
}
}
})
複製程式碼效果如下
4、在外部監聽上一步的文字改變時間。
這一部分主要的程式碼還是位於自定義元件的 js 檔案內。
第一、在自定義元件內部觸發一個元件的自定義事件，程式碼如下：
// pages/component/test-component.js
Component({
/**
* 元件的初始資料
*/
data: {
text:`這是初始文字`
},
methods:{
/**
* 響應用於點選的方法
*/
onClick: function (e) {
// 設定資料也是採用資料判定的方法，和一般頁面一致。
this.setData({
text: `點選了`
});
// 自定義一個元件觸發事件
this.triggerEvent(`onTextChange`);
}
}
})
複製程式碼第二、在引用元件的頁面(wxml)捕獲這個事件
<!-- index.xml 檔案內容 -->
<view>
<test catch:onTextChange=`onTextChange`></test>
</view>
複製程式碼第三、在引用元件頁面 js 邏輯內建立這個捕獲事件
// index.js 頁面內容
Page({
data: {
},
onLoad: function () {
},
// 捕獲事件
onTextChange: function(){
wx.showToast({
title: `捕獲事件`,
})
}
})
複製程式碼效果如下：
5、自定義元件提供給外部呼叫的方法
第一步、編寫對外提供的方法
這裡給外部提供一個改變文字內容的方法，程式碼如下：
// pages/component/test-component.js
Component({
/**
* 元件的初始資料
*/
data: {
text:`這是初始文字`
},
methods:{
/**
* 響應用於點選的方法
*/
onClick: function (e) {
// 設定資料也是採用資料判定的方法，和一般頁面一致。
this.setData({
text: `點選了`
});
// 自定義一個元件觸發事件
this.triggerEvent(`onTextChange`);
}
},
// 這個方法是給外部呼叫，用來改變這個元件的文字內容
setText: function (text) {
this.setData({
text: text
});
}
})
複製程式碼第二步、通過 id 獲取元件例項，使用元件例項直接呼叫元件方法
程式碼如下：
Page({
data: {
},
onLoad: function () {
},
// 捕獲事件
onTextChange: function(){
wx.showToast({
title: `捕獲事件`,
})
},
// 響應點選事件
change:function(e){
// 使用官方提供的 selectComponent 方法通過 id 獲取元件例項
var mComponent = this.selectComponent(`#mComponent`);
// 通過例項，直接呼叫元件內部提供的方法
mComponent.setText(`外部呼叫了`);
}
})
複製程式碼<!-- index.wxml 內容 -->
<view>
<test catch:onTextChange=`onTextChange` id=`mComponent`></test>
<button catch:tap=`change`>點選改變文字內容</button>
</view>
複製程式碼最終效果如下：