簡單-定義一個小程式元件
當微信官方提供的元件,不能滿足我們的需求時,且使用系統元件構造模板 wxml 較為複雜,我們就可以考慮使用微信官方提供的元件架構,定義符合我們需求的元件。
2. 自定義元件組成
自定義的組成和小程式的一般頁面的結構一樣。由: js\json\wxml\wxss
四個檔案構成,其中:
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> 複製程式碼
最終效果如下:
