前言：做小程式經常會遇到彈框提示，大家應該首選wx.showModal，標題、內容、button內容和顏色都可以自己定義，可以說是滿足90%的dialog需求。但是，只支援文字內容，沒辦法插入圖片素材。

先來看看wx.showModal的用法：

wx.showModal({
  title: '溫馨提示',
  content: '提示內容。。。',
  confirmText: '確定',
  confirmColor: '#1677d2', 
  cancelText: '取消',
  cancelColor: '#999',
  success: function (res) {
    if (res.confirm) {
      console.log('使用者點選確定按鈕');
    } else if (res.cancel) {
      console.log('使用者點選取消按鈕');
    }
  }
})
 

詳細API，請檢視：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowmodalobject

API中確實沒有插入圖片素材的引數，因此，只能自己來現實一個圖文的modal了~

wxml:

<!-- 圖文彈框 -->
<view class='modal-image-text' wx:if="{{modal.isShow}}">
  <view class='modal-mask' bindtap='{{!buttonClicked? "modalClick":""}}'></view>
  <view class='modal-content'>
    <view class='modal-header'>{{modal.title}}</view>
    <view class='modal-body'>
      <view>{{modal.desc}}</view>
      <image src='{{modal.src}}' mode='widthFix' />
    </view>
    <view class='modal-footer'>
      <view class='modal-btn modal-cancel width50' bindtap='{{!buttonClicked? "modalClick":""}}' data-id='0' wx:if="{{modal.cancel}}">{{modal.cancel}}</view>
      <view class='modal-btn modal-ok {{modal.cancel?"width50":""}}' bindtap='{{!buttonClicked? "modalClick":""}}' data-id='1'>{{modal.ok}}</view>
    </view>
  </view>
</view>
 

js:

modal: {
  isShow: false,  // 圖文彈框是否顯示
  title: '提示',   // 標題
  desc: '提示內容',  // 內容
  src: '',         // 圖片地址，必填，如果沒有圖片，請直接使用wx.showModal
  ok: '確定',       // 確定按鈕文字
  cancel: '',      // 取消按鈕文字
}

CSS的程式碼，這裡省略了，JS直接控制modal.isShow就可以讓彈框顯示或者隱藏了~如果你覺得不夠酷炫，可以自己新增CSS動畫效果。

效果截圖如下：

發現個問題：彈出框後，頁面仍然可以滑動。如果你不想讓頁面滑動，可以新增事件catchtouchmove，這樣就會預設阻止事件向上冒泡了，上層view的滑動就不生效了，程式碼：

<view class='modal-image-text' wx:if="{{modal.isShow}}" catchtouchmove="move">

move: function (e) {
  console.log(222333);    // catch繫結的事件不會向上冒泡
},

後續有時間，我再把上面程式碼整理成元件，今天就分享到這兒~