微信小程序 学习笔记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,
        })
    },
})