效果圖

js程式碼

openConfirm: function () {

    wx.showModal({

      title: '彈窗標題',

      content: '彈窗內容，告知當前狀態、資訊和解決方法，描述文字儘量控制在三行內',

      confirmText: "主操作",

      cancelText: "輔助操作",

      success: function (res) {

        console.log(res);

        if (res.confirm) {

          console.log('使用者點選主操作')

        } else {

          console.log('使用者點選輔助操作')

        }

      }

    });

  },

  openAlert: function () {

    wx.showModal({

      content: '彈窗內容，告知當前狀態、資訊和解決方法，描述文字儘量控制在三行內',

      showCancel: false,

      success: function (res) {

        if (res.confirm) {

          console.log('使用者點選確定')

        }

      }

    });

  },
 

wxml程式碼

<view class="page">

  <view class="page__hd">

    <view class="page__title">Dialog</view>

    <view class="page__desc">對話方塊，採用小程式原生的modal</view>

  </view>

  <view class="page__bd">

    <view class="weui-btn-area">

      <button class="weui-btn" type="default" bindtap="openConfirm">Confirm Dialog</button>

      <button class="weui-btn" type="default" bindtap="openAlert">Alert Dialog</button>

    </view>

  </view>

</view>
 

歡迎大家學習我的視訊教程：微信小程式-WeUI介面佈局設計入門到精通