微信小程序與用戶交互

微信小程序與用戶交互

一.顯示消息提示框

wx.showToast({屬性名:屬性值})

自定義一個提示框,時間到了會自動關閉

wx.showToast({

    title:"成功",  //必填

    icon: 'success',//圖標只支持"success"、"loading" 

    image: '/images/tan.png',//自定義圖標的本地路徑，image 的優先級高於 icon

    duration: 2000,//提示的延遲時間，單位毫秒，默認：1500 

    mask: false,//是否顯示透明蒙層，防止觸摸穿透，默認：false 

    success:function(){}, //接口調用成功的回調函數

    fail:function(){}, //接口調用失敗的回調函數

    complete:function(){} //接口調用結束的回調函數（調用成功、失敗都會執行）

})

wx.showLoading({屬性名:屬性值})

顯示Loading提示框,不會自動關閉,需主動調用 wx.hideLoading 才能關閉提示框

wx.showLoading({
  title: '加載中',
})
setTimeout(function () {
  wx.hideLoading()
}, 2000)

屬性	類型	默認值	必填	說明
title	string		是	提示的內容
mask	boolean	false	否	是否顯示透明蒙層，防止觸摸穿透
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

wx.hideLoading({屬性名:屬性值})

隱藏 loading 提示框

屬性	類型	默認值	必填	說明
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

二.相似html中confirm

wx.showModal({屬性名:屬性值})

wx.showModal({
  title: '提示',
  content: '這是一個模態彈窗',
  success (res) {
    if (res.confirm) {
      console.log('用戶點擊肯定')
    } else if (res.cancel) {
      console.log('用戶點擊取消')
    }
  }
})

屬性	類型	默認值	必填	說明
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		否	接口調用結束的回調函數（調用成功、失敗都會執行）

object.success 回調函數

Object res

屬性	類型	說明	最低版本
confirm	boolean	爲 true 時，表示用戶點擊了肯定按鈕
cancel	boolean	爲 true 時，表示用戶點擊了取消（用於 Android 系統區分點擊蒙層關閉仍是點擊取消按鈕關閉）	1.1.0

三.顯示操做菜單

wx.showActionSheet({屬性名:屬性值})

wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success (res) {
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
})

屬性	類型	默認值	必填	說明
itemList	Array.		是	按鈕的文字數組，數組長度最大爲 6
itemColor	string	#000000	否	按鈕的文字顏色
success	function		否	接口調用成功的回調函數
fail	function		否	接口調用失敗的回調函數
complete	function		否	接口調用結束的回調函數（調用成功、失敗都會執行）

object.success 回調函數

參數

Object res

屬性	類型	說明
tapIndex	number	用戶點擊的按鈕序號，從上到下的順序，從0開始

注意

• Android 6.7.2 如下版本，點擊取消或蒙層時，回調 fail, errMsg 爲 "fail cancel"；
• Android 6.7.2 及以上版本 和 iOS 點擊蒙層不會關閉模態彈窗，因此儘可能避免使用「取消」分支中實現業務邏輯