my.switchTab
Jump to the specified tabBar page and close all other pages that are not tabBar.
Note:
See Route related FAQs to learn more.
Sample code
// app.json
{
"tabBar": {
"items": [{
"pagePath": "page/home/index",
"name": "Home"
},{
"pagePath": "page/user/index",
"name": "User"
}]
}
}
//.js
my.switchTab({
url: 'page/home/index'
})
Parameters
The parameters are of Object type, with attributes as follows:
Parameter | Type | Required | Description |
url | String | Yes | Path of the jumping tabBar page (page to be defined in the tabBar field in the Note The path cannot be followed by parameters. |
success | Function | No | Callback function upon call success. |
fail | Function | No | Callback function upon call failure. |
complete | Function | No | Callback function upon call completion (to be executed upon either call success or failure). |
tabBar Configuration
Attribute | Type | Required | Description |
textColor | HexColor | No | Text color. |
selectedColor | HexColor | No | Color of highlighted text. |
backgroundColor | HexColor | No | Background color. |
items | Array | Yes | Configured for each tab. |
configurations for items
:
Attribute | Type | Required | Description |
pagePath | String | Yes | Set page path. |
name | String | Yes | Name. |
icon | String | No | Normal icon path. The recommended size is 60 × 60 px, and the system will stretch or scale any incoming images non-proportionally. |
activeIcon | String | No | Highlighted icon path. |
Sample configuration
// tabBar Sample configuration
{
"tabBar": {
"textColor": "#dddddd",
"selectedColor": "#49a9ee",
"backgroundColor": "#ffffff",
"items": [
{
"pagePath": "pages/index/index",
"name": "Home"
},
{
"pagePath": "pages/logs/logs",
"name": "Log"
}
]
}
}
my.reLaunch
Close all current pages and jump to the specified page within the application.
Requirement on version: Base library 1.4.0 or later versions. For earlier versions, it is suggested to perform compatibility processing.
See Route related FAQs to learn more.
Sample code
my.reLaunch({
url: '/page/index'
})
Parameters
The parameters are of Object type, with attributes as follows:
Parameter | Type | Required | Description |
url | String | Yes | Page path If the page is not a tabBar page, the path can be followed by parameters. Rules for the parameters: The path and parameter are separated with “?”, the parameter key and the parameter value are connected with “=”, and different parameters must be separated with “&”, such as |
success | Function | No | Callback function upon call success. |
fail | Function | No | Callback function upon call failure. |
complete | Function | No | Callback function upon call completion (to be executed upon either call success or failure). |
my.redirectTo
Close the current page and jump to the specified page within the application.
See Route related FAQs to learn more.
When you use my.redirectTo
to navigate to a specific page, you will be redirected to the target page on which no back arrow is available, and the current page will be closed.
Sample code
my.redirectTo({
url: 'new_page?count=100' //The URL can be an absolute or relative path
})
With redirecting to the index page of the home page for example:
Use absolute path: URL is
/pages/index/index
.Use relative path: URL is
../index/index
.
Parameters
The parameters are of Object type, with attributes as follows:
Parameter | Type | Required | Description |
url | String | Yes | The application for the jumping does not include the destination page path of the tabBar. The path can be followed by parameters. Rules for the parameters: The path and parameter are separated with “?”, the parameter key and the parameter value are connected with “=”, and different parameters must be separated with “&”, such as |
success | Function | No | Callback function upon call success. |
fail | Function | No | Callback function upon call failure. |
complete | Function | No | Callback function upon call completion (to be executed upon either call success or failure). |
my.navigateTo
Maintain the current page and jump to the specified page within the application.
You can use
my.navigateBack
to return to the original page.The maximum page depth is 10. In other words, the
navigateTo
can be called 10 times at most.
my.navigateTo
and my.redirectTo
do not support jumping to tabBar page. If neccessary, you can use my.switchTab to redirect to the tabBar page.
See Route related FAQs to learn more.
Sample code
// API-DEMO page/API/navigator/navigator.json
{
"defaultTitle": "page redirection"
}
<!-- API-DEMO page/API/navigator/navigator.axml-->
<view class="page">
<view class="page-section">
<button type="primary" onTap="navigateTo">Jump to new page</button>
<button type="primary" onTap="navigateBack">Return to previous page</button>
<button type="primary" onTap="redirectTo">Open on the current page - obtain user information</button>
<button type="primary" onTap="switchTab">Jump Tab - component</button>
<view class="page-description">This Demo only provides instructions on APIs, not covering mini program redirection function. To learn about the mini program redirection, see the relevant documents.</view>
<button type="primary" onTap="navigateToMiniProgram">Jump to mini program</button>
<button type="primary" onTap="navigateBackMiniProgram">Jump back to mini program</button>
</view>
</view>
// API-DEMO page/API/navigator/navigator.js
Page({
navigateTo() {
my.navigateTo({ url: '../get-user-info/get-user-info' })
},
navigateBack() {
my.navigateBack()
},
redirectTo() {
my.redirectTo({ url: '../get-user-info/get-user-info' })
},
navigateToMiniProgram() {
if (my.canIUse('navigateToMiniProgram')) {
my.navigateToMiniProgram({
appId: '2017072607907880',
extraData: {
"data1": "test"
},
success: (res) => {
console.log(JSON.stringify(res))
},
fail: (res) => {
console.log(JSON.stringify(res))
}
});
}
},
navigateBackMiniProgram() {
if (my.canIUse('navigateBackMiniProgram')) {
my.navigateBackMiniProgram({
extraData: {
"data1": "test"
},
success: (res) => {
console.log(JSON.stringify(res))
},
fail: (res) => {
console.log(JSON.stringify(res))
}
});
}
},
switchTab() {
my.switchTab({
url: '/page/tabBar/component/index',
success: () => {
my.showToast({
content: 'Succeeded',
type: 'success',
duration: 4000
});
}
}
);
},
})
/* API-DEMO page/API/navigator/navigator.acss */
button + button {
margin-top: 20rpx;
}
Parameters
The parameters are of Object type, with attributes as follows:
Parameter | Type | Required | Description |
url | String | Yes | The application for thejumping does not include the destination page path of the tabBar. The path can be followed by parameters. Rules for the parameters: The path and parameter are separated with “?”, the parameter key and the parameter value are connected with “=”, and different parameters must be separated with “&”, such as |
success | Function | No | Callback function upon call success. |
fail | Function | No | Callback function upon call failure. |
complete | Function | No | Callback function upon call completion (to be executed upon either call success or failure). |
my.navigateBack
Close the current page and return to the previous one or upper-level page. It is possible to use getCurrentPages
to get the current page stack information and decide how many levels to return.
See Route related FAQs to learn more.
Sample code
// API-DEMO page/API/navigator/navigator.json
{
"defaultTitle": "page redirection"
}
<!-- API-DEMO page/API/navigator/navigator.axml-->
<view class="page">
<view class="page-section">
<button type="primary" onTap="navigateTo">Navigate to new page</button>
<button type="primary" onTap="navigateBack">Return to previous page</button>
<button type="primary" onTap="redirectTo">Open on the current page - obtain user information</button>
<button type="primary" onTap="switchTab">Navigate Tab - component</button>
<view class="page-description">This Demo only provides instructions on APIs, not covering mini program redirection function. To learn about the mini program redirection, see the relevant documents.</view>
<button type="primary" onTap="navigateToMiniProgram">Navigate to mini program</button>
<button type="primary" onTap="navigateBackMiniProgram">Navigate back to mini program</button>
</view>
</view>
// API-DEMO page/API/navigator/navigator.js
Page({
navigateTo() {
my.navigateTo({ url: '../get-user-info/get-user-info' })
},
navigateBack() {
my.navigateBack()
},
redirectTo() {
my.redirectTo({ url: '../get-user-info/get-user-info' })
},
navigateToMiniProgram() {
if (my.canIUse('navigateToMiniProgram')) {
my.navigateToMiniProgram({
appId: '2017072607907880',
extraData: {
"data1": "test"
},
success: (res) => {
console.log(JSON.stringify(res))
},
fail: (res) => {
console.log(JSON.stringify(res))
}
});
}
},
navigateBackMiniProgram() {
if (my.canIUse('navigateBackMiniProgram')) {
my.navigateBackMiniProgram({
extraData: {
"data1": "test"
},
success: (res) => {
console.log(JSON.stringify(res))
},
fail: (res) => {
console.log(JSON.stringify(res))
}
});
}
},
switchTab() {
my.switchTab({
url: '/page/tabBar/component/index',
success: () => {
my.showToast({
content: 'Succeeded',
type: 'success',
duration: 4000
});
}
}
);
},
})
/* API-DEMO page/API/navigator/navigator.acss */
button + button {
margin-top: 20rpx;
}
Parameters
The parameters are of Object type, with attributes as follows:
Parameter | Type | Required | Default | Description |
delta | Number | No | 1 | Number of pages to return. If delta is greater than the number of open pages, it returns to the home page. |
Route related FAQs
Q: When I use
my.navigateTo
ormy.redirectTo
for redirecting the page, why the page does not show the tabBar at the bottom?A: If you redirect to the page through command (my.navigateTo) or command (my.redirectTo), the page will not show tabBar at the bottom even defined in tabBar configuration. To redirect to the tab, use the my.switchTab method.
Q: Does
my.navigateTo
support parameter input?A: Yes.
Parameter rule: Use between the path and the parameter “?” Concatenate the parameter key and the parameter value with “=”, and separate different parameters with “&”.
Example:
path? key1=value1&key2=value2
Q: Can I remove the Back button in the upper-left corner when I use
my.redirectTo
for page redirection?A: When the page stack depth is 1, you cannot see the Back button in the upper-left corner of the target page after you use my.redirectTo.
We recommend that you determine the peak page stack depth through the getCurrentPages method.
Alternatively, use my.reLaunch for redirection. When you use my.reLaunch for redirection, you cannot redirect to the tabBar page.
Q: The mini program has been redirected many times by using
my.navigateTo
. However, the redirection fails after another a few attempts. Why?A: The maximum page stack depth for mini programs is 10. It is recommended that you determine the peak page stack depth through getCurrentPages and use redirection for page jumping when the maximum depth is exceeded.
Q: Can I hide the Back button in the navigation bar of the mini program?
A: No, the Back button always appears due to the hierarchy. You can hide the Back button through the my.reLaunch method to close all current pages and redirect to this page.