全部产品
云市场
云游戏

路由

更新时间:2020-07-07 19:42:16

my.switchTab

该接口用于跳转到指定标签页(tabbar)页面,并关闭其他所有非标签页页面。

说明
  • 如果小程序是一个多标签(tab)应用,即客户端窗口的底部栏可以切换页面,那么可以通过标签页配置项指定标签栏的表现形式,以及标签切换时显示的对应页面。
  • 通过页面跳转(my.navigateTo)或者页面重定向(my.redirectTo)所到达的页面,即使是定义在标签页配置中的页面,也不会显示底部的标签栏。
  • 标签页的第一个页面必须是首页。

相关问题参见 路由常见问题

效果示例

代码示例

  1. // app.json
  2. {
  3. "tabBar": {
  4. "items": [{
  5. "pagePath": "page/home/index",
  6. "name": "首页"
  7. },{
  8. "pagePath": "page/user/index",
  9. "name": "用户"
  10. }]
  11. }
  12. }
  1. //.js
  2. my.switchTab({
  3. url: 'page/home/index'
  4. })

入参

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 普通图标路径。推荐大小为 60*60 px ,系统会对任意传入的图片非等比拉伸或缩放。
activeIcon String 高亮图标路径。

配置示例

  1. // tabBar 示例配置
  2. {
  3. "tabBar": {
  4. "textColor": "#dddddd",
  5. "selectedColor": "#49a9ee",
  6. "backgroundColor": "#ffffff",
  7. "items": [
  8. {
  9. "pagePath": "pages/index/index",
  10. "name": "首页"
  11. },
  12. {
  13. "pagePath": "pages/logs/logs",
  14. "name": "日志"
  15. }
  16. ]
  17. }
  18. }

my.reLaunch

该接口用于关闭当前所有页面,跳转到应用内的某个指定页面。

版本要求:基础库 1.4.0 或更高版本,若版本较低,建议做 兼容处理

相关问题参见 路由常见问题

效果示例

代码示例

  1. my.reLaunch({
  2. url: '/page/index'
  3. })

入参

Object 类型,属性如下:

属性 类型 必填 描述
url String 页面路径。如果页面不为 tabbar 页面则路径后可以带参数。
参数规则:路径与参数之间使用?分隔,参数键与参数值用=相连,不同参数必须用&分隔。
示例: path?key1=value1&key2=value2
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

my.redirectTo

该接口用于关闭当前页面,跳转到应用内的某个指定页面。

相关问题参见 路由常见问题

说明:使用 my.redirectTo 跳转到某个页面的同时,会关闭当前页面再跳转到下个页面,所以在页面上没有返回箭头。

效果示例

代码示例

  1. my.redirectTo({
  2. url: 'new_page?count=100' //路径可以使用相对路径或绝对路径的方式进行传递
  3. })

以跳转至首页 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.navigateBack 返回到原来页面。
  • 小程序中页面栈最多十层。

my.navigateTomy.redirectTo 不允许跳转到选项卡(tabbar)页面;若需跳转到 tabbar 页面,请使用 my.switchTab

相关问题参见 路由常见问题

效果示例

代码示例

  1. // API-DEMO page/API/navigator/navigator.json
  2. {
  3. "defaultTitle": "页面跳转"
  4. }
  1. <!-- API-DEMO page/API/navigator/navigator.axml-->
  2. <view class="page">
  3. <view class="page-section">
  4. <button type="primary" onTap="navigateTo">跳转新页面</button>
  5. <button type="primary" onTap="navigateBack">返回上一页</button>
  6. <button type="primary" onTap="redirectTo">在当前页面打开 - 获取用户信息</button>
  7. <button type="primary" onTap="switchTab">跳转 Tab - 组件</button>
  8. <view class="page-description">本Demo不具备小程序跳转功能,仅展示 API 的使用,具体接入请参考小程序官方文档 API 的小程序相互跳转部分。</view>
  9. <button type="primary" onTap="navigateToMiniProgram">跳转到小程序</button>
  10. <button type="primary" onTap="navigateBackMiniProgram">跳回小程序</button>
  11. </view>
  12. </view>
  1. // API-DEMO page/API/navigator/navigator.js
  2. Page({
  3. navigateTo() {
  4. my.navigateTo({ url: '../get-user-info/get-user-info' })
  5. },
  6. navigateBack() {
  7. my.navigateBack()
  8. },
  9. redirectTo() {
  10. my.redirectTo({ url: '../get-user-info/get-user-info' })
  11. },
  12. navigateToMiniProgram() {
  13. if (my.canIUse('navigateToMiniProgram')) {
  14. my.navigateToMiniProgram({
  15. appId: '2017072607907880',
  16. extraData: {
  17. "data1": "test"
  18. },
  19. success: (res) => {
  20. console.log(JSON.stringify(res))
  21. },
  22. fail: (res) => {
  23. console.log(JSON.stringify(res))
  24. }
  25. });
  26. }
  27. },
  28. navigateBackMiniProgram() {
  29. if (my.canIUse('navigateBackMiniProgram')) {
  30. my.navigateBackMiniProgram({
  31. extraData: {
  32. "data1": "test"
  33. },
  34. success: (res) => {
  35. console.log(JSON.stringify(res))
  36. },
  37. fail: (res) => {
  38. console.log(JSON.stringify(res))
  39. }
  40. });
  41. }
  42. },
  43. switchTab() {
  44. my.switchTab({
  45. url: '/page/tabBar/component/index',
  46. success: () => {
  47. my.showToast({
  48. content: '成功',
  49. type: 'success',
  50. duration: 4000
  51. });
  52. }
  53. }
  54. );
  55. },
  56. })
  1. /* API-DEMO page/API/navigator/navigator.acss */
  2. button + button {
  3. margin-top: 20rpx;
  4. }

入参

Object 类型,属性如下:

属性 类型 必填 描述
url String 需要跳转的应用内非 tabbar 的目标页面路径 ,路径后可以带参数。
参数规则:路径与参数之间使用 ?分隔,参数键与参数值用=相连,不同参数必须用&分隔。
示例: path?key1=value1&key2=value2
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

my.navigateBack

该接口用于关闭当前页面,返回上一级或多级页面。可通过 getCurrentPages 获取当前的页面栈信息,决定需要返回几层。

相关问题参见 路由常见问题

效果示例

navigateBack

示例代码示例

  1. // API-DEMO page/API/navigator/navigator.json
  2. {
  3. "defaultTitle": "页面跳转"
  4. }
  1. <!-- API-DEMO page/API/navigator/navigator.axml-->
  2. <view class="page">
  3. <view class="page-section">
  4. <button type="primary" onTap="navigateTo">跳转新页面</button>
  5. <button type="primary" onTap="navigateBack">返回上一页</button>
  6. <button type="primary" onTap="redirectTo">在当前页面打开 - 获取用户信息</button>
  7. <button type="primary" onTap="switchTab">跳转 Tab - 组件</button>
  8. <view class="page-description">本Demo不具备小程序跳转功能,仅展示 API 的使用,具体接入请参考小程序官方文档 API 的小程序相互跳转部分。</view>
  9. <button type="primary" onTap="navigateToMiniProgram">跳转到小程序</button>
  10. <button type="primary" onTap="navigateBackMiniProgram">跳回小程序</button>
  11. </view>
  12. </view>
  1. // API-DEMO page/API/navigator/navigator.js
  2. Page({
  3. navigateTo() {
  4. my.navigateTo({ url: '../get-user-info/get-user-info' })
  5. },
  6. navigateBack() {
  7. my.navigateBack()
  8. },
  9. redirectTo() {
  10. my.redirectTo({ url: '../get-user-info/get-user-info' })
  11. },
  12. navigateToMiniProgram() {
  13. if (my.canIUse('navigateToMiniProgram')) {
  14. my.navigateToMiniProgram({
  15. appId: '2017072607907880',
  16. extraData: {
  17. "data1": "test"
  18. },
  19. success: (res) => {
  20. console.log(JSON.stringify(res))
  21. },
  22. fail: (res) => {
  23. console.log(JSON.stringify(res))
  24. }
  25. });
  26. }
  27. },
  28. navigateBackMiniProgram() {
  29. if (my.canIUse('navigateBackMiniProgram')) {
  30. my.navigateBackMiniProgram({
  31. extraData: {
  32. "data1": "test"
  33. },
  34. success: (res) => {
  35. console.log(JSON.stringify(res))
  36. },
  37. fail: (res) => {
  38. console.log(JSON.stringify(res))
  39. }
  40. });
  41. }
  42. },
  43. switchTab() {
  44. my.switchTab({
  45. url: '/page/tabBar/component/index',
  46. success: () => {
  47. my.showToast({
  48. content: '成功',
  49. type: 'success',
  50. duration: 4000
  51. });
  52. }
  53. }
  54. );
  55. },
  56. })
  1. /* API-DEMO page/API/navigator/navigator.acss */
  2. button + button {
  3. margin-top: 20rpx;
  4. }

入参

Object 类型,属性如下:

属性 类型 必填 默认值 描述
delta Number 1 返回的页面数,如果 delta 大于现有打开的页面数,则返回到首页。

路由常见问题

  • Q:使用 my.navigateTo 或者 my.redirectTo 跳转的页面为什么不显示底部的 tab 栏?
    A:通过页面跳转(my.navigateTo)或者页面重定向(my.redirectTo)所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏。若要跳转到 tab 页面,请使用 my.switchTab 方法。

  • Q:my.navigateTo 是否支持传参?
    A:支持。
    参数规则:路径与参数之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数必须用 & 分隔。
    示例path?key1=value1&key2=value2

  • Q:使用 my.redirectTo 跳转页面,是否可以去掉左上角的返回按钮?
    A:当页面栈深度为 1 时,使用 my.redirectTo 跳转页面的左上角不会有返回按钮。

  • Q:小程序多次通过 my.navigateTo 跳转,尝试几次后为何再点击不会跳转了?
    A:小程序规定最多不能超过 10 层页面栈,建议通过 getCurrentPages 方法判断页面栈峰值,超过后用重定向跳转页面。

  • Q:小程序中的导航栏返回按钮是否能隐藏?
    A:因为有层级的原因,所以会有返回按钮。可以调用 my.reLaunch 方法关闭当前所有页面去跳转到此页面,则不会有返回按钮。