【快速文档】我在小程序中想要给用户发送一个弹窗提醒，应该怎么做

弹窗消息

wx.showToast()

显示一个消息对话框

wx.showLoading()

显示一个等待对话框

wx.hideToast()

隐藏消息对话框

wx.hideLoading()

隐藏等待对话框

区别在于，等待消息有一个会不停旋转的图标，一看就是让人等待

消息对话框的参数

wx.showToast()

title 提示内容，必须要填

icon 图标内容

1，success 默认值，表示成功

2，error 显示失败

3，loading 实现加载

4，none 没有图标，none可以显示2行字，上边3个都是最多写7个字。

image 如果你要放置自定义图标，那么可以在这里填写本地路径

duration 提示的时间，单位毫秒，默认1500，注意，这里要用数字，而不是字符串

mask 如果设置为true，提示消息的时候，将整个屏幕用透明图层覆盖起来，可以禁止点击

success 成功回调函数

fail 失败回调函数

complete 无论成功失败回调函数

wx.hideToast()

success 成功回调函数

fail 失败回调函数

complete 完成回调函数

 一般来说，wx.hideToast()不需要用，因为时间到了，showToast()就会消失，当然，你也可以提前把它结束

消息对话框的使用

这里我们重点演示一下mask的图片蒙层是什么意思

wxml的代码如下

<view bindtap="v_t">点击确认</view>
<view>{{ n }}</view>
<view bindtap="add">点击加1</view>
<view bindtap="v_c">点击关闭</view>

js的代码如下

Page({
  data: {
    n: 0
  },
  onLoad: function (options) {

  },
  v_t(){
    wx.showToast({
      title: "点击确认按钮",
      duration: 10000
    })
  },
  v_c(){
    wx.hideToast();
  },
  add(){
    this.setData({n: this.data.n + 1})
  }
})

从这里，可以很容易看出，我们设计了3个按钮，一个是点击提示，一个是点击加1，一个是点击关闭。如果点击提示，那么就会出现弹窗信息，点击关闭，弹窗信息就会立刻没有。

但是如果，我们添加了mask: true，这样一个属性以后，整个界面就会被一层透明的图层遮挡住，此时我们无法再对界面进行操作。也就是说，按钮点击以后，将无法再点击页面上的任何东西，包括我们设计的加1和关闭提示的按钮。

等待对话框的参数

wx.showLoading()

title 需要提示的内容，必须要填

mask 透明蒙层，和showToast() 的一样

success 成功回调函数

fail 失败回调函数

complete 成功或失败回调函数

wx.hideLoading()

 success 成功回调函数

fail 失败回调函数

complete 成功或失败回调函数

从这里可以看出，等待消息框和提示消息框相比，参数更少一些，主要是由于，等待消息框不需要设置结束时间，也不用更改图标。如果你不手动hideLoading()，那么就会一直显示等待。

等待消息框演示

使用方法和提示消息框是一样的，但是必须有hideLoading()

<view bindtap="v_t">点击等待</view>

Page({
  data: {

  },
  onLoad: function (options) {

  },
  v_t(){
    wx.showLoading({
      title: "请耐心等待"
    })
  },
})

以上代码没有hideLoading()，将会造成永久提示等待，是不合适的。

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