小程序界面交互反馈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}按钮`
        });
      },
    });
  },
});