【快速文档】如何在小程序中弹出一个对话框

对话框

wx.showModal()

弹出一个可以和用户对话的弹框

之前，我们已经做了提醒用户的消息弹窗，但是消息弹窗仅仅是弹出提醒用户，不需要用户主动与之进行交互。如果我们想主动与用户交互，让用户选择是或者否，那么就需要使用到对话框。

重要参数

title 提示框的标题

content 提示框的内容

showCancel 是否显示取消按钮，默认为true，显示取消按钮

cancelText 取消按钮上的文字，默认是取消

cancelColor 取消按钮上的文字颜色，使用16进制的颜色字符串

confirmText 确定按钮上的文字，默认是确定

confirmColor 确认按钮上的文字颜色，使用16进制的颜色字符串

editable 是否显示输入框，默认为false不显示，显示以后，用户可以输入内容

placeholderText 如果显示输入框，上边提示什么文字

success 成功回调函数

fail 失败回调函数

complete 完成回调函数

注意，回调函数中会保存用户点击了取消还是确定，或者输入了什么内容

content 如果你允许输入内容，那么内容会保存在content里面，必须用户点击确定

confirm 用户点击确定按钮

cancel 用户点击取消按钮

冲突提醒：如果你希望用户输入内容的话，请不要设置content。因为content中的内容和用户输入的内容是共享的。如果你已经设置了content，那么相当于在用户的输入框中，已经有了这么多内容了。 而且由于已经有了内容，placeholderText不会显示。另外，只有在用户点击了确认以后，才会显示content，如果用户点击了取消，那么是不显示content的。

简单使用-提示框的使用

Page({
  data: {

  },
  onLoad: function (options) {
    wx.showModal({
      title: "登陆提醒",
      content: "您当前访问的页面需要登陆",
      confirmText: "登陆",
      cancelText: "拒绝",
      confirmColor: "#ff0000",
      cancelColor: "#000000",
      success(res){
        if (res.confirm){
          wx.redirectTo({
            // 如果有一个登陆页面，地址如下
            url: '/pages/login/login',
          })
        }
        else if (res.cancel){
          wx.showToast({
            title: "未登陆禁止访问",
            icon: "error",
            mask: true
          })
        }
      }
    })
  }
})

显示一个需要登陆的弹窗，如果用户点击了登陆，那么跳转到登陆页面，如果用户点击了取消，那么则提示禁止登陆。弹窗效果应当如下图。

这段代码中，我们使用到了页面跳转和弹窗提醒，如果你看不懂相关的代码，需要先学习一下。

简单使用-输入框的使用

由于输入框用户点击取消，是得不到数据的，因此我们可以将取消按钮藏起来，只剩下确定按钮。

比如说，我们做一个能够显示用户输入内容的，wxml代码如下

<view>您刚刚输入的内容为： {{ content }}</view>

 js的代码如下

Page({
  data: {
    content: ""
  },
  onLoad: function (options) {
    let that = this;
    wx.showModal({
      title: "您想说什么",
      confirmText: "发送",
      confirmColor: "#ff0000",
      showCancel: false,
      editable: true,
      success(res){
        that.setData({content: res.content});
      }
    })
  }
})

正常的话，显示的效果应该像这样

当你输入内容结束，然后点击发送，就能看到显示结果了。不过实际上，这个样式并不算好看，我觉得，应该比较少会用到输入框。

回到小程序快速文档-吴茗