支付宝小程序API 路由
my.switchTab
简介
my.switchTab 是跳转到指定标签页（tabbar）页面，并关闭其他所有非标签页页面的 API。
如果小程序是一个多标签（tab）应用，即客户端窗口的底部栏可以切换页面，那么可以通过标签页配置项指定标签栏的表现形式，以及标签切换时显示的对应页面。
通过页面跳转 (my.navigateTo）或者页面重定向（my.redirectTo）所到达的页面，即使是定义在标签页配置中的页面，也不会显示底部的标签栏。标签页的第一个页面必须是首页。
相关问题请参见下文 路由FAQ。
扫码体验
示例代码
// app.json
{
"tabBar": {
"items": [{
"pagePath": "page/home/index",
"name": "首页"
},{
"pagePath": "page/user/index",
"name": "用户"
}]
}
}//.js
my.switchTab({
url: 'page/home/index'
})入参
Object 类型，属性如下：
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| url | String | 是 | 跳转的标签页的路径（需在 app.json 的 tabbar 字段定义的页面）。注意：路径后不能带参数。 |
| success | Function | 否 | 调用成功的回调函数。 |
| fail | Function | 否 | 调用失败的回调函数。 |
| complete | Function | 否 | 调用结束的回调函数（调用成功、失败都会执行）。 |
tabBar 配置
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| textColor | HexColor | 否 | 文字颜色。 |
| selectedColor | HexColor | 否 | 选中文字颜色。 |
| backgroundColor | HexColor | 否 | 背景色。 |
| items | Array | 是 | 每个标签（tab）配置。 |
item 配置：
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| pagePath | String | 是 | 设置页面路径。 |
| name | String | 是 | 名称。 |
| icon | String | 否 | 普通图标路径。 |
| activeIcon | String | 否 | 高亮图标路径。 |
示例配置
// tabBar 示例配置
{
"tabBar": {
"textColor": "#dddddd",
"selectedColor": "#49a9ee",
"backgroundColor": "#ffffff",
"items": [
{
"pagePath": "pages/index/index",
"name": "首页"
},
{
"pagePath": "pages/logs/logs",
"name": "日志"
}
]
}
}my.reLaunch
简介
my.reLaunch 是关闭当前所有页面，跳转到应用内的某个指定页面的 API。
相关问题请参见下文 路由FAQ 。
使用限制
基础库 1.4.0 或更高版本；支付宝客户端 10.1.8 或更高版本，若版本较低，建议采取 兼容处理。
扫码体验
示例代码
// .js
my.reLaunch({
url: '/page/index'
})入参
Object 类型，属性如下：
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| url | String | 是 | 页面路径。如果页面不为 tabbar 页面则路径后可以带参数。参数规则：路径与参数之间使用?分隔，参数键与参数值用=相连，不同参数必须用&分隔。示例：path?key1=value1&key2=value2 |
| success | Function | 否 | 调用成功的回调函数。 |
| fail | Function | 否 | 调用失败的回调函数。 |
| complete | Function | 否 | 调用结束的回调函数（调用成功、失败都会执行）。 |
my.redirectTo
简介
my.redirectTo 是关闭当前页面，跳转到应用内的某个指定页面的 API。
相关问题请参见下文路由FAQ 。
扫码体验
示例代码
my.redirectTo({
url: 'new_page?count=100' //路径可以使用相对路径或绝对路径的方式进行传递
})以跳转至首页 index 页面为例：
- 使用绝对路径：url: /pages/index/index
- 使用相对路径：url: ../index/index
入参
Object 类型，属性如下：
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| url | String | 是 | 需要跳转的应用内非 tabbar 的目标页面路径 ,路径后可以带参数。参数规则：路径与参数之间使用?分隔，参数键与参数值用=相连，不同参数必须用&分隔。示例：path?key1=value1&key2=value2 |
| success | Function | 否 | 调用成功的回调函数。 |
| fail | Function | 否 | 调用失败的回调函数。 |
| complete | Function | 否 | 调用结束的回调函数（调用成功、失败都会执行）。 |
my.navigateTo
简介
my.navigateTo 是从当前页面，跳转到应用内的某个指定页面的 API。
相关问题请参见 路由FAQ 。
使用限制
- 可使用 my.navigateBack 返回到原来页面。
- 小程序中页面栈最多十层。
- my.navigateTo 和 my.redirectTo 不允许跳转到选项卡（tabbar）页面；若需跳转到 tabbar 页面，请使用 my.switchTab。
扫码体验
示例代码
// navigateTo.json
{
"defaultTitle": "Navigator"
}<!-- navigateTo.axml-->
<view class="page">
<view class="page-section">
<button type="primary" onTap="navigateTo">跳转新页面</button>
<button type="primary" onTap="redirectTo">在当前页面打开新页面</button>
<button type="primary" onTap="switchTab">跳转到“我的”</button>
<button type="primary" onTap="reLaunch">重新打开</button>
</view>
</view>// navigateTo.js
Page({
navigateTo() {
my.navigateTo({ url: './back' })
},
redirectTo() {
my.redirectTo({ url: './back' })
},
reLaunch() {
my.reLaunch({
url: '/demo/my',
})
},
switchTab() {
my.switchTab({
url: '/demo/my',
success: () => {
my.showToast({
content: '成功',
type: 'success',
duration: 4000
});
}
}
);
},
})<!-- navigateBack.axml-->
<view class="page">
<view class="page-section">
<button type="primary" onTap="navigateBack">返回上一页</button>
</view>
</view>// navigateBack.js
Page({
navigateBack() {
my.navigateBack()
},
});// navigateBack.json
{
"defaultTitle": "Navigator"
}入参
Object 类型，属性如下：
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| url | String | 是 | 需要跳转的应用内非 tabbar 的目标页面路径，路径后可以带参数。参数规则：路径与参数之间使用 ?分隔，参数键与参数值用=相连，不同参数必须用&分隔。示例：path?key1=value1&key2=value2 |
| success | Function | 否 | 调用成功的回调函数。 |
| fail | Function | 否 | 调用失败的回调函数。 |
| complete | Function | 否 | 调用结束的回调函数（调用成功、失败都会执行）。 |
my.navigateBack
简介
my.navigateBack 是关闭当前页面，返回上一级或多级页面的 API。可通过 Page.getCurrentPages 获取当前的页面栈信息，决定需要返回几层。
相关问题请参见下文路由FAQ 。
扫码体验
示例代码
// navigateTo.json
{
"defaultTitle": "Navigator"
}<!-- navigateTo.axml-->
<view class="page">
<view class="page-section">
<button type="primary" onTap="navigateTo">跳转新页面</button>
<button type="primary" onTap="redirectTo">在当前页面打开新页面</button>
<button type="primary" onTap="switchTab">跳转到“我的”</button>
<button type="primary" onTap="reLaunch">重新打开</button>
</view>
</view>// navigateTo.js
Page({
navigateTo() {
my.navigateTo({ url: './back' })
},
redirectTo() {
my.redirectTo({ url: './back' })
},
reLaunch() {
my.reLaunch({
url: '/demo/my',
})
},
switchTab() {
my.switchTab({
url: '/demo/my',
success: () => {
my.showToast({
content: '成功',
type: 'success',
duration: 4000
});
}
}
);
},
})<!-- navigateBack.axml-->
<view class="page">
<view class="page-section">
<button type="primary" onTap="navigateBack">返回上一页</button>
</view>
</view>// navigateBack.js
Page({
navigateBack() {
my.navigateBack()
},
});// navigateBack.json
{
"defaultTitle": "Navigator"
}入参
Object 类型，属性如下：
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| delta | Number | 否 | 返回的页面数，如果 delta 大于现有打开的页面数，则返回到首页。默认值为 1。 |
路由 FAQ
Q：使用 my.navigateTo 或者 my.redirectTo 跳转的页面为什么不显示底部的 tab 栏？
A：通过页面跳转（my.navigateTo）或者页面重定向（my.redirectTo）所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏。若要跳转到 tab 页面，请使用 my.switchTab 方法。
Q：my.navigateTo 或者 my.switchTab 是否支持带参数跳转？
A：支持。
参数规则：路径与参数之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数必须用 & 分隔。
示例：path?key1=value1&key2=value2
Q：使用 my.redirectTo 跳转页面，是否可以去掉左上角的返回按钮？
A：当页面栈深度为 1 时，使用 my.redirectTo 跳转页面的左上角不会有返回按钮。
- 建议通过 getCurrentPages 方法判断页面栈峰值。
- 或者可以直接使用 my.reLaunch 进行跳转，使用 my.reLaunch 进行跳转时，不允许跳转到 tabbar 页面。
Q：小程序多次通过 my.navigateTo 跳转，尝试几次后为何再点击不会跳转了？
A：小程序规定最多不能超过 10 层页面栈，建议通过 getCurrentPages 方法判断页面栈峰值，超过后用重定向跳转页面。
Q：小程序中的导航栏返回按钮是否能隐藏？
A：因为有层级的原因，所以会有返回按钮。可以调用 my.reLaunch 方法关闭当前所有页面去跳转到此页面，就没有这个返回按钮了。