微信小程式開發--API界面交互

一、wx:showActionSheet（上拉菜單）

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

tapIndex

number

用戶點擊的按鈕序號，從上到下的順序，從0開始

二、wx: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	否	介面調用結束的回調函數（調用成功、失敗都會執行）

三、showToast / hideToast（載入）

屬性	類型	預設值	必填	說明	最低版本
title	string	是	提示的內容
icon	string	'success'	否	圖標
image	string	否	自定義圖標的本地路徑，image 的優先順序高於 icon	1.1.0
duration	number	1500	否	提示的延遲時間
mask	boolean	false	否	是否顯示透明蒙層，防止觸摸穿透
success	function	否	介面調用成功的回調函數
fail	function	否	介面調用失敗的回調函數
complete	function	否	介面調用結束的回調函數（調用成功、失敗都會執行）

Object object

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

object.icon 的合法值

值	說明	最低版本
success	顯示成功圖標，此時 title 文本最多顯示 7 個漢字長度
loading	顯示載入圖標，此時 title 文本最多顯示 7 個漢字長度
none	不顯示圖標，此時 title 文本最多可顯示兩行，1.9.0及以上版本支持

四、showLoading /hideLoading（載入）

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

註意

• wx.showLoading 和 wx.showToast 同時只能顯示一個
• wx.showLoading 應與 wx.hideLoading 配對使用

 

<view class="container">
  <button bindtap="onload">showActionSheet</button>

  <button bindtap="onModal">showModal</button>

  <button bindtap="onToast">showToast</button>

  <button bindtap="onHideToast">hideToast</button>

  <button bindtap="onLoading">showLoading</button>
</view>

//index.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },
  onload: function() {
    console.log("點擊了我")
    //交互操作組件  必須通過API的方式使用
    wx.showActionSheet({
      itemList: ['刺激戰場', '王者榮耀', '爐石傳說'],
      //點擊其中任一項回調
      success: function(res) {
        //res.cancel是否點擊了取消、
        if (!res.cancel) {
          //tapIndex指的是點擊的下標
          console.log(res.tapIndex)
        }
      }
    })
  },
  onModal: function() {
    wx: wx.showModal({
      title: '標題',
      //提示的標題
      content: '內容',
      //提示的內容
      showCancel: true,
      //是否顯示取消
      cancelText: 'res',
      //按鈕的內容，最多四個字元
      cancelColor: '#ff0',
      //取消按鈕的文字顏色，必須是 16 進位格式的顏色字元串
      confirmText: '確定',
      //確認按鈕的文字，最多 4 個字元
      confirmColor: '#666',
      //確認按鈕的文字顏色，必須是 16 進位格式的顏色字元串
      success: function(res) {
        console.log('調用成功')
      },
      //介面調用成功的回調函數
      fail: function(res) {
        console.log('調用失敗')
      },
      //介面調用失敗的回調函數
      complete: function(res) {
        console.log('e')
      },
      //介面調用結束的回調函數（調用成功、失敗都會執行）
    })
  },
  onToast: function() {
    wx: wx.showToast({
      title: '成功',
      icon: 'success',
      image: '',
      duration: 2000,
      mask: true,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },
  onLoading: function() {
    wx: wx.showLoading({
      title: '載入中',
      mask: true,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    }),
    setTimeout(
      function() {
        wx.hideLoading()
      }, 2000
    )
  },
  onHideToast: function() {
    wx.hideToast({
        success: function(res) {
          console.log('調用成功')
        }
      })
  }
})