微信小程序弹出对话框

    在很多应用中，对话框是不可避免的，那么如何在微信小程序里面弹出一个对话框呢，请看下文：

第一种方法：

1.在wxml文件中编写布局：

<view>
  <button bindtap="bindViewTap">点击弹出对话框</button>
  <view >
    <modal title="对话框" hidden="{{modalHidden}}" confirm-text="确定"
    cancel-text="取消" bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">
      您好，我是modal对话框
    </modal>
  </view>
</view>

2.在js文件实现对话框的隐藏和显示

//获取应用实例
var app = getApp()
Page({
  data: {
    modalHidden:true,//是否隐藏对话框
  },
  //事件处理函数
  bindViewTap: function() {
    this.setData({
      modalHidden:!this.data.modalHidden
    })
    
  },
  //确定按钮点击事件
  modalBindaconfirm:function(){
    this.setData({
      modalHidden:!this.data.modalHidden,
    })
  },
  //取消按钮点击事件
  modalBindcancel:function(){
    this.setData({
      modalHidden:!this.data.modalHidden,
    })
  },
  
})

3.效果图如下：

第二种方法：直接调用微信小程序的api

wx.showModal({
        title:'提示',
        content:'这是一个示例弹窗',
        success:function(res){
          console.log(res)
          if(res.confirm){
            console.log('用户点击了确定')
          }else {
            console.log('用户点击了取消')
          }
        }
      })