小程式介面互動反饋API詳解-移動開發平台 mPaaS-阿里雲

my.alert

說明

mPaaS 10.1.32 及以上版本支援該介面。

alert 警告框，可以設定警告框的標題、內容、按鈕文字等，暫不支援設定圖片等樣式。

入參

名稱	類型	必填	描述
title	String	否	警告框的標題。
content	String	否	警告框的內容。
buttonText	String	否	按鈕文字，預設為確定。
success	Function	否	調用成功的回呼函數。
fail	Function	否	調用失敗的回呼函數。
complete	Function	否	調用結束的回呼函數（調用成功、失敗都會執行）。

程式碼範例

// API-DEMO page/API/alert/alert.json
{
  "defaultTitle": "Alert"
}

<!-- API-DEMO page/API/alert/alert.axml-->
<view class="page">
  <view class="page-description">警告框 API</view>
  <view class="page-section">
    <view class="page-section-title">my.alert</view>
    <view class="page-section-demo">
      <button type="primary" onTap="alert">顯示警告框</button>
    </view>
  </view>
</view>

// API-DEMO page/API/alert/alert.js
Page({
  alert() {
    my.alert({
      title: '親',
      content: '您本月的賬單已出',
      buttonText: '我知道了',
      success: () => {
        my.alert({
          title: '使用者單擊了「我知道了」',
        });
      }
    });
  },
})

my.confirm

說明

mPaaS 10.1.32 及以上版本支援該介面。

confirm 確認框。用於提示的確認框，可以配置確認框的標題、內容、確認或取消按鈕的文字等。

入參

名稱	類型	必填	描述
title	String	否	確認框的標題。
content	String	否	確認框的內容。
confirmButtonText	String	否	確認的按鈕文字，預設為確定。
cancelButtonText	String	否	取消的按鈕文字，預設為取消。
success	Function	否	調用成功的回呼函數。
fail	Function	否	調用失敗的回呼函數。
complete	Function	否	調用結束的回呼函數（調用成功、失敗都會執行）。

success 傳回值

名稱	類型	描述
confirm	Boolean	單擊確定返回 `true`，單擊 cancel 返回 `false`。

程式碼範例

// API-DEMO page/API/confirm/confirm.json
{
    "defaultTitle": "Confirm"
}

<!-- API-DEMO page/API/confirm/confirm.axml-->
<view class="page">
  <view class="page-description">確認框 API</view>
  <view class="page-section">
    <view class="page-section-title">my.confirm</view>
    <view class="page-section-demo">
      <button type="primary" onTap="comfirm">顯示確認框</button>
    </view>
  </view>
</view>

// API-DEMO page/API/confirm/confirm.js
Page({
  comfirm() {
    my.confirm({
      title: '溫馨提示',
      content: '您是否想查詢快遞單號：\n1234567890',
      confirmButtonText: '馬上查詢',
      cancelButtonText: '暫不需要',
      success: (result) => {
        my.alert({
          title: `${result.confirm}`,
        });
      },
    });
  },
});

my.prompt

重要：基礎庫 1.7.2 及以上版本，mPaaS 10.1.32 及以上版本支援該介面。

該介面用於彈出一個對話方塊，讓使用者在對話方塊內輸入文本。

入參

名稱	類型	必填	描述
title	String	否	prompt 框的標題。
message	String	否	prompt 框文本，預設為請輸入內容。
placeholder	String	否	輸入框內的提示文案。
align	String	否	message 的對齊，可用枚舉 left/center/right，例如 `iOS ‘center’, android ‘left’`，表示在 iOS 用戶端上置中對齊，在 Android 用戶端上靠左對齊。
okButtonText	String	否	確認按鈕文字，預設為確定。
cancelButtonText	String	否	確認按鈕文字，預設為取消。
success	Function	否	調用成功的回呼函數。
fail	Function	否	調用失敗的回呼函數。
complete	Function	否	調用結束的回呼函數（調用成功、失敗都會執行）。

success 傳回值

名稱	類型	描述
ok	Boolean	單擊 ok 返回 true，單擊 cancel 返回 false。
inputValue	String	當 `ok` 為 true 時，返回使用者輸入的內容。

程式碼範例

my.prompt({
  title: '標題單行',
  message: '說明目前狀態、提示使用者解決方案，最好不要超過兩行。',
  placeholder: '給朋友留言',
  okButtonText: '確定',
  cancelButtonText: '取消',
  success: (result) => {
    my.alert({
      title: JSON.stringify(result),
    });
  },
});

my.showToast

說明

mPaaS 10.1.32 及以上版本支援該介面。

該介面用於顯示一個弱提示，可選擇多少秒之後消失。

入參

名稱	類型	必填	描述
content	String	否	文字內容。
type	String	否	toast 類型，展示相應表徵圖，預設為 `none`，支援 `success` / `fail` / `exception` / `none`。其中 `exception` 類型必須傳文字資訊。
duration	Number	否	顯示時間長度，單位為 ms，預設為 2000。
success	Function	否	調用成功的回呼函數。
fail	Function	否	調用失敗的回呼函數。
complete	Function	否	調用結束的回呼函數（調用成功、失敗都會執行）。

程式碼範例

// API-DEMO page/API/toast/toast.json
{
    "defaultTitle": "Toast"
}

<!-- API-DEMO page/API/toast/toast.axml-->
<view class="page">
  <view class="page-description">Toast API</view>
  <view class="page-section">
    <view class="page-section-title">my.showToast</view>
    <view class="page-section-btns">
      <view type="primary" onTap="showToastSuccess">顯示 success 提示</view>
      <view type="primary" onTap="showToastFail">顯示 fail 提示</view>
    </view>
    <view class="page-section-btns">
      <view type="primary" onTap="showToastException">顯示 exception 提示</view>
      <view type="primary" onTap="showToastNone">顯示 none 弱提示</view>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">my.hideToast</view>
    <view class="page-section-btns">
      <view onTap="hideToast">隱藏弱提示</view>
    </view>
  </view>
</view>

// API-DEMO page/API/toast/toast.js
Page({
  showToastSuccess() {
    my.showToast({
      type: 'success',
      content: '操作成功',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  showToastFail() {
    my.showToast({
      type: 'fail',
      content: '操作失敗',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  showToastException() {
    my.showToast({
      type: 'exception',
      content: '網路異常',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  showToastNone() {
    my.showToast({
      type: 'none',
      content: '提醒',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  hideToast() {
    my.hideToast()
  },
})

my.hideToast

說明

mPaaS 10.1.32 及以上版本支援該介面。

該介面用於隱藏弱提示。

入參

名稱	類型	必填	說明
success	function	否	介面調用成功的回呼函數。
fail	function	否	介面調用失敗的回呼函數。
complete	function	否	介面調用結束的回呼函數（調用成功、失敗都會執行）。

程式碼範例

// API-DEMO page/API/toast/toast.json
{
    "defaultTitle": "Toast"
}

<!-- API-DEMO page/API/toast/toast.axml-->
<view class="page">
  <view class="page-description">Toast API</view>
  <view class="page-section">
    <view class="page-section-title">my.showToast</view>
    <view class="page-section-btns">
      <view type="primary" onTap="showToastSuccess">顯示 success 提示</view>
      <view type="primary" onTap="showToastFail">顯示 fail 提示</view>
    </view>
    <view class="page-section-btns">
      <view type="primary" onTap="showToastException">顯示 exception 提示</view>
      <view type="primary" onTap="showToastNone">顯示 none 弱提示</view>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">my.hideToast</view>
    <view class="page-section-btns">
      <view onTap="hideToast">隱藏弱提示</view>
    </view>
  </view>
</view>

// API-DEMO page/API/toast/toast.js
Page({
  showToastSuccess() {
    my.showToast({
      type: 'success',
      content: '操作成功',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  showToastFail() {
    my.showToast({
      type: 'fail',
      content: '操作失敗',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  showToastException() {
    my.showToast({
      type: 'exception',
      content: '網路異常',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  showToastNone() {
    my.showToast({
      type: 'none',
      content: '提醒',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  hideToast() {
    my.hideToast()
  },
})

my.showLoading

說明

mPaaS 10.1.32 及以上版本支援該介面。

該介面用於顯示載入提示的過渡效果，可與 my.hideLoading 配合使用。

入參

名稱	類型	必填	描述
content	String	否	載入提示的文字內容。
delay	Number	否	延遲顯示，單位為 ms，預設為 0。若在此時間之前調用了 `my.hideLoading` 則不會顯示。
success	Function	否	調用成功的回呼函數。
fail	Function	否	調用失敗的回呼函數。
complete	Function	否	調用結束的回呼函數（調用成功、失敗都會執行）。

程式碼範例

// API-DEMO page/API/loading/loading.json
{
    "defaultTitle": "載入提示"
}

<!-- API-DEMO page/API/loading/loading.axml-->
<view class="page">
  <view class="page-section">
    <view class="page-section-title">
      顯示 loading 後，會覆蓋整個h5頁面，頁面元素不能互動。
    </view>
    <view class="page-section-btns">
      <view onTap="showLoading">顯示載入提示</view>
    </view>
  </view>
</view>

// API-DEMO page/API/loading/loading.js
Page({
  showLoading() {
    my.showLoading({
      content: '載入中...',
      delay: 1000,
    });
    setTimeout(() => {
      my.hideLoading();
    }, 5000);
  },
});

/* API-DEMO page/API/loading/loading.acss */
.tips{
  margin-left: 10px;
  margin-top: 20px;
  color: red;
  font-size: 12px;
}
.tips .item {
  margin: 5px 0;
  color: #888888;
  line-height: 14px;
}

my.hideLoading

說明

mPaaS 10.1.32 及以上版本支援該介面。

該介面用於隱藏載入提示的過渡效果，可與 my.showLoading 配合使用。

入參

名稱	類型	必填	描述
page	Object	否	具體指當前 page 執行個體，某些情境下，需要指明在哪個 page 執行 `hideLoading`。

程式碼範例

Page({
  onLoad() {
    my.showLoading();
    const that = this;
    setTimeout(() => {
      my.hideLoading({
        page: that,  // 防止執行時已經切換到其它頁面，page 指向不準確
      });
    }, 4000);
  }
})

my.showActionSheet

說明

mPaaS 10.1.32 及以上版本支援該介面。

該介面用於顯示操作菜單。

入參

名稱	類型	必填	描述	基礎庫最低版本
title	String	否	功能表標題。	-
items	String Array	是	功能表按鈕文字數組。	-
cancelButtonText	String	否	取消按鈕文案。預設為取消。重要在 Android 平台上，此欄位無效，不會顯示取消按鈕。	-
destructiveBtnIndex	Number	否	（iOS 特殊處理）指定按鈕的索引號，從 0 開始。使用情境：需要刪除或清除資料等類似情境，預設為紅色。	-
badges	Object Array	否	需飄紅選項的數組，數組內部對象欄位見下表。	1.9.0
success	Function	否	調用成功的回呼函數。	-
fail	Function	否	調用失敗的回呼函數。	-
complete	Function	否	調用結束的回呼函數（調用成功、失敗都會執行）。	-

badges 數組內部對象欄位

名稱	類型	描述
index	Number	需要飄紅的選項的索引，從 0 開始。
type	String	飄紅類型，支援 none（無紅點）/ point（純紅點） / num（數字紅點）/ text（文案紅點）/ more（…）。
text	String	自訂飄紅文案：飄紅類型為 none/point/more 時本文案可不填。飄紅類型為 num 時，本文案為小數或 <=0 時，文案均不顯示，本文案 >100 時，文案顯示為 … 。

程式碼範例

// API-DEMO page/API/action-sheet/action-sheet.json
{
    "defaultTitle": "Action Sheet"
}

<!-- API-DEMO page/API/action-sheet/action-sheet.axml-->
<view class="page">
  <view class="page-description">操作菜單 API</view>
  <view class="page-section">
    <view class="page-section-title">my.showActionSheet</view>
    <view class="page-section-demo">
      <button type="primary" onTap="showActionSheet">顯示操作菜單</button>
    </view>
  </view>
</view>

// API-DEMO page/API/action-sheet/action-sheet.js
Page({
  showActionSheet() {
    my.showActionSheet({
      title: '支付寶-ActionSheet',
      items: ['菜單一', '菜單二', '菜單三'],
      cancelButtonText: '取消好了',
      success: (res) => {
        const btn = res.index === -1 ? '取消' : '第' + res.index + '個';
        my.alert({
          title: `你點了${btn}按鈕`
        });
      },
    });
  },
});