微信小程序自定義封裝組件-showModal

封裝一個組件

這里由於最近使用微信小程序居多，所以着重寫的是小程序的，但是萬變不離其宗，組件實現思路其實都差不多的

微信小程序開發中官方自帶的wx.showModal，這個彈窗
API有時候並不能滿足我們的彈窗效果，所以往往需要自定義modal組件。下面我們進行一個自定義modal彈窗組件的開發，並進行組件的引用。

 wx.showModal({
    cancelColor: 'cancelColor',
    title: '提示',
    content: '這是一個模態彈窗',
})

效果如下：

使用微信自定義modal，功能單一，樣式也不能滿足ui需求，這里自定義一個modal

我們新建在components里新建一個modal文件來封裝我們自己的自定義彈框：

index.wxml頁面

<view wx:if="{{_show}}" class='popV' catchtouchmove="move">
    <view class='popV-mask' bindtap="selectMask" animation='{{maskAnimate}}'></view>
    <!-- 動態修改top -->
    <view class='popV-content' animation='{{frameAnimate}}'>
        <view class="tap_title" wx:if="{{tabTitleShow}}">{{tapTitle}}</view>
        <view class="popV-title" wx:if="{{title}}">{{title}}</view>
        <slot wx:if="{{custom}}"></slot>
        <view class='popV-content-btm'>
            <button wx:for="{{btns}}" wx:key="index" data-index="{{index}}" class='popV-item' style="color:{{btnTextColor[index]?btnTextColor[index]:''}};" hover-class='popV-hover' bindtap='selectBtn'>
                {{item}}
            </button>
        </view>
    </view>
</view>

這里由於動效展示，使用了animation動畫，大家也可以用這個api來實現想要的效果，如果想要更好的效果其實也可以通過設置參數來實現更好的彈框效果展示，這里不做更多的展示，喜歡的可以自己優化

組件相關參數

參數名	含義
_show	彈框是否展示（Boolean類型）
tapTitle	頂部提示標題（string）
tabTitleShow	頂部提示標題 是否展示（Boolean類型）
title	提示文字（string）
btns	底部按鈕（array）
btnTextColor	底部文字顏色（array）
custom	是否自定義插糟（Boolean類型）

然后，我們在需要的地方，index.json中引入組件

 "usingComponents": {
    "modal":"./common/index"
  }

1.簡單封裝組件

在自己要使用的組件使用：

<modal show="true" title="這是一個彈框" btns="{{['取消','確定']}}" binddidClickBtn="onClickModalBtn"></modal>

如下圖就實現了彈框展示效果：

這里我們直接把組件的props show寫死了，所以直接展示，我們可以通過動態數組來實現展示隱藏，

我們看看效果：

這里可以看到大部分效果已經實現，這里我們對最外層的view做了一個catchtouchmove方法，用來組織冒泡

接下來就是對底部按鈕的處理：

 // 選中底部的按鈕
selectBtn: function (e) {
    let index = e.currentTarget.dataset.index;
    this.triggerEvent('didClickBtn', index); // 外面通過e.detail獲取index的值
},

我們讓組件設置一個triggerEvent事件，讓父組件接受這個事件，使得調用該組件的組件能夠處理底部按鈕點擊對應的事件

// wxml
<modal show="{{modalShow}}" title="這是一個彈框" btns="{{['取消','確定']}}" binddidClickBtn="onClickModalBtn"></modal>
// js
  //底部按鈕點擊
onClickModalBtn(e){
    console.log(e);
    if(e.detail == 0){
        console.log('關閉事件');
    }else{
        console.log('確定事件');
    }
}

這里我們只對兩個按鈕的做處理，如果對應的多個組件可以自定義封裝，由於沒有做到多個按鈕的需求，底部按鈕只做兩個：

我們看看效果:

這樣我們就實現了對Modal的簡單封裝，你想要在那個文件使用，在json引入就可以。

2.優化封裝

但是有一個問題就是，每次想要彈窗都需要創建一個modal，然后在里面寫入相關的參數，也是有點小麻煩的。

我們可以把參數抽出來，寫在函數里面，實現像微信小程序一樣的寫法，具體可以 參考 wx.showModal(Object object)

wx.showModal({
  title: '提示',
  content: '這是一個模態彈窗',
  success (res) {
    if (res.confirm) {
      console.log('用戶點擊確定')
    } else if (res.cancel) {
      console.log('用戶點擊取消')
    }
  }
})

這樣子寫起來着實方便，快捷，易懂，我們對現有代碼進行封裝，把相關參數抽離到一個函數中：

 showModal: function (params) {
    let {cuccess,error} = this
    this.setData({
    show: !this.data.show,
    title: params.title,
    tabTitleShow:params.tabTitleShow,
    success: params.success || function () { },
    error: params.error || function () { },
    })
},
// 選中底部的按鈕
selectBtn: function (e) {
    let index = e.currentTarget.dataset.index;
    this.triggerEvent('didClickBtn', index); // 外面通過e.detail獲取index的值
    if (index == 0) {
    this.setData({
        show: false
    }, () => {
        this.data.error()
    })
    } else {
    this.setData({
        show: false
    }, () => {
        this.data.success()
    })
    }
},

這里把所有參數放到了showModal方法里，然后點擊取消確定時關閉彈框並且觸發成功失敗方法，在調用組件時可以在success、error回調中做相應的方法

我們在調用組件的位置調用showModal:
由於是獲取組件里的方法，所以我們需要先獲取組件

// show  調用
this.modal = this.selectComponent("#modal")
onClick4() {
    this.modal.showModal({
      show: true,
      title: '函數調用',
      tabTitleShow: false,
      success :(res) => {
        wx.showToast({
          icon:"success",
          title: '確定按鈕點擊',
        })
      },
      error: () => {
        wx.showToast({
          icon:'error',
          title: '取消按鈕點擊',
        })
      },
    }) 
  },

我們看看效果：

這里已經實現了函數調用組件

3.將組件全局化

但是每個組件都得重新獲取組件，然后才能調用方法，這個也很麻煩，我們可以全局實例化這個方法，在app.js把這個方法掛載：

//app.js

showModal(that,options){
    that.selectComponent('#modal').showModal(options);
  }
// 組件調用
const app = getApp()
app.showModal(this,{
    show: true,
    title: '函數調用',
    tabTitleShow: false,
    success :(res) => {
    wx.showToast({
        icon:"success",
        title: '確定按鈕點擊',
    })
    },
    error: () => {
    wx.showToast({
        icon:'error',
        title: '取消按鈕點擊',
    })
  },
}) 

這樣子，全局組件就封裝好了，調用效果和上面函數調用效果一樣，這里我只把我常用的參數和方法進行了封裝，大家也可以根據自己產品對封裝組件進行很多函數。參數的封裝。

微信小程序的彈框已經大概實現，其實vue、react也大致相同。可以參考封裝一個，這里不做解釋.

這里附上相關代碼，希望能幫助大家：

微信小程序自定義modal 代碼 》》》 自定義modal

其他作品也希望大佬多多指點

碼字不易，希望大佬多多指點！