支付宝小程序API 交互反馈

my.alert

简介

my.alert 是警告框 API，可以设置警告框的标题、内容、按钮文字等。

使用限制

暂不支持设置图片等样式。

扫码体验

示例代码

// 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: '用户点击了「我知道了」',
        });
      }
    });
  },
})

入参

Object 类型，属性如下：

属性	类型	必填	描述
title	String	否	警告框的标题。
content	String	否	警告框的内容。
buttonText	String	否	按钮文字，默认为 “确定”。
success	Function	否	调用成功的回调函数。
fail	Function	否	调用失败的回调函数。
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）。

my.confirm

简介

my.confirm 是用于提示的确认框的 API，可以配置确认框的标题、内容、确认或取消按钮的文字等。

扫码体验

示例代码

// 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}`,
        });
      },
    });
  },
});

入参

Object 类型，属性如下：

属性	类型	必填	描述
title	String	否	confirm 框的标题。
content	String	否	confirm 框的内容。
confirmButtonText	String	否	确认按钮文字，默认为“确定”。
cancelButtonText	String	否	取消按钮文字，默认为“取消”。
success	Function	否	调用成功的回调函数。
fail	Function	否	调用失败的回调函数。
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）。

success 回调函数

入参为 Object 类型，属性如下：

属性	类型	描述
confirm	Boolean	点击确定按钮，返回 true；点击取消按钮，返回 false。

my.hideLoading

简介

my.hideLoading 是隐藏加载提示的过渡效果的 API，可与 my.showLoading 配合使用。

示例代码

// .js
Page({
  onLoad() {
    my.showLoading();
    const that = this;
    setTimeout(() => {
      my.hideLoading({
        page: that,  // 防止执行时已经切换到其它页面，page 指向不准确
      });
    }, 4000);
  }
})

入参

Object 类型，属性如下：

属性	类型	必填	描述
page	Object	否	具体指当前 page 实例，某些场景下，需要指明在哪个 page 执行 hideLoading。

my.hideToast

简介

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

扫码体验

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: '网络异常',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  showToastNone() {
    my.showToast({
      type: 'none',
      content: '提醒',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  hideToast() {
    my.hideToast()
  },
})

入参

属性	类型	必填	描述
success	Function	否	接口调用成功的回调函数。
fail	Function	否	接口调用失败的回调函数。
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）。

my.prompt

简介

my.prompt 是弹出一个对话框，让用户在对话框内输入文本的 API。

使用限制

基础库 1.7.2 或更高版本；支付宝客户端 10.1.10 或更高版本，若版本较低，建议采取兼容处理。

示例代码

// .js
my.prompt({
  title: '标题单行',
  message: '说明当前状态、提示用户解决方案，最好不要超过两行。',
  placeholder: '给朋友留言',
  okButtonText: '确定',
  cancelButtonText: '取消',
  success: (result) => {
    my.alert({
      title: JSON.stringify(result),
    });
  },
});

入参

Object 类型，属性如下：

属性	类型	必填	描述
title	String	否	prompt 框标题。
message	String	否	prompt 框文本，默认为 “请输入内容”。
placeholder	String	否	输入框内的提示文案。
align	String	否	message 对齐方式，可用值为： left 、center 、right。
okButtonText	String	否	确认按钮文字，默认值为 “确定”。
cancelButtonText	String	否	确认按钮文字，默认值为 “取消”。
success	Function	否	调用成功的回调函数。
fail	Function	否	调用失败的回调函数。
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）。

success 回调函数

入参为 Object 类型，属性如下：

属性	类型	描述
ok	Boolean	点击 ok 返回 true，点击 cancel 返回 false。
inputValue	String	当 ok 返回 true 时，返回用户输入的内容。

my.showActionSheet

简介

my.showActionSheet 是显示操作菜单的 API。

扫码体验

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 + '个';
        my.alert({
          title: `你点了${btn}按钮`
        });
      },
    });
  },
});

入参

Object 类型，属性如下：

属性	类型	必填	描述
title	String	否	菜单标题。
items	String Array	是	菜单按钮文字数组。
cancelButtonText	String	否	取消按钮文案。默认为 “取消”。注：Android 平台此字段无效，不会显示取消按钮。
destructiveBtnIndex	Number	否	（iOS 特殊处理）指定按钮的索引号，从 0 开始。使用场景：需要删除或清除数据等类似场景，默认红色。
badges	Object Array	否	需飘红选项的数组，数组内部对象字段见下方 badges 属性表。基础库 1.9.0 及以上版本开始支持。
success	Function	否	调用成功的回调函数。
fail	Function	否	调用失败的回调函数。
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）。

badges 属性

属性	类型	描述
index	Number	需要飘红的选项的索引，从 0 开始。
type	String	飘红类型，支持 none（无红点）/ point（纯红点） / num（数字红点）/ text（文案红点）/ more（...）。
text	String	自定义飘红文案：type 为 none / point / more 时，text 可不填；type为 num 时，text 为小数或 ≤ 0均不显示, ≥ 100 显示"..."。

my.showLoading

简介

my.showLoading 是显示加载提示的过渡效果的 API，可与 my.hideLoading 配合使用。

扫码体验

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 后，会覆盖整个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;
}

入参

Object 类型，属性如下：

属性	类型	必填	描述
content	String	否	提示中的文字内容。
delay	Number	否	延迟显示，单位毫秒（ms），默认为 0。如果在此时间之前调用了 my.hideLoading 则不会显示。
success	Function	否	调用成功的回调函数。
fail	Function	否	调用失败的回调函数。
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）。

my.showToast

简介

my.showToast 是显示一个弱提示，在到达设定的显示时间后自动消失弱提示的 API。

扫码体验

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: '网络异常',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  showToastNone() {
    my.showToast({
      type: 'none',
      content: '提醒',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'toast 消失了',
        });
      },
    });
  },
  hideToast() {
    my.hideToast()
  },
})

入参

Object 类型，属性如下：

属性	类型	必填	描述
content	String	否	文字内容。
type	String	否	toast 类型，展示相应图标，默认 none，支持 success / fail / exception / none。其中 exception 类型必须传文字信息。
duration	Number	否	显示时长，单位为 ms，默认 2000。
success	Function	否	调用成功的回调函数。
fail	Function	否	调用失败的回调函数。
complete	Function	否	调用结束的回调函数（调用成功、失败都会执行）。