微信小程序API交互反饋,wx.showToast顯示消息提示框
2020-09-27
導(dǎo)讀:wx.showToast(OBJECT) 顯示消息提示框。 OBJECT參數(shù)說明: 參數(shù) 類型 必填 說明 最低版本 title String 是 提示的內(nèi)容 icon String 否 圖標(biāo),有效值"success"、"loading" image String 否 自定義圖標(biāo)的本地路...
wx.showToast(OBJECT)
顯示消息提示框。
OBJECT參數(shù)說明:
參數(shù) | 類型 | 必填 | 說明 | 最低版本 |
---|---|---|---|---|
title | String | 是 | 提示的內(nèi)容 | |
icon | String | 否 | 圖標(biāo),有效值"success"、"loading" | |
image | String | 否 | 自定義圖標(biāo)的本地路徑,image 的優(yōu)先級高于 icon | 1.1.0 |
duration | Number | 否 | 提示的延遲時間,單位毫秒,默認(rèn):1500 | |
mask | Boolean | 否 | 是否顯示透明蒙層,防止觸摸穿透,默認(rèn):false | |
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
示例代碼:
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
wx.showLoading(OBJECT)
基礎(chǔ)庫版本 1.1.0 開始支持,低版本需做兼容處理
顯示 loading 提示框, 需主動調(diào)用 wx.hideLoading 才能關(guān)閉提示框
OBJECT參數(shù)說明:
參數(shù) | 類型 | 必填 | 說明 |
---|---|---|---|
title | String | 是 | 提示的內(nèi)容 |
mask | Boolean | 否 | 是否顯示透明蒙層,防止觸摸穿透,默認(rèn):false |
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
wx.hideToast()
隱藏消息提示框
wx.hideLoading()
基礎(chǔ)庫版本 1.1.0 開始支持,低版本需做兼容處理
隱藏loading提示框
wx.showLoading({
title: '加載中',
})
setTimeout(function(){
wx.hideLoading()
},2000)
wx.showModal(OBJECT)
?顯示模態(tài)彈窗
OBJECT參數(shù)說明:
參數(shù) | 類型 | 必填 | 說明 |
---|---|---|---|
title | String | 是 | 提示的標(biāo)題 |
content | String | 是 | 提示的內(nèi)容 |
showCancel | Boolean | 否 | 是否顯示取消按鈕,默認(rèn)為 true |
cancelText | String | 否 | 取消按鈕的文字,默認(rèn)為"取消",最多 4 個字符 |
cancelColor | HexColor | 否 | 取消按鈕的文字顏色,默認(rèn)為"#000000" |
confirmText | String | 否 | 確定按鈕的文字,默認(rèn)為"確定",最多 4 個字符 |
confirmColor | HexColor | 否 | 確定按鈕的文字顏色,默認(rèn)為"#3CC51F" |
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
succes返回參數(shù)說明:
參數(shù) | 類型 | 說明 | 最低版本 |
---|---|---|---|
confirm | Boolean | 為 true 時,表示用戶點擊了確定按鈕 | |
cancel | Boolean | 為 true 時,表示用戶點擊了取消(用于 Android 系統(tǒng)區(qū)分點擊蒙層關(guān)閉還是點擊取消按鈕關(guān)閉) | 1.1.0 |
示例代碼:
wx.showModal({
title: '提示',
content: '這是一個模態(tài)彈窗',
success: function(res) {
if (res.confirm) {
console.log('用戶點擊確定')
} else if (res.cancel) {
console.log('用戶點擊取消')
}
}
})
wx.showActionSheet(OBJECT)
?顯示操作菜單
OBJECT參數(shù)說明:
參數(shù) | 類型 | 必填 | 說明 |
---|---|---|---|
itemList | String Array | 是 | 按鈕的文字?jǐn)?shù)組,數(shù)組長度最大為6個 |
itemColor | HexColor | 否 | 按鈕的文字顏色,默認(rèn)為"#000000" |
success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù),詳見返回參數(shù)說明 |
fail | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
success返回參數(shù)說明:
參數(shù) | 類型 | 說明 |
---|---|---|
tapIndex | Number | 用戶點擊的按鈕,從上到下的順序,從0開始 |
示例代碼:
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success: function(res) {
console.log(res.tapIndex)
},
fail: function(res) {
console.log(res.errMsg)
}
})
Bug & Tip
-
bug
:Android
6.3.30
,wx.showModal 的返回的 confirm 一直為 true; -
tip
: wx.showActionSheet 點擊取消或蒙層時,回調(diào)fail
, errMsg 為 "showActionSheet:fail cancel"; -
tip
: wx.showLoading 和 wx.showToast 同時只能顯示一個,使用 wx.hideToast/wx.hideLoading 都可以關(guān)閉提示框; -
tip
:iOS
wx.showModal 點擊蒙層不會關(guān)閉模態(tài)彈窗,所以盡量避免使用“取消”分支中實現(xiàn)業(yè)務(wù)邏輯。
第二部分:如何開通一個小商店