之前做小程序開發的時候，對於開發來說比較頭疼的莫過於自定義組件了，當時官方對這方面的文檔也只是寥寥幾句，一筆帶過而已，所以寫起來真的是非常非常痛苦。
好在微信小程序的庫從 1.6.3 開始，官方對於自定義組件這一塊有了比較大的變動，最直觀的感覺就是文檔比以前全多了。
還有就是，現在小程序支持簡潔的組件化編程，可以將頁面內的功能模塊抽象成自定義組件，以便在不同的頁面中複用，提高自己代碼的可讀性，降低自己維護代碼的成本。
本篇文章就是手把手教你實現小程序中自定義組件，坐穩啦~
要做自定義組件，我們先定一個小目標，比如說我們在小程序中實現一下 WeUI 中的彈窗組件，基本效果圖如下。
今天我們的目的是實現一個彈框組件，因此，我們需要創建一個空白項目，並在 components 組件中新建一個 Dialog 文件夾來存放我們的彈窗組件。
在 Dialog 下，右擊新建 Component 元素，並命名爲 dialog 後，會生成對應的
JSON、WXML、WXSS 和 JS 4 個文件，也就是一個自定義組件的組成部分，此時你的項目結構應該如下圖所示：
組件初始化工作準備完成，接下來就是組件的相關配置，首先我們需要聲明自定義組件，也就是將 dialog.json 中 component 字段設爲 true ：
{
"component": true, // 自定義組件聲明
"usingComponents": {} // 可選項，用於引用別的組件
}
其次，我們需要在 dialog.wxml 文件中編寫彈窗組件模版，在 dialog.wxss 文件中加入彈窗組件樣式，它們的寫法與頁面的寫法類似，我就不贅述，直接貼代碼啦~
dialog.wxml 文件如下：
<!--components/Dialog/dialog.wxml-->
<view class='wx_dialog_container' hidden="{{!isShow}}">
<view class='wx-mask'></view>
<view class='wx-dialog'>
<view class='wx-dialog-title'>{{ title }}</view>
<view class='wx-dialog-content'>{{ content }}</view>
<view class='wx-dialog-footer'>
<view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view>
<view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view>
</view>
</view>
</view>組件的結構和樣式都有了，還缺少什麼呢，沒錯，還缺 JavaScript 代碼。
眼睛比較犀利的同學，可能已經發現了我們在 dialog.wxml 文件中的會有一些比如 {{ isShow }}、{{ title }} 這樣的模版變量，還定義了 _cancelEvent 和 _confirmEvent 兩個方法，其具體實現就是在 dialog.js 中。
dialog.js 是自定義組件的構造器，是使用小程序中 Component 構造器生成的，調用 Component 構造器時可以用來指定自定義組件的屬性、數據、方法等，具體的細節可以參考一下官方的文檔
下面我通過代碼註釋解釋一下構造器中的一些屬性的使用：
// components/Dialog/dialog.js
Component({
options: {
multipleSlots: true // 在組件定義時的選項中啓用多slot支持
},
/**
* 組件的屬性列表
* 用於組件自定義設置
*/
properties: {
// 彈窗標題
title: { // 屬性名
type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
value: '標題' // 屬性初始值（可選），如果未指定則會根據類型選擇一個
},
// 彈窗內容
content: {
type: String,
value: '彈窗內容'
},
// 彈窗取消按鈕文字
cancelText: {
type: String,
value: '取消'
},
// 彈窗確認按鈕文字
confirmText: {
type: String,
value: '確定'
}
},
/**
* 私有數據,組件的初始數據
* 可用於模版渲染
*/
data: {
// 彈窗顯示控制
isShow: false
},
/**
* 組件的方法列表
* 更新屬性和數據的方法與更新頁面數據的方法類似
*/
methods: {
/*
* 公有方法
*/
//隱藏彈框
hideDialog() {
this.setData({
isShow: !this.data.isShow
})
},
//展示彈框
showDialog() {
this.setData({
isShow: !this.data.isShow
})
},
/*
* 內部私有方法建議以下劃線開頭
* triggerEvent 用於觸發事件
*/
_cancelEvent() {
//觸發取消回調
this.triggerEvent("cancelEvent")
},
_confirmEvent() {
//觸發成功回調
this.triggerEvent("confirmEvent");
}
}
})
到現在，你應該完成了一個自定義彈窗組件的大部分代碼，可是你保存後並沒有發現任何變化。因爲我們還需要在 index.wxml 文件中引入它。
首先需要在 index.json 中引入組件：
{
"usingComponents": {
"dialog": "/components/Dialog/dialog"
}
}然後我們在 index.wxml 中引入它，並增加我們自定義的一些值，如下。
<!--index.wxml-->
<view class="container">
<dialog id='dialog'
title='我是標題'
content='恭喜你，學會了小程序組件'
cancelText='知道了'
confirm='謝謝你'
bind:cancelEvent="_cancelEvent"
bind:confirmEvent="_confirmEvent">
</dialog>
<button type="primary" bindtap="showDialog"> ClickMe! </button>
</view>
嗯哪，還差最後一步，index.js 配置，沒錯，這個也很簡單，我就複製粘貼了。
//index.js
//獲取應用實例
const app = getApp()
Page({
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
//獲得dialog組件
this.dialog = this.selectComponent("#dialog");
},
showDialog() {
this.dialog.showDialog();
},
//取消事件
_cancelEvent() {
console.log('你點擊了取消');
this.dialog.hideDialog();
},
//確認事件
_confirmEvent() {
console.log('你點擊了確定');
this.dialog.hideDialog();
}
})到此，大功告成！讓我們測試一下：
點擊取消或者確定按鈕的話，我們在事件中設置了彈窗會關閉，並會打印出相應的信息，具體點擊完應該怎麼做，就看你們自己發揮了，我只能幫你到這裏了~
現在，你已經基本掌握了小程序中的自定義組件開發技巧，怎麼樣，是不是很棒，應該給自己點個贊，打個call。
總體來說，小程序推出自定義組件後，感覺方便了很多，還沒有 get 的小夥伴們，趕緊學習學習，以後多用組件化開發，就不會那麼難受了，加油哦~
具體代碼，我已經託管到 github 上了，歡迎 issue~
https://juejin.im/post/5a3110756fb9a0451b048b72
轉自：https://minapp.com/article/17526/