微信小程序中的常见弹框

显示加载中的提示框

• wx.showLoading()
• 当我们正在在进行网络请求时，常常就需要这个提示框

• 手动调用wx.hideLoading()方法才能够关闭这个提示框，通常在数据请求完毕时就应该关闭
• 如果一个页面中同时有多个请求，必须要等请求都完毕时才能关闭这个提示框
  • 通常我们可以设置一个变量axiosTimes=0，在每次请求数据时将这个变量加一，请求完毕时再减一，通过判断这个变量是否为0再来决定是否关闭这个提示框

// 同步发送异步代码的次数
let axiosTimes = 0
export const request = (params) => {
  axiosTimes++
  // 显示加载中效果
  wx.showLoading({
    title: '加载中',//标题名
    mask: true //遮蔽层
  })
  const baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1'

  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      url: baseUrl + params.url,
      success: (result) => {
        resolve(result.data.message)
      },
      fail: (err) => {
        reject(err)
      },
      complete: () => {
        axiosTimes--
        if (axiosTimes === 0) {
          wx.hideLoading()
        }
      }
    })
  })
}

• showLoading常用属性：

属性	类型	默认值	必填	说明
title	string		是	提示的内容
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

显示消息提示框

• wx.showToast()

• 为了让用户在操作后得到及时的反馈，通常需要这个提示框

• showToast常见属性：

属性	类型	默认值	必填	说明
title	string		是	提示的内容
icon	string	'success'	否	图标
image	string		否	自定义图标的本地路径，image 的优先级高于 icon
duration	number	1500	否	提示的延迟时间
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

• showToast默认最大只能显示7个汉字长度，但是当属性icon设置为'none'时，最大可以显示两行文字

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

显示模态对话框

• wx.showModal()

• 在用户在完成某个操作时，为防止是误触，就可以弹出这个对话框让用于做一个二次确认。或者在用户做二选一时，也可以弹出这个对话框

• showModal常见属性：

属性	类型	默认值	必填	说明
title	string		否	提示的标题
content	string		否	提示的内容
showCancel	boolean	true	否	是否显示取消按钮
cancelText	string	'取消'	否	取消按钮的文字，最多 4 个字符
cancelColor	string	#000000	否	取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
confirmText	string	'确定'	否	确认按钮的文字，最多 4 个字符
confirmColor	string	#576B95	否	确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

• 当用户点击了确定后，这个回调结果的confirm属性就为true，点击了取消，这个回调结果的cancel就为true。因此就可以根据用户点击选项的不同来进行对应的操作

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