文档

路由

更新时间:

my.switchTab

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

说明
  • 如果小程序是一个多标签(tab)应用,即客户端窗口的底部栏可以切换页面,那么可以通过标签页配置项指定标签栏的表现形式,以及标签切换时显示的对应页面。

  • 通过页面跳转(my.navigateTo)或者页面重定向(my.redirectTo)所到达的页面,即使是定义在标签页配置中的页面,也不会显示底部的标签栏。

  • 标签页的第一个页面必须是首页。

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

代码示例

// 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)配置。

items 配置:

属性

类型

必填

描述

pagePath

String

设置页面路径。

name

String

名称。

icon

String

普通图标路径。推荐大小为 60*60 px ,系统会对任意传入的图片非等比拉伸或缩放。

activeIcon

String

高亮图标路径。

配置示例

// tabBar 示例配置
{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "日志"
      }
    ]
  }
}

my.reLaunch

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

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

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

代码示例

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

入参

Object 类型,属性如下:

属性

类型

必填

描述

url

String

页面路径。如果页面不为 tabBar 页面则路径后可以带参数。参数规则:路径与参数之间使用?分隔,参数键与参数值用=相连,不同参数必须用&分隔。示例:path?key1=value1&key2=value2

success

Function

调用成功的回调函数。

fail

Function

调用失败的回调函数。

complete

Function

调用结束的回调函数(调用成功、失败都会执行)。

my.redirectTo

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

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

说明

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

代码示例

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.navigateBack 返回到原来页面。

  • 小程序中页面栈最多十层。

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

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

代码示例

// API-DEMO page/API/navigator/navigator.json
{
    "defaultTitle": "页面跳转"
}
<!-- API-DEMO page/API/navigator/navigator.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">跳转新页面</button>
    <button type="primary" onTap="navigateBack">返回上一页</button>
    <button type="primary" onTap="redirectTo">在当前页面打开 - 获取用户信息</button>
    <button type="primary" onTap="switchTab">跳转 Tab - 组件</button>
    <view class="page-description">本Demo不具备小程序跳转功能,仅展示 API 的使用,具体接入请参考小程序官方文档 API 的小程序相互跳转部分。</view>
    <button type="primary" onTap="navigateToMiniProgram">跳转到小程序</button>
    <button type="primary" onTap="navigateBackMiniProgram">跳回小程序</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: '成功',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})
/* API-DEMO page/API/navigator/navigator.acss */
button + button {
  margin-top: 20rpx;
}

入参

Object 类型,属性如下:

属性

类型

必填

描述

url

String

需要跳转的应用内非 tabBar 的目标页面路径 ,路径后可以带参数。参数规则:路径与参数之间使用 ?分隔,参数键与参数值用=相连,不同参数必须用&分隔。示例:path?key1=value1&key2=value2

success

Function

调用成功的回调函数。

fail

Function

调用失败的回调函数。

complete

Function

调用结束的回调函数(调用成功、失败都会执行)。

my.navigateBack

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

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

示例代码示例

// API-DEMO page/API/navigator/navigator.json
{
    "defaultTitle": "页面跳转"
}
<!-- API-DEMO page/API/navigator/navigator.axml-->
<view class="page">
  <view class="page-section">
    <button type="primary" onTap="navigateTo">跳转新页面</button>
    <button type="primary" onTap="navigateBack">返回上一页</button>
    <button type="primary" onTap="redirectTo">在当前页面打开 - 获取用户信息</button>
    <button type="primary" onTap="switchTab">跳转 Tab - 组件</button>
    <view class="page-description">本Demo不具备小程序跳转功能,仅展示 API 的使用,具体接入请参考小程序官方文档 API 的小程序相互跳转部分。</view>
    <button type="primary" onTap="navigateToMiniProgram">跳转到小程序</button>
    <button type="primary" onTap="navigateBackMiniProgram">跳回小程序</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: '成功',
            type: 'success',
            duration: 4000
          });
        }
      }
    );
  },
})
/* API-DEMO page/API/navigator/navigator.acss */
button + button {
  margin-top: 20rpx;
}

入参

Object 类型,属性如下:

属性

类型

必填

默认值

描述

delta

Number

1

返回的页面数,如果 delta 大于现有打开的页面数,则返回到首页。

路由常见问题

  • Q:使用 my.navigateTo 或者 my.redirectTo 跳转的页面为什么不显示底部的 tab 栏?

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

  • Qmy.navigateTo 是否支持传参?

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

  • Q:使用 my.redirectTo 跳转页面,是否可以去掉左上角的返回按钮?

    A:当页面栈深度为 1 时,使用 my.redirectTo 跳转页面的左上角不会有返回按钮。

  • Q:小程序多次通过 my.navigateTo 跳转,尝试几次后为何再点击不会跳转了?

    A:小程序规定最多不能超过 10 层页面栈,建议通过 getCurrentPages 方法判断页面栈峰值,超过后用重定向跳转页面。

  • Q:小程序中的导航栏返回按钮是否能隐藏?

    A:因为有层级的原因,所以会有返回按钮。可以调用 my.reLaunch 方法关闭当前所有页面去跳转到此页面,则不会有返回按钮。

  • 本页导读 (0)