All Products
Search
Document Center

Feedback

Last Updated: Mar 11, 2021

my.alert

Note: This interface is only supported in mPaaS 10.1.32 and later versions.

The alert box. You can set the title, content, and button text of the alert box. Setting the styles such as images is currently not supported.

Parameters

Name Type Required Description
title String No The title of the alert box.
content String No The content of the alert box.
buttonText String No Button text, which defaults to OK.
success Function No The callback function that indicates a successful call.
fail Function No The callback function that indicates a failed call.
complete Function No The callback function that indicates the call is completed (this will be executed regardless of whether the call succeeds or fails).

Sample code

  1. // API-DEMO page/API/alert/alert.json
  2. {
  3. "defaultTitle": "Alert"
  4. }
  1. <!-- API-DEMO page/API/alert/alert.axml-->
  2. <view class="page">
  3. <view class="page-description">The alert box API</view>
  4. <view class="page-section">
  5. <view class="page-section-title">my.alert</view>
  6. <view class="page-section-demo">
  7. <button type="primary" onTap="alert">Display the alert box</button>
  8. </view>
  9. </view>
  10. </view>
  1. // API-DEMO page/API/alert/alert.js
  2. Page({
  3. alert() {
  4. my.alert({
  5. title: 'Dear',
  6. content: 'Your monthly bill has been generated',
  7. buttonText: 'Got it',
  8. success: () => {
  9. my.alert({
  10. title: 'The user has clicked Got it',
  11. });
  12. }
  13. });
  14. },
  15. })

my.confirm

Note: This interface is only supported in mPaaS 10.1.32 and later versions.

The confirmation box. The confirmation box for prompting the user to confirm the current operation. You can set the title, content, and text of the confirmation or cancel button in the confirmation box.

Parameters

Name Type Required Description
title String No The title of the confirmation box.
content String No The content of the confirmation box.
confirmButtonText String No The text of the confirmation button, which defaults to OK.
cancelButtonText String No The text of the cancellation button, which defaults to Cancel.
success Function No The callback function that indicates a successful call.
fail Function No The callback function that indicates a failed call.
complete Function No The callback function for ended operations. This callback function will be executed for both successful and failed calls.

Return values of a success callback

Name Type Description
confirm Boolean Clicking OK returns true and clicking Cancel returns false.

Sample code

  1. // API-DEMO page/API/confirm/confirm.json
  2. {
  3. "defaultTitle": "Confirm"
  4. }
  1. <!-- API-DEMO page/API/confirm/confirm.axml-->
  2. <view class="page">
  3. <view class="page-description">The confirmation box API</view>
  4. <view class="page-section">
  5. <view class="page-section-title">my.confirm</view>
  6. <view class="page-section-demo">
  7. <button type="primary" onTap="comfirm">Display the confirmation box</button>
  8. </view>
  9. </view>
  10. </view>
  1. // API-DEMO page/API/confirm/confirm.js
  2. Page({
  3. comfirm() {
  4. my.confirm({
  5. title: 'Reminder',
  6. content: 'Do you want to query the package with this tracking number: \n1234567890',
  7. confirmButtonText: 'Query now',
  8. cancelButtonText: 'Not now',
  9. success: (result) => {
  10. my.alert({
  11. title: `${result.confirm}`,
  12. });
  13. },
  14. });
  15. },
  16. });

my.prompt

Note: This interface is only supported in base library V1.7.2 (119285) and later versions and mPaaS 10.1.32 and later versions.

This interface allows you to display a dialog box for the user to enter text in the dialog box.

Parameters

Name Type Required Description
title String No The title of the prompt box.
message String No The text of the prompt box, which defaults to Please enter content.
placeholder String No Prompt text in the entry box.
align String No The message alignment method, which can be the enumerated left, center, and right values. For example, iOS 'center', android 'left' indicates center alignment on the iOS client and left alignment on the Android client.
okButtonText String No The text of the confirmation button, which defaults to OK.
cancelButtonText String No The text of the confirmation button, which defaults to Cancel.
success Function No The callback function that indicates a successful call.
fail Function No The callback function that indicates a failed call.
complete Function No The callback function that indicates the call is completed (this will be executed regardless of whether the call succeeds or fails).

Return values of a success callback

Name Type Description
ok Boolean Clicking OK returns true and clicking Cancel returns false.
inputValue String If ok is set to true, the user entry is returned.

Sample code

  1. my.prompt({
  2. title: 'The single-line title',
  3. message: 'Explain the current situation and prompt the user with the solution, which is preferably no more than two lines in length',
  4. placeholder: 'Leave a message to friends',
  5. okButtonText: 'OK',
  6. cancelButtonText: 'Cancel',
  7. success: (result) => {
  8. my.alert({
  9. title: JSON.stringify(result),
  10. });
  11. },
  12. });

my.showToast

Note: This interface is only supported in mPaaS 10.1.32 and later versions.

This interface allows you to display a toast. You can set the duration of the toast.

Parameters

Name Type Required Description
content String No Text content.
type String No The toast type reflected by the corresponding icon, which defaults to none. The possible values are success, fail, exception, and none. Among them, textual information is required for the exception type.
duration Number No The display duration in milliseconds, which defaults to 2,000.
success Function No The callback function that indicates a successful call.
fail Function No The callback function that indicates a failed call.
complete Function No The callback function that indicates the call is completed (this will be executed regardless of whether the call succeeds or fails).

Sample code

  1. // API-DEMO page/API/toast/toast.json
  2. {
  3. "defaultTitle": "Toast"
  4. }
  1. <!-- API-DEMO page/API/toast/toast.axml-->
  2. <view class="page">
  3. <view class="page-description">Toast API</view>
  4. <view class="page-section">
  5. <view class="page-section-title">my.showToast</view>
  6. <view class="page-section-btns">
  7. <view type="primary" onTap="showToastSuccess">Display the success prompt text</view>
  8. <view type="primary" onTap="showToastFail">Display the fail prompt text</view>
  9. </view>
  10. <view class="page-section-btns">
  11. <view type="primary" onTap="showToastException">Display the exception prompt text</view>
  12. <view type="primary" onTap="showToastNone">Show the "none" toast.</view>
  13. </view>
  14. </view>
  15. <view class="page-section">
  16. <view class="page-section-title">my.hideToast</view>
  17. <view class="page-section-btns">
  18. <view onTap="hideToast">Hide toasts.</view>
  19. </view>
  20. </view>
  21. </view>
  1. // API-DEMO page/API/toast/toast.js
  2. Page({
  3. showToastSuccess() {
  4. my.showToast({
  5. type: 'success',
  6. content: 'Operation succeeded',
  7. duration: 3000,
  8. success: () => {
  9. my.alert({
  10. title: 'Toast disappeared',
  11. });
  12. },
  13. });
  14. },
  15. showToastFail() {
  16. my.showToast({
  17. type: 'fail',
  18. content: 'Operation failed',
  19. duration: 3000,
  20. success: () => {
  21. my.alert({
  22. title: 'Toast disappeared',
  23. });
  24. },
  25. });
  26. },
  27. showToastException() {
  28. my.showToast({
  29. type: 'exception',
  30. content: 'Network exception',
  31. duration: 3000,
  32. success: () => {
  33. my.alert({
  34. title: 'Toast disappeared',
  35. });
  36. },
  37. });
  38. },
  39. showToastNone() {
  40. my.showToast({
  41. type: 'none',
  42. content: 'Wait a moment',
  43. duration: 3000,
  44. success: () => {
  45. my.alert({
  46. title: 'Toast disappeared',
  47. });
  48. },
  49. });
  50. },
  51. hideToast() {
  52. my.hideToast()
  53. },
  54. })

my.hideToast

Note: This interface is only supported in mPaaS 10.1.32 and later versions.


This interface allows you to hide toasts.

Parameters

Name Type Required Description
success function No The callback function that indicates a successful operation.
fail function No The callback function that indicates a failed operation.
complete function No The callback function that indicates the operation is completed. This function is executed regardless of whether the operation succeeds or fails.

Sample code

  1. // API-DEMO page/API/toast/toast.json
  2. {
  3. "defaultTitle": "Toast"
  4. }
  1. <!-- API-DEMO page/API/toast/toast.axml-->
  2. <view class="page">
  3. <view class="page-description">Toast API</view>
  4. <view class="page-section">
  5. <view class="page-section-title">my.showToast</view>
  6. <view class="page-section-btns">
  7. <view type="primary" onTap="showToastSuccess">Display the success prompt text</view>
  8. <view type="primary" onTap="showToastFail">Display the fail prompt text</view>
  9. </view>
  10. <view class="page-section-btns">
  11. <view type="primary" onTap="showToastException">Display the exception prompt text</view>
  12. <view type="primary" onTap="showToastNone">Show the "none" toast.</view>
  13. </view>
  14. </view>
  15. <view class="page-section">
  16. <view class="page-section-title">my.hideToast</view>
  17. <view class="page-section-btns">
  18. <view onTap="hideToast">Hide toasts.</view>
  19. </view>
  20. </view>
  21. </view>
  1. // API-DEMO page/API/toast/toast.js
  2. Page({
  3. showToastSuccess() {
  4. my.showToast({
  5. type: 'success',
  6. content: 'Operation succeeded',
  7. duration: 3000,
  8. success: () => {
  9. my.alert({
  10. title: 'Toast disappeared',
  11. });
  12. },
  13. });
  14. },
  15. showToastFail() {
  16. my.showToast({
  17. type: 'fail',
  18. content: 'Operation failed',
  19. duration: 3000,
  20. success: () => {
  21. my.alert({
  22. title: 'Toast disappeared',
  23. });
  24. },
  25. });
  26. },
  27. showToastException() {
  28. my.showToast({
  29. type: 'exception',
  30. content: 'Network exception',
  31. duration: 3000,
  32. success: () => {
  33. my.alert({
  34. title: 'Toast disappeared',
  35. });
  36. },
  37. });
  38. },
  39. showToastNone() {
  40. my.showToast({
  41. type: 'none',
  42. content: 'Wait a moment',
  43. duration: 3000,
  44. success: () => {
  45. my.alert({
  46. title: 'Toast disappeared',
  47. });
  48. },
  49. });
  50. },
  51. hideToast() {
  52. my.hideToast()
  53. },
  54. })

my.showLoading

Note: This interface is only supported in mPaaS 10.1.32 and later versions.

This interface allows you to display a transition effect with a loading prompt. This interface can be used together with the my.hideLoading operation.

Parameters

Name Type Required Description
content String No The loading prompt.
delay Number No The delay to display. Unit: ms. Default value: 0. If the my.hideLoading operation is performed before the specified time, the loading process is not shown.
success Function No The callback function that indicates a successful call.
fail Function No The callback function that indicates a failed call.
complete Function No The callback function that indicates the call is completed (this will be executed regardless of whether the call succeeds or fails).

Sample code

  1. // API-DEMO page/API/loading/loading.json
  2. {
  3. "defaultTitle": "Loading prompt"
  4. }
  1. <!-- API-DEMO page/API/loading/loading.axml-->
  2. <view class="page">
  3. <view class="page-section">
  4. <view class="page-section-title">
  5. During the loading process, the whole HTML5 page is covered and becomes not interactive.
  6. </view>
  7. <view class="page-section-btns">
  8. <view onTap="showLoading">Show the loading prompt.</view>
  9. </view>
  10. </view>
  11. </view>
  1. // API-DEMO page/API/loading/loading.js
  2. Page({
  3. showLoading() {
  4. my.showLoading({
  5. content: 'Loading...',
  6. delay: 1000,
  7. });
  8. setTimeout(() => {
  9. my.hideLoading();
  10. }, 5000);
  11. },
  12. });
  1. /* API-DEMO page/API/loading/loading.acss */
  2. .tips{
  3. margin-left: 10px;
  4. margin-top: 20px;
  5. color: red;
  6. font-size: 12px;
  7. }
  8. .tips .item {
  9. margin: 5px 0;
  10. color: #888888;
  11. line-height: 14px;
  12. }

my.hideLoading

Note: This interface is only supported in mPaaS 10.1.32 and later versions.

This interface allows you to hide a transition effect that is specified for showing the loading process. This interface can be used together with the my.showLoading operation.

Parameters

Name Type Required Description
page Object No The page instance on which you want the my.hideLoading operation to be performed.

Sample code

  1. Page({
  2. onLoad() {
  3. my.showLoading();
  4. const that = this;
  5. setTimeout(() => {
  6. my.hideLoading({
  7. page: that, // Specify the page parameter to ensure that the my.hideLoading operation is performed on a specific page as required.
  8. });
  9. }, 4000);
  10. }
  11. })

my.showActionSheet

Note: This interface is only supported in mPaaS 10.1.32 and later versions.

This interface allows you to show the action sheet.

Parameters

Name Type Required Description Minimum base library version
title String No The title of the action sheet.
items String Array Required The string array of the texts that are displayed on the buttons in the action sheet.
cancelButtonText String No The text that is displayed on the Cancel button. Default value: “Cancel”. Note that for Android, this parameter is not supported and the Cancel button is not shown.
destructiveBtnIndex Number No The index number of a specific button. The minimum value is 0. This parameter is supported only for iOS.
Applicable scenarios: This operation allows you to delete or clear data. By default, index numbers are displayed in red.
badges Object Array No The array of objects that need to be highlighted. The following table describes the parameters that you need to specify for each object in the array. 1.9.0
success Function No The callback function that indicates a successful call.
fail Function No The callback function that indicates a failed call.
complete Function No The callback function that indicates the call is completed (this will be executed regardless of whether the call succeeds or fails).

Parameters to be specified for each object in the badges parameter

Name Type Description
index Number The index number of the object that needs to be highlighted. The minimum value is 0.
type String The highlight style. Valid values: none, point, num, text, and more.
  • If you set this parameter to none, no red dot is displayed when the object is highlighted.
  • If you set this parameter to point, a red dot without a text is displayed when the object is highlighted.
  • If you set this parameter to text, a red circle with a text in it is displayed when the object is highlighted.
  • If you set this parameter to more, you need to further configure a style as required.
text String The custom text that appears when the object is highlighted.
  • If you set the type parameter to none, point, or more, you do not need to set this parameter.
  • If you set the type parameter to num, or the text you specify is a decimal or a number less than or equal to 0, the text does not appear when the object is highlighted. If the text you specify is a number greater than 100, the text appears as .

Sample code

  1. // API-DEMO page/API/action-sheet/action-sheet.json
  2. {
  3. "defaultTitle": "Action Sheet"
  4. }
  1. <!-- API-DEMO page/API/action-sheet/action-sheet.axml-->
  2. <view class="page">
  3. <view class="page-description">The API operation for showing the action sheet</view>
  4. <view class="page-section">
  5. <view class="page-section-title">my.showActionSheet</view>
  6. <view class="page-section-demo">
  7. <button type="primary" onTap="showActionSheet">Show the action sheet.</button>
  8. </view>
  9. </view>
  10. </view>
  1. // API-DEMO page/API/action-sheet/action-sheet.js
  2. Page({
  3. showActionSheet() {
  4. my.showActionSheet({
  5. title: 'Alipay-ActionSheet',
  6. items: ['Menu 1', 'Menu 2', 'Menu 3'],
  7. cancelButtonText: 'Cancelled',
  8. success: (res) => {
  9. const btn = res.index === -1 ? 'Cancel' : 'No.' + res.index;
  10. my.alert({
  11. title: `You selected ${btn}`
  12. });
  13. },
  14. });
  15. },
  16. });