交互反馈

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