微信小程序 學習筆記5 使用WeUI組件彈出對話框.

1. 在 app.json 中填加配置

"useExtendedLib": {
  "weui": true
},

2. 在 test.json 中寫入配置

{
  "navigationBarTitleText": "測試頁面",
  "usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  }
}

3. 在 test.wxml 中寫入控件

<view class="test_button">
    <button type="default" bindtap="btn_clicked">{{btn_name}}</button>
</view>
<mp-dialog title="測試彈窗" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
  <view>測試內容</view>
</mp-dialog>

4. 在 test.js 中寫入腳本

Page({
  data: {
    btn_name: "按我!!!!!",
    dialogShow: false,
    buttons: [{text: '取消'}, {text: '確定'}],
  },
  btn_clicked() {
    this.setData({
      btn_name: "按過了.",
      dialogShow: true,
    })
  },
  tapDialogButton(e) {
        this.setData({
            dialogShow: false,
        })
    },
})