微信小程序中的常見彈框

顯示加載中的提示框

• 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('用戶點擊取消')
    }
  }
})