支付寶小程序API 交互反饋

2020-09-14 11:51 更新

my.alert

簡(jiǎn)介

my.alert 是警告框 API，可以設(shè)置警告框的標(biāo)題、內(nèi)容、按鈕文字等。

使用限制

暫不支持設(shè)置圖片等樣式。

掃碼體驗(yàn)

alert.jpeg

示例代碼

// 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: '用戶點(diǎn)擊了「我知道了」',
        });
      }
    });
  },
})

入?yún)?/h4>

Object 類(lèi)型，屬性如下：

屬性 類(lèi)型 必填 描述
title String 否 警告框的標(biāo)題。
content String 否 警告框的內(nèi)容。
buttonText String 否 按鈕文字，默認(rèn)為 “確定”。
success Function 否 調(diào)用成功的回調(diào)函數(shù)。
fail Function 否 調(diào)用失敗的回調(diào)函數(shù)。
complete Function 否 調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）。

my.confirm

簡(jiǎn)介

my.confirm 是用于提示的確認(rèn)框的 API，可以配置確認(rèn)框的標(biāo)題、內(nèi)容、確認(rèn)或取消按鈕的文字等。

掃碼體驗(yàn)

confirm.jpeg

示例代碼

// API-DEMO page/API/confirm/confirm.json
{
    "defaultTitle": "Confirm"
}
<!-- API-DEMO page/API/confirm/confirm.axml-->
<view class="page">
  <view class="page-description">確認(rèn)框 API</view>
  <view class="page-section">
    <view class="page-section-title">my.confirm</view>
    <view class="page-section-demo">
      <button type="primary" onTap="comfirm">顯示確認(rèn)框</button>
    </view>
  </view>
</view>
// API-DEMO page/API/confirm/confirm.js
Page({
  comfirm() {
    my.confirm({
      title: '溫馨提示',
      content: '您是否想查詢(xún)快遞單號(hào)：\n1234567890',
      confirmButtonText: '馬上查詢(xún)',
      cancelButtonText: '暫不需要',
      success: (result) => {
        my.alert({
          title: `${result.confirm}`,
        });
      },
    });
  },
});

入?yún)?/h4>

Object 類(lèi)型，屬性如下：

屬性 類(lèi)型 必填 描述
title String 否 confirm 框的標(biāo)題。
content String 否 confirm 框的內(nèi)容。
confirmButtonText String 否 確認(rèn)按鈕文字，默認(rèn)為“確定”。
cancelButtonText String 否 取消按鈕文字，默認(rèn)為“取消”。
success Function 否 調(diào)用成功的回調(diào)函數(shù)。
fail Function 否 調(diào)用失敗的回調(diào)函數(shù)。
complete Function 否 調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）。

success 回調(diào)函數(shù)

入?yún)?Object 類(lèi)型，屬性如下：

屬性 類(lèi)型 描述
confirm Boolean 點(diǎn)擊確定按鈕，返回 true；點(diǎn)擊取消按鈕，返回 false。

my.hideLoading

簡(jiǎn)介

my.hideLoading 是隱藏加載提示的過(guò)渡效果的 API，可與 my.showLoading 配合使用。

示例代碼

// .js
Page({
  onLoad() {
    my.showLoading();
    const that = this;
    setTimeout(() => {
      my.hideLoading({
        page: that,  // 防止執(zhí)行時(shí)已經(jīng)切換到其它頁(yè)面，page 指向不準(zhǔn)確
      });
    }, 4000);
  }
})

入?yún)?/h4>

Object 類(lèi)型，屬性如下：

屬性 類(lèi)型 必填 描述
page Object 否 具體指當(dāng)前 page 實(shí)例，某些場(chǎng)景下，需要指明在哪個(gè) page 執(zhí)行 hideLoading。

my.hideToast

簡(jiǎn)介

my.hideToast 是隱藏弱提示的 API。

掃碼體驗(yàn)

my.showtoast.jpeg

示例代碼

// 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: '網(wǎng)絡(luò)異常',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  showToastNone() {
    my.showToast({
      type: 'none',
      content: '提醒',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  hideToast() {
    my.hideToast()
  },
})

入?yún)?/h4>
屬性 類(lèi)型 必填 描述
success Function 否 接口調(diào)用成功的回調(diào)函數(shù)。
fail Function 否 接口調(diào)用失敗的回調(diào)函數(shù)。
complete Function 否 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）。

my.prompt

簡(jiǎn)介

my.prompt 是彈出一個(gè)對(duì)話框，讓用戶在對(duì)話框內(nèi)輸入文本的 API。

使用限制

基礎(chǔ)庫(kù) 1.7.2 或更高版本；支付寶客戶端 10.1.10 或更高版本，若版本較低，建議采取 兼容處理。

示例代碼

// .js


my.prompt({
  title: '標(biāo)題單行',
  message: '說(shuō)明當(dāng)前狀態(tài)、提示用戶解決方案，最好不要超過(guò)兩行。',
  placeholder: '給朋友留言',
  okButtonText: '確定',
  cancelButtonText: '取消',
  success: (result) => {
    my.alert({
      title: JSON.stringify(result),
    });
  },
});

入?yún)?/h4>

Object 類(lèi)型，屬性如下：

屬性 類(lèi)型 必填 描述
title String 否 prompt 框標(biāo)題。
message String 否 prompt 框文本，默認(rèn)為 “請(qǐng)輸入內(nèi)容”。
placeholder String 否 輸入框內(nèi)的提示文案。
align String 否 message 對(duì)齊方式，可用值為： left 、center 、right。
okButtonText String 否 確認(rèn)按鈕文字，默認(rèn)值為 “確定”。
cancelButtonText String 否 確認(rèn)按鈕文字，默認(rèn)值為 “取消”。
success Function 否 調(diào)用成功的回調(diào)函數(shù)。
fail Function 否 調(diào)用失敗的回調(diào)函數(shù)。
complete Function 否 調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）。

success 回調(diào)函數(shù)

入?yún)?Object 類(lèi)型，屬性如下：

屬性 類(lèi)型 描述
ok Boolean 點(diǎn)擊 ok 返回 true，點(diǎn)擊 cancel 返回 false。
inputValue String 當(dāng) ok 返回 true 時(shí)，返回用戶輸入的內(nèi)容。

my.showActionSheet

簡(jiǎn)介

my.showActionSheet 是顯示操作菜單的 API。

掃碼體驗(yàn)

my.showactionasheet.jpeg

示例代碼

// 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 + '個(gè)';
        my.alert({
          title: `你點(diǎn)了${btn}按鈕`
        });
      },
    });
  },
});

入?yún)?/h4>

Object 類(lèi)型，屬性如下：

屬性 類(lèi)型 必填 描述
title String 否 菜單標(biāo)題。
items String Array 是 菜單按鈕文字?jǐn)?shù)組。
cancelButtonText String 否 取消按鈕文案。默認(rèn)為 “取消”。注：Android  平臺(tái)此字段無(wú)效，不會(huì)顯示取消按鈕。
destructiveBtnIndex Number 否 （iOS 特殊處理）指定按鈕的索引號(hào)，從 0 開(kāi)始。使用場(chǎng)景：需要?jiǎng)h除或清除數(shù)據(jù)等類(lèi)似場(chǎng)景，默認(rèn)紅色。
badges Object Array 否 需飄紅選項(xiàng)的數(shù)組，數(shù)組內(nèi)部對(duì)象字段見(jiàn)下方  badges 屬性表?；A(chǔ)庫(kù) 1.9.0 及以上版本開(kāi)始支持。
success Function 否 調(diào)用成功的回調(diào)函數(shù)。
fail Function 否 調(diào)用失敗的回調(diào)函數(shù)。
complete Function 否 調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）。

badges 屬性
屬性 類(lèi)型 描述
index Number 需要飄紅的選項(xiàng)的索引，從 0 開(kāi)始。
type String 飄紅類(lèi)型，支持 none（無(wú)紅點(diǎn)）/ point（純紅點(diǎn)） / num（數(shù)字紅點(diǎn)）/ text（文案紅點(diǎn)）/ more（...）。
text String 自定義飄紅文案：type 為 none / point / more 時(shí)，text 可不填；type為 num 時(shí)，text 為小數(shù)或 ≤ 0均不顯示, ≥ 100 顯示"..."。

my.showLoading

簡(jiǎn)介

my.showLoading 是顯示加載提示的過(guò)渡效果的 API，可與 my.hideLoading 配合使用。

掃碼體驗(yàn)

my.showLoading.png

示例代碼

// 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 后，會(huì)覆蓋整個(gè)h5頁(yè)面，頁(yè)面元素不能交互。
    </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;
}

入?yún)?/h4>

Object 類(lèi)型，屬性如下：

屬性 類(lèi)型 必填 描述
content String 否 提示中的文字內(nèi)容。
delay Number 否 延遲顯示，單位毫秒（ms），默認(rèn)為 0。如果在此時(shí)間之前調(diào)用了 my.hideLoading 則不會(huì)顯示。
success Function 否 調(diào)用成功的回調(diào)函數(shù)。
fail Function 否 調(diào)用失敗的回調(diào)函數(shù)。
complete Function 否 調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）。

my.showToast

簡(jiǎn)介

my.showToast 是顯示一個(gè)弱提示，在到達(dá)設(shè)定的顯示時(shí)間后自動(dòng)消失弱提示的 API。

掃碼體驗(yàn)

my.showtoast.jpeg

示例代碼

// 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: '網(wǎng)絡(luò)異常',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  showToastNone() {
    my.showToast({
      type: 'none',
      content: '提醒',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  hideToast() {
    my.hideToast()
  },
})

入?yún)?/h4>

Object 類(lèi)型，屬性如下：

屬性 類(lèi)型 必填 描述
content String 否 文字內(nèi)容。
type String 否 toast 類(lèi)型，展示相應(yīng)圖標(biāo)，默認(rèn) none，支持 success / fail / exception / none。其中 exception 類(lèi)型必須傳文字信息。
duration Number 否 顯示時(shí)長(zhǎng)，單位為 ms，默認(rèn) 2000。
success Function 否 調(diào)用成功的回調(diào)函數(shù)。
fail Function 否 調(diào)用失敗的回調(diào)函數(shù)。
complete Function 否 調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）。

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)