官方從 1.6.3 開始對(duì)于自定義組件這一塊有了比較大的變動(dòng)，首先比較明顯的感覺就是文檔比以前全多了，有木有！，現(xiàn)在小程序支持簡潔的組件化編程，可以將頁面內(nèi)的功能模塊抽象成自定義組件，以便在不同的頁面中復(fù)用，提高自己代碼的可讀性，降低自己維護(hù)代碼的成本！

　　接下來，就開始我們的學(xué)習(xí)吧！

一.具體實(shí)現(xiàn)

　　要做自定義組件，我們先定一個(gè)小目標(biāo)，比如說我們?cè)谛〕绦蛑袑?shí)現(xiàn)一下 通過wx.showModel調(diào)用中的所展示彈窗組件，基本效果圖如下。

步驟一

　　我們初始化一個(gè)小程序，刪掉里面的示例代碼(或者新建一個(gè)文件)，并新建一個(gè)components文件夾，用于存放我們以后開發(fā)中的所用組件，今天我們的目的是實(shí)現(xiàn)一個(gè) 彈框 組件，因此，我們?cè)赾omponents組件中新建一個(gè)Dialog文件夾來存放我們的彈窗組件，在Dialog下右擊新建?Component并命名為dialog后，會(huì)生成對(duì)應(yīng)的json wxml wxss js?4個(gè)文件，也就是一個(gè)自定義組件的組成部分，此時(shí)你的項(xiàng)目結(jié)構(gòu)應(yīng)該如下圖所示：

?

?

步驟二

　　組件初始化工作準(zhǔn)備完成，接下來就是組件的相關(guān)配置，首先我們需要聲明自定義組件，也就是將dialog.json中component字段設(shè)為true：

{"component": true, // 自定義組件什么"usingComponents": {} // 可選項(xiàng)，用于引用其他組件 }

　　其次，我們需要在dialog.wxml文件中編寫彈窗組件模版，在dialog.wxss文件中加入彈窗組件樣式

?dialog.wxss 文件如下：

/* components/Dialog/dialog.wxss */.wx_dialog_container{z-index: 100;display: flex;justify-content: center;align-items: center;flex-direction: column;width: 100%;position: fixed;bottom: 0;top: 0;left: 0;background:rgba(0, 0, 0, 0.4); }.wx-dialog{width: 300px;height: auto;background: #fff;border-radius: 2px; }.wx-dialog-title{display: flex;justify-content: center;align-items: center;padding: 30rpx 20px; }.wx-dialog-content{display: flex;justify-content: center;align-items: center;font-size: 34rpx;color: #96959A;padding: 0 20px;margin-bottom: 20px; }.wx-dialog-footer{display: flex;justify-content: space-around;border-top: 1rpx solid #EEEBEE; }.wx-dialog-btn{flex: 1;height: 40px;display: flex;justify-content: center;align-items: center;font-size: 32rpx; }.wx-dialog-btn:last-child{border-left: 1rpx solid #EEEBEE;color: #71C46A; }

?

　　它們的寫法與頁面的寫法類似，我就不贅述，直接貼代碼啦~

?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>

　　

步驟三

　　組件的結(jié)構(gòu)和樣式都有了，還缺少什么呢，沒錯(cuò)，還缺?js?， 眼睛比較犀利的同學(xué)，可能已經(jīng)發(fā)現(xiàn)了我們?cè)?dialog.wxml?文件中的會(huì)有一些比如?{{ isShow }}?、?{{ title }}?這樣的模版變量，還定義了?_cancelEvent?和?_confirmEvent?兩個(gè)方法，其具體實(shí)現(xiàn)就是在?dialog.js?中。

　　dialog.js?是自定義組件的構(gòu)造器，是使用小程序中?Component?構(gòu)造器生成的，調(diào)用?Component?構(gòu)造器時(shí)可以用來指定自定義組件的屬性、數(shù)據(jù)、方法等，具體的細(xì)節(jié)可以參考一下官方的文檔。

　　下面我通過代碼注釋解釋一下構(gòu)造器中的一些屬性的使用：

?

// components/Dialog/dialog.js Component({options: {multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持 },/*** 組件的屬性列表* 用于組件自定義設(shè)置*/properties: { // 彈窗標(biāo)題title: { // 屬性名type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）value: '標(biāo)題' // 屬性初始值（可選），如果未指定則會(huì)根據(jù)類型選擇一個(gè)}, // 彈窗內(nèi)容 content: {type: String,value: '彈窗內(nèi)容'}, // 彈窗取消按鈕文字 cancelText: {type: String,value: '取消'}, // 彈窗確認(rèn)按鈕文字 confirmText: {type: String,value: '確定'}}, /*** 私有數(shù)據(jù),組件的初始數(shù)據(jù)* 可用于模版渲染*/data: { // 彈窗顯示控制isShow: false}, /*** 組件的方法列表* 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似*/methods: {/** 公有方法*///隱藏彈框 hideDialog() {this.setData({isShow: !this.data.isShow})}, //展示彈框 showDialog() {this.setData({isShow: !this.data.isShow})}, /** 內(nèi)部私有方法建議以下劃線開頭* triggerEvent 用于觸發(fā)事件*/_cancelEvent() { //觸發(fā)取消回調(diào)this.triggerEvent("cancelEvent")},_confirmEvent() { //觸發(fā)成功回調(diào)this.triggerEvent("confirmEvent");}} })

?

?

?

步驟四

　　截至目前為止，你應(yīng)該完成了一個(gè)自定義彈窗組件的大部分，可是你保存后并沒有發(fā)現(xiàn)任何變化，因?yàn)槲覀冞€需要在?index.wxml?文件中引入它！

　　首先需要在?index.json?中引入組件

{"usingComponents": {"dialog": "/components/Dialog/dialog"} }

　　然后我們?cè)?/span>?index.wxml?中引入它，并增加我們自定義的一些值，如下

<view class="container"><dialog id='dialog' title='我是標(biāo)題' content='恭喜你，學(xué)會(huì)了小程序組件' cancelText='知道了' confirm='謝謝你'bind:cancelEvent="_cancelEvent" bind:confirmEvent="_confirmEvent"></dialog><button type="primary" bindtap="showDialog"> ClickMe! </button> </view>

　　嗯哪，還差最后一步，?index.js?配置，沒錯(cuò)，這個(gè)也很簡單，我就復(fù)制粘貼了

//index.js//獲取應(yīng)用實(shí)例 const app = getApp()Page({ /*** 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成*/onReady: function () { //獲得dialog組件this.dialog = this.selectComponent("#dialog");},showDialog() {this.dialog.showDialog();}, //取消事件 _cancelEvent() {console.log('你點(diǎn)擊了取消');this.dialog.hideDialog();}, //確認(rèn)事件 _confirmEvent() {console.log('你點(diǎn)擊了確定');this.dialog.hideDialog();}})

步驟五

　　到此！大功告成！

　　讓我們測試一下試試看：

?

　　點(diǎn)擊按鈕之后呢，會(huì)出現(xiàn)如下效果：?

?

?

?

　　點(diǎn)擊取消或者確定按鈕的話，我們?cè)谑录性O(shè)置了彈窗會(huì)關(guān)閉，并會(huì)打印出相應(yīng)的信息，具體點(diǎn)擊完應(yīng)該怎么做，就看你們自己發(fā)揮了，我只能幫你到這里了~

總結(jié)

　　現(xiàn)在，你已經(jīng)基本掌握了小程序中的自定義組件開發(fā)技巧，組件在開發(fā)中還是很常見的，小程序一樣可以模仿三大框架進(jìn)行對(duì)應(yīng)的組件開發(fā)，方便能夠快速開發(fā)，以及減少開發(fā)的中復(fù)用的麻煩。

?

轉(zhuǎn)載：http://www.wxapp-union.com/article-3415-1.html

轉(zhuǎn)載于:https://www.cnblogs.com/tyusBlog/p/9724808.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序自定义组件实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。