支付宝小程序API 交互反馈

2020-09-14 11:51 更新

my.alert

简介

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

使用限制

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

扫码体验

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

入参

Object 类型,属性如下:

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

my.confirm

简介

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

扫码体验

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">确认框 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 调用结束的回调函数(调用成功、失败都会执行)。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号