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
// API-DEMO page/API/alert/alert.json
{
"defaultTitle": "Alert"
}
<!-- API-DEMO page/API/alert/alert.axml-->
<view class="page">
<view class="page-description">The 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">Display the alert box</button>
</view>
</view>
</view>
// API-DEMO page/API/alert/alert.js
Page({
alert() {
my.alert({
title: 'Dear',
content: 'Your monthly bill has been generated',
buttonText: 'Got it',
success: () => {
my.alert({
title: 'The user has clicked Got it',
});
}
});
},
})
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
// API-DEMO page/API/confirm/confirm.json
{
"defaultTitle": "Confirm"
}
<!-- API-DEMO page/API/confirm/confirm.axml-->
<view class="page">
<view class="page-description">The confirmation 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">Display the confirmation box</button>
</view>
</view>
</view>
// API-DEMO page/API/confirm/confirm.js
Page({
comfirm() {
my.confirm({
title: 'Reminder',
content: 'Do you want to query the package with this tracking number: \n1234567890',
confirmButtonText: 'Query now',
cancelButtonText: 'Not now',
success: (result) => {
my.alert({
title: `${result.confirm}`,
});
},
});
},
});
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
my.prompt({
title: 'The single-line title',
message: 'Explain the current situation and prompt the user with the solution, which is preferably no more than two lines in length',
placeholder: 'Leave a message to friends',
okButtonText: 'OK',
cancelButtonText: 'Cancel',
success: (result) => {
my.alert({
title: JSON.stringify(result),
});
},
});
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
// 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">Display the success prompt text</view>
<view type="primary" onTap="showToastFail">Display the fail prompt text</view>
</view>
<view class="page-section-btns">
<view type="primary" onTap="showToastException">Display the exception prompt text</view>
<view type="primary" onTap="showToastNone">Show the "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 toasts.</view>
</view>
</view>
</view>
// API-DEMO page/API/toast/toast.js
Page({
showToastSuccess() {
my.showToast({
type: 'success',
content: 'Operation succeeded',
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 exception',
duration: 3000,
success: () => {
my.alert({
title: 'Toast disappeared',
});
},
});
},
showToastNone() {
my.showToast({
type: 'none',
content: 'Wait a moment',
duration: 3000,
success: () => {
my.alert({
title: 'Toast disappeared',
});
},
});
},
hideToast() {
my.hideToast()
},
})
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
// 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">Display the success prompt text</view>
<view type="primary" onTap="showToastFail">Display the fail prompt text</view>
</view>
<view class="page-section-btns">
<view type="primary" onTap="showToastException">Display the exception prompt text</view>
<view type="primary" onTap="showToastNone">Show the "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 toasts.</view>
</view>
</view>
</view>
// API-DEMO page/API/toast/toast.js
Page({
showToastSuccess() {
my.showToast({
type: 'success',
content: 'Operation succeeded',
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 exception',
duration: 3000,
success: () => {
my.alert({
title: 'Toast disappeared',
});
},
});
},
showToastNone() {
my.showToast({
type: 'none',
content: 'Wait a moment',
duration: 3000,
success: () => {
my.alert({
title: 'Toast disappeared',
});
},
});
},
hideToast() {
my.hideToast()
},
})
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
// API-DEMO page/API/loading/loading.json
{
"defaultTitle": "Loading prompt"
}
<!-- API-DEMO page/API/loading/loading.axml-->
<view class="page">
<view class="page-section">
<view class="page-section-title">
During the loading process, the whole HTML5 page is covered and becomes not interactive.
</view>
<view class="page-section-btns">
<view onTap="showLoading">Show the loading prompt.</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 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
Page({
onLoad() {
my.showLoading();
const that = this;
setTimeout(() => {
my.hideLoading({
page: that, // Specify the page parameter to ensure that the my.hideLoading operation is performed on a specific page as required.
});
}, 4000);
}
})
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.
|
|
text | String | The custom text that appears when the object is highlighted.
|
Sample code
// 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">The API operation for showing the action sheet</view>
<view class="page-section">
<view class="page-section-title">my.showActionSheet</view>
<view class="page-section-demo">
<button type="primary" onTap="showActionSheet">Show the 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: 'Cancelled',
success: (res) => {
const btn = res.index === -1 ? 'Cancel' : 'No.' + res.index;
my.alert({
title: `You selected ${btn}`
});
},
});
},
});