微信小程序弹窗提示：wx.showToast、wx.showModal、wx.showLoading的使用场景与实现

1、wx.showToast

使用场景：常规的提示，没有确定和取消按钮。

例：

属性：

title：提示的内容

icon：显示的图标，合法值有success、error、loading、none

image：自定义图标的本地路径，优先级高于icon

duration：提示的延迟时间

mask：是否显示透明蒙层，防止触摸穿透

success：API调用成功后的回调函数

fail：API调用失败后的回调函数

complete：API调用结束的回调函数（无论成功与否都会执行）

实现：

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

2、wx.showModal

使用场景：一般为公告或（用户的不合理行为）提供提示，带有确定和取消按钮。

例：

属性：

title：提示的标题

content：提示的内容

showCancel：是否显示取消按钮

cancelText：取消按钮的文字，最多4个字符

cancelColor：取消按钮的文字颜色，必须是16进制格式的颜色字符串

confirmText：确认按钮的文字，最多4个字符

confirmColor：确认按钮的文字颜色，必须是16进制格式的颜色字符串

editable：是否显示输入框

placeholderText：显示输入框时的提示文本

success：接口调用成功的回调函数

fail：接口调用失败的回调函数

complete：接口调用结束的回调函数（调用成功、失败都会执行）

示例：

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

3、wx.showLoading

使用场景：用户等待时的提示

例：

属性：

title：提示的内容

mask：是否显示透明蒙层，防止触摸穿透

success：接口调用成功的回调函数

fail：接口调用失败的回调函数

complete：接口调用结束的回调函数（调用成功、失败都会执行）

示例：

wx.showLoading({
  title: '加载中',
})

setTimeout(function () {
  wx.hideLoading()
}, 2000)