codecamp

支付宝小程序API 交互反馈

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 否 调用结束的回调函数（调用成功、失败都会执行）。
支付宝小程序API 路由
支付宝小程序API 下拉刷新
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序介绍

支付宝小程序 开放能力

支付宝小程序开发文档

支付宝小程序 开发入门

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 UI

支付宝小程序 云与开放能力

支付宝小程序 行业

支付宝小程序 服务端快速示例

支付宝小程序 框架

支付宝小程序框架 小程序全局配置

支付宝小程序 小程序页面

支付宝小程序框架 AXML

支付宝小程序框架 SJS语法

支付宝小程序框架 事件系统

支付宝小程序框架 自定义组件

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 视图容器

支付宝小程序组件 基础内容

支付宝小程序 表单组件

支付宝小程序组件 导航

支付宝小程序组件 媒体

支付宝小程序 画布

支付宝小程序 地图

支付宝小程序 开放组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序扩展组件 布局导航

支付宝小程序浮层组件 操作浮层

支付宝小程序扩展组件 结果类

支付宝小程序扩展组件 提示引导

支付宝小程序扩展组件 表单类

支付宝小程序组件 手势类

支付宝小程序手势组件 其他

支付宝小程序 营销组件

支付宝小程序 API

支付宝小程序API 界面

支付宝小程序 多媒体

支付宝小程序API 设备

支付宝小程序 开发工具

支付宝小程序 界面

支付宝小程序 小程序调试

支付宝小程序 功能面板

支付宝小程序 实验室

支付宝小程序 IDE扩展

支付宝小程序 多端发布

支付宝小程序 插件

支付宝小程序 插件类型

支付宝小程序 插件获取与使用

支付宝小程序 插件开发与发布

支付宝小程序 插件相关API

支付宝小程序 云服务

支付宝小程序 Serverless

支付宝小程序 快速开始

支付宝小程序Serverless 云调用指南

营销能力API

会员能力API

支付能力 API

安全能力 API

资金能力 API

支付宝小程序Serverless 通用接口API

支付宝小程序Serverless 阿里云能力API

支付宝小程序 小程序云应用

支付宝小程序 扩展能力

支付宝小程序扩展能力 开发框架

支付宝小程序扩展能力 工具类库

支付宝小程序 常见问题

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }