Call my.alert to set the warning box style-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

my.alert

Note

This API is supported in mPaaS 10.1.32 and later.

This API displays an alert warning box. You can set the title, content, and button text for the warning box. Setting styles, such as images, is not supported.

Request parameters

Name	Type	Required	Description
title	String	No	The title of the warning box.
content	String	No	The content of the warning box.
buttonText	String	No	The button text. The default is Confirm.
success	Function	No	The callback function to execute when the call succeeds.
fail	Function	No	The callback function to execute when the call fails.
complete	Function	No	The callback function to execute when the call is complete, regardless of whether it succeeds or fails.

Code samples

// API-DEMO page/API/alert/alert.json
{
  "defaultTitle": "Alert"
}

<!-- API-DEMO page/API/alert/alert.axml-->
<view class="page">
  <view class="page-description">Alert Box API</view>
  <view class="page-section">
    <view class="page-section-title">my.alert</view>
    <view class="page-section-demo">
      <button type="primary" onTap="alert">Show Alert Box</button>
    </view>
  </view>
</view>

// API-DEMO page/API/alert/alert.js
Page({
  alert() {
    my.alert({
      title: 'Dear',
      content: 'Your bill for this month is ready',
      buttonText: 'Got it',
      success: () => {
        my.alert({
          title: 'User clicked "Got it"',
        });
      }
    });
  },
})

my.confirm

Note

This API is supported in mPaaS 10.1.32 and later.

This API displays a confirm dialog box. You can configure the title, content, and text for the confirm and cancel buttons.

Request parameters

Name	Type	Required	Description
title	String	No	The title of the confirm dialog box.
content	String	No	The content of the confirm dialog box.
confirmButtonText	String	No	The text for the confirm button. The default is Confirm.
cancelButtonText	String	No	The text for the cancel button. The default is Cancel.
success	Function	No	The callback function to execute when the call succeeds.
fail	Function	No	The callback function to execute when the call fails.
complete	Function	No	The callback function to execute when the call is complete, regardless of whether it succeeds or fails.

success return value

Name	Type	Description
confirm	Boolean	Returns `true` if Confirm is clicked. Returns `false` if Cancel is clicked.

Code samples

// API-DEMO page/API/confirm/confirm.json
{
    "defaultTitle": "Confirm"
}

<!-- API-DEMO page/API/confirm/confirm.axml-->
<view class="page">
  <view class="page-description">Confirm Dialog Box API</view>
  <view class="page-section">
    <view class="page-section-title">my.confirm</view>
    <view class="page-section-demo">
      <button type="primary" onTap="comfirm">Show Confirm Dialog Box</button>
    </view>
  </view>
</view>

// API-DEMO page/API/confirm/confirm.js
Page({
  comfirm() {
    my.confirm({
      title: 'Friendly Reminder',
      content: 'Do you want to query the tracking number:\n1234567890',
      confirmButtonText: 'Query Now',
      cancelButtonText: 'Not Now',
      success: (result) => {
        my.alert({
          title: `${result.confirm}`,
        });
      },
    });
  },
});

my.prompt

Important: This API is supported in base libraries 1.7.2 and later, and mPaaS 10.1.32 and later.

This API displays a dialog box that prompts the user to enter text.

Request parameters

Name	Type	Required	Description
title	String	No	The title of the prompt box.
message	String	No	The text in the prompt box. The default is Please enter content.
placeholder	String	No	The placeholder text in the input box.
align	String	No	The alignment of the message. Valid values are left, center, and right. For example, `iOS ‘center’, android ‘left’` means the message is center-aligned on an iOS client and left-aligned on an Android client.
okButtonText	String	No	The text for the OK button. The default is OK.
cancelButtonText	String	No	The text for the cancel button. The default is Cancel.
success	Function	No	The callback function to execute when the call succeeds.
fail	Function	No	The callback function to execute when the call fails.
complete	Function	No	The callback function to execute when the call is complete, regardless of whether it succeeds or fails.

success return value

Name	Type	Description
ok	Boolean	Returns true if OK is clicked. Returns false if Cancel is clicked.
inputValue	String	When `ok` is true, this returns the content entered by the user.

Code sample

my.prompt({
  title: 'Single-line title',
  message: 'Describe the current status and suggest a solution. It is best not to exceed two lines.',
  placeholder: 'Leave a message for a friend',
  okButtonText: 'OK',
  cancelButtonText: 'Cancel',
  success: (result) => {
    my.alert({
      title: JSON.stringify(result),
    });
  },
});

my.showToast

Note

This API is supported in mPaaS 10.1.32 and later.

This API displays a toast message that disappears after a specified duration.

Request parameters

Name	Type	Required	Description
content	String	No	The text content.
type	String	No	The toast type. This displays the corresponding icon. The default is `none`. Supported types are `success`, `fail`, `exception`, and `none`. The `exception` type requires text content.
duration	Number	No	The display duration in ms. The default is 2000.
success	Function	No	The callback function to execute when the call succeeds.
fail	Function	No	The callback function to execute when the call fails.
complete	Function	No	The callback function to execute when the call is complete, regardless of whether it succeeds or fails.

Code samples

// 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">Show success toast</view>
      <view type="primary" onTap="showToastFail">Show fail toast</view>
    </view>
    <view class="page-section-btns">
      <view type="primary" onTap="showToastException">Show exception toast</view>
      <view type="primary" onTap="showToastNone">Show none toast</view>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">my.hideToast</view>
    <view class="page-section-btns">
      <view onTap="hideToast">Hide toast</view>
    </view>
  </view>
</view>

// API-DEMO page/API/toast/toast.js
Page({
  showToastSuccess() {
    my.showToast({
      type: 'success',
      content: 'Operation successful',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'Toast disappeared',
        });
      },
    });
  },
  showToastFail() {
    my.showToast({
      type: 'fail',
      content: 'Operation failed',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'Toast disappeared',
        });
      },
    });
  },
  showToastException() {
    my.showToast({
      type: 'exception',
      content: 'Network error',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'Toast disappeared',
        });
      },
    });
  },
  showToastNone() {
    my.showToast({
      type: 'none',
      content: 'Reminder',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'Toast disappeared',
        });
      },
    });
  },
  hideToast() {
    my.hideToast()
  },
})

my.hideToast

Note

This API is supported in mPaaS 10.1.32 and later.

This API hides the toast message.

Request parameters

Name	Type	Required	Description
success	function	No	The callback function to execute when the API call succeeds.
fail	function	No	The callback function to execute when the API call fails.
complete	function	No	The callback function to execute when the API call is complete, regardless of whether it succeeds or fails.

Code samples

// 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">Show success toast</view>
      <view type="primary" onTap="showToastFail">Show fail toast</view>
    </view>
    <view class="page-section-btns">
      <view type="primary" onTap="showToastException">Show exception toast</view>
      <view type="primary" onTap="showToastNone">Show none toast</view>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">my.hideToast</view>
    <view class="page-section-btns">
      <view onTap="hideToast">Hide toast</view>
    </view>
  </view>
</view>

// API-DEMO page/API/toast/toast.js
Page({
  showToastSuccess() {
    my.showToast({
      type: 'success',
      content: 'Operation successful',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'Toast disappeared',
        });
      },
    });
  },
  showToastFail() {
    my.showToast({
      type: 'fail',
      content: 'Operation failed',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'Toast disappeared',
        });
      },
    });
  },
  showToastException() {
    my.showToast({
      type: 'exception',
      content: 'Network error',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'Toast disappeared',
        });
      },
    });
  },
  showToastNone() {
    my.showToast({
      type: 'none',
      content: 'Reminder',
      duration: 3000,
      success: () => {
        my.alert({
          title: 'Toast disappeared',
        });
      },
    });
  },
  hideToast() {
    my.hideToast()
  },
})

my.showLoading

Note

This API is supported in mPaaS 10.1.32 and later.

This API displays a loading indicator. Use it with my.hideLoading.

Request parameters

Name	Type	Required	Description
content	String	No	The text content of the loading indicator.
delay	Number	No	The delay before the indicator appears, in ms. The default is 0. If `my.hideLoading` is called before this time, the indicator is not displayed.
success	Function	No	The callback function to execute when the call succeeds.
fail	Function	No	The callback function to execute when the call fails.
complete	Function	No	The callback function to execute when the call is complete, regardless of whether it succeeds or fails.

Code samples

// API-DEMO page/API/loading/loading.json
{
    "defaultTitle": "Loading Indicator"
}

<!-- API-DEMO page/API/loading/loading.axml-->
<view class="page">
  <view class="page-section">
    <view class="page-section-title">
      After the loading indicator is displayed, it covers the entire H5 page, and page elements cannot be interacted with.
    </view>
    <view class="page-section-btns">
      <view onTap="showLoading">Show Loading Indicator</view>
    </view>
  </view>
</view>

// API-DEMO page/API/loading/loading.js
Page({
  showLoading() {
    my.showLoading({
      content: 'Loading...',
      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

Note

This API is supported in mPaaS 10.1.32 and later.

This API hides the loading indicator. Use it with my.showLoading.

Request parameters

Name	Type	Required	Description
page	Object	No	The current page instance. In some scenarios, you must specify on which page to execute `hideLoading`.

Code sample

Page({
  onLoad() {
    my.showLoading();
    const that = this;
    setTimeout(() => {
      my.hideLoading({
        page: that,  // This prevents the page from pointing incorrectly if you have switched to another page during execution.
      });
    }, 4000);
  }
})

my.showActionSheet

Note

This API is supported in mPaaS 10.1.32 and later.

This API displays an action sheet.

Request parameters

Name	Type	Required	Description	Minimum base library version
title	String	No	The menu title.	-
items	String Array	Yes	An array of strings for the menu button text.	-
cancelButtonText	String	No	The text for the cancel button. The default is Cancel. Important On the Android platform, this field is invalid and the cancel button is not displayed.	-
destructiveBtnIndex	Number	No	(iOS specific) The index of the button, starting from 0. Use this for scenarios such as deleting or clearing data. The default color is red.	-
badges	Object Array	No	An array of options to be highlighted. For the fields of the objects in the array, see the table below.	1.9.0
success	Function	No	The callback function to execute when the call succeeds.	-
fail	Function	No	The callback function to execute when the call fails.	-
complete	Function	No	The callback function to execute when the call is complete, regardless of whether it succeeds or fails.	-

Fields of objects in the badges array

Name	Type	Description
index	Number	The index of the option to be highlighted, starting from 0.
type	String	The highlight type. Supported types are none (no red dot), point (red dot), num (numeric red dot), text (text red dot), and more (…).
text	String	Custom highlight text: This text is optional when the highlight type is none, point, or more. When the highlight type is num, the text is not displayed if the value is a decimal or <=0. If the value is >100, the text is displayed as … .

Code samples

// 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">Action Sheet API</view>
  <view class="page-section">
    <view class="page-section-title">my.showActionSheet</view>
    <view class="page-section-demo">
      <button type="primary" onTap="showActionSheet">Show Action Sheet</button>
    </view>
  </view>
</view>

// API-DEMO page/API/action-sheet/action-sheet.js
Page({
  showActionSheet() {
    my.showActionSheet({
      title: 'Alipay-ActionSheet',
      items: ['Menu 1', 'Menu 2', 'Menu 3'],
      cancelButtonText: 'Cancel',
      success: (res) => {
        const btn = res.index === -1 ? 'Cancel' : `Item ${res.index}`;
        my.alert({
          title: `You tapped: ${btn}`
        });
      },
    });
  },
});