手把手教你實(shí)現(xiàn)微信小程序中的自定義組件

微信小程序中的組件

前言

之前做小程序開發(fā)的時(shí)候，對(duì)于開發(fā)來(lái)說(shuō)比較頭疼的莫過(guò)于自定義組件了，當(dāng)時(shí)官方對(duì)這方面的文檔也只是寥寥幾句，一筆帶過(guò)而已，所以寫起來(lái)真的是非常非常痛苦??！

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

本篇文章就是手把手教你實(shí)現(xiàn)小程序中自定義組件，坐穩(wěn)啦~

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

要做自定義組件，我們先定一個(gè)小目標(biāo)，比如說(shuō)我們?cè)谛〕绦蛑袑?shí)現(xiàn)一下 WEUI 中的彈窗組件，基本效果圖如下。

WEUI彈框

Step1

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

項(xiàng)目結(jié)構(gòu)

Step2

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

{
  "component": true,        // 自定義組件聲明
  "usingComponents": {}     // 可選項(xiàng)，用于引用別的組件
}

其次，我們需要在 dialog.wxml 文件中編寫彈窗組件模版，在 dialog.wxss 文件中加入彈窗組件樣式，它們的寫法與頁(yè)面的寫法類似，我就不贅述，直接貼代碼啦~

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>

dialog.wxss 文件如下：

/* components/Dialog/dialog.wxss */
.wx-mask{
  position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}
.wx-dialog{
    position: fixed;
    z-index: 5000;
    width: 80%;
    max-width: 600rpx;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
}
.wx-dialog-title{
    font-size: 18px;
    padding: 15px 15px 5px;
}
.wx-dialog-content{
    padding: 15px 15px 5px;
    min-height: 40px;
    font-size: 16px;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-all;
    color: #999999;
}
.wx-dialog-footer{
    display: flex;
    align-items: center;
    position: relative;
    line-height: 45px;
    font-size: 17px;
}
.wx-dialog-footer::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D5D5D6;
    color: #D5D5D6;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.wx-dialog-btn{
    display: block;
    -webkit-flex: 1;
    flex: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: relative;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(1){
    color: #353535;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(2){
    color: #3CC51F;
}
.wx-dialog-footer .wx-dialog-btn:nth-of-type(2):after{
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-left: 1px solid #D5D5D6;
    color: #D5D5D6;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

step3

組件的結(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í)可以用來(lái)指定自定義組件的屬性、數(shù)據(jù)、方法等，具體的細(xì)節(jié)可以參考一下官方的文檔

下面我通過(guò)代碼注釋解釋一下構(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ù)的方法與更新頁(yè)面數(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");
    }
  }
})

step4

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

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

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

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

<!--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è)也很簡(jiǎn)單，我就復(fù)制粘貼了

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()

Page({

  /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
 */
  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();
  }

})

到此！大功告成！

step5

讓我們測(cè)試一下試試看：

初始化

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

彈窗出現(xiàn)

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

點(diǎn)擊取消
點(diǎn)擊確定

總結(jié)

現(xiàn)在，你已經(jīng)基本掌握了小程序中的自定義組件開發(fā)技巧，怎么樣，是不是很棒，應(yīng)該給自己點(diǎn)個(gè)贊，打個(gè)call。
總體來(lái)說(shuō)，小程序推出自定義組件后，感覺方便了很多，還沒有 get 的小伙伴們，趕緊學(xué)習(xí)學(xué)習(xí)，以后多用組件化開發(fā)，就不會(huì)那么難受了，加油哦~

具體代碼，我已經(jīng)托管到 github 上了，歡迎 issue~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容