微信小程序中的消息提示框主要分為以下幾種：
1. wx.showToast(Object object)
-
功能：?顯示消息提示框，一般用于顯示操作結果、狀態等。
-
特點：?提示框顯示在屏幕中間，持續一段時間后自動消失（默認1.5秒）。
-
屬性：
title?(String)：提示的內容，長度限制為 7 個漢字/14 個英文數字。 (必須）icon?(String)：圖標，有效值有?success,?loading,?none。 默認值為?success。image?(String)：自定義圖標的本地路徑，image 的優先級高于 icon。duration?(Number)：提示的延遲時間，單位毫秒。 默認值為 1500, 最大值為 10000。mask?(Boolean)：是否顯示透明蒙層，防止觸摸穿透，mask 為 true 時即使設置了 duration 也不會自動消失。 默認為 false。success?(Function)：接口調用成功的回調函數。fail?(Function)：接口調用失敗的回調函數。complete?(Function)：接口調用結束的回調函數（調用成功、失敗都會執行）。
示例：
<button bindtap="showSuccessToast">成功提示</button>
<button bindtap="showLoadingToast">加載中提示</button>
<button bindtap="showNoneToast">無圖標提示</button>
<button bindtap="showCustomImageToast">自定義圖片提示</button>Page({showSuccessToast: function() {wx.showToast({title: '操作成功',icon: 'success',duration: 2000})},showLoadingToast: function() {wx.showToast({title: '加載中',icon: 'loading',duration: 2000})},showNoneToast: function() {wx.showToast({title: '提示信息',icon: 'none',duration: 2000})},showCustomImageToast: function() {wx.showToast({title: '提示信息',image: '/images/custom.png', // 替換為你的圖片路徑duration: 2000})}
})
-
注意：
icon: 'loading'?一般用于ajax請求中，頁面等待。mask: true?時，提示框不會自動消失，通常需要手動隱藏，例如使用?wx.hideToast()。
2. wx.showModal(Object object)
-
功能：?顯示模態對話框，用于需要用戶確認或進行選擇的場景。
-
特點：?模態對話框會遮蓋住整個屏幕，用戶需要點擊確定或取消按鈕才能關閉。
-
屬性：
title?(String)：提示的標題。 （必須）content?(String)：提示的內容。 （必須）showCancel?(Boolean)：是否顯示取消按鈕，默認為 true。cancelText?(String)：取消按鈕的文字，默認為"取消"。cancelColor?(String)：取消按鈕的文字顏色，默認為"#000000"。confirmText?(String)：確定按鈕的文字，默認為"確定"。confirmColor?(String)：確定按鈕的文字顏色，默認為"#3CC51F"。success?(Function)：接口調用成功的回調函數。 Result 包含?confirm（用戶點擊了確定按鈕）和?cancel（用戶點擊了取消按鈕）fail?(Function)：接口調用失敗的回調函數。complete?(Function)：接口調用結束的回調函數（調用成功、失敗都會執行）。
-
示例：
<button bindtap="showConfirmationModal">確認對話框</button>Page({showConfirmationModal: function() {wx.showModal({title: '確認操作',content: '您確定要進行該操作嗎？',success (res) {if (res.confirm) {console.log('用戶點擊確定')} else if (res.cancel) {console.log('用戶點擊取消')}}})}
})3. wx.showLoading(Object object)
-
功能：?顯示 loading 提示框，一般用于在數據加載或處理時，提供用戶等待反饋。
-
特點：?與?
wx.showToast({icon: 'loading'})?類似，但可以手動控制隱藏。 -
屬性：
title?(String)：提示的內容，長度限制為 7 個漢字/14 個英文數字。 (必須）mask?(Boolean)：是否顯示透明蒙層，防止觸摸穿透。 默認為 false。success?(Function)：接口調用成功的回調函數。fail?(Function)：接口調用失敗的回調函數。complete?(Function)：接口調用結束的回調函數（調用成功、失敗都會執行）。
-
示例：
<button bindtap="startLoading">開始加載</button>Page({startLoading: function() {wx.showLoading({title: '加載中',mask: true})setTimeout(function() {wx.hideLoading() // 2秒后隱藏 loading}, 2000)}
})4. wx.hideToast()
- 功能：?隱藏消息提示框 (與?
wx.showToast?配套使用，尤其在?mask: true?的情況下) - 屬性：?無
5. wx.hideLoading()
- 功能：?隱藏 loading 提示框 (與?
wx.showLoading?配套使用) - 屬性：?無
選擇哪種消息提示框？
- wx.showToast：?用于簡單的結果反饋，例如操作成功、操作失敗、加載完成等。
- wx.showModal：?用于需要用戶確認或選擇的場景，例如刪除確認、退出登錄等。
- wx.showLoading：?用于數據加載或處理時，提供用戶等待反饋。
最佳實踐建議：
- 避免過度使用：?過多的提示框會影響用戶體驗。
- 簡潔明了：?提示內容應該簡潔明了，讓用戶快速理解。
- 適當的延遲時間：?
wx.showToast?的延遲時間應該根據提示內容的長度進行調整。 - 錯誤處理：?在異步操作中，務必對錯誤情況進行處理，并給出相應的提示。
- 自定義樣式：?雖然小程序沒有提供直接修改?
wx.showToast?和?wx.showModal?樣式的 API，但是可以考慮使用自定義組件來模擬實現，以便更好地控制樣式和交互體驗。 這需要一定的開發成本。
總而言之，理解這幾種消息提示框的功能和屬性，并根據實際情況選擇合適的提示方式，可以有效地提升小程序的用戶體驗。
