小程序页面导航

声明式导航

在页面上声明一个 <navigator> 组件，通过点击该组件进行页面跳转

导航至 tabBar 页面

tabBar 页面就是在 tabBar 中配置的页面

1
<navigator url="/pages/home/home" open-type="switchTab">HOME</navigator>
  • url：跳转的页面路径，必须以 “/“ 开头
  • open-type：跳转方式，这里必须设置为 switchTab

导航至非 tabBar 页面

1
<navigator url="/pages/info/info" open-type="navigate">INFO</navigator>

open-type 属性的属性值必须为 navigate
也可以不写该属性，因为 open-type 默认值为 navigate

1
<navigator url="/pages/info/info">INFO</navigator>

后退导航

后退到上一个页面或者多级页面

1
<navigator open-type="navigateBack" delta="1">Back</navigator>

delta：回退的级数，属性值必须为 Number

后退导航需要将 open-type 属性设置为 navigateBack
当 delta="1" 时，可省略

1
<navigator open-type="navigateBack">Back</navigator>

==在 tabBar 中配置的页面声明回退导航，该回退导航不会生效==

导航传参

  • 参数与路径之间使用 ? 分隔
  • 参数键与参数值之间使用 = 相连
  • 不同的参数使用 & 分隔
1
<navigator url="/pages/info/info?gid=123456&pagesize=10">INFO</navigator>

编程式导航

调用小程序提供的 API ，实现页面跳转

导航至 tabBar 页面

tabBar 页面就是在 tabBar 中配置的页面

1
wx.switchTab(Object)

Object 参数对象的属性

属性名 类型 必选 说明
url String 是 需要跳转的 tabBar 页面路径，路径不能带参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数

导航至非 tabBar 页面

1
wx.navigateTo(Object)

Object 参数对象的属性

属性名 类型 必选 说明
url String 是 需要跳转的非 tabBar 页面路径
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数

后退导航

后退到上一个页面或者多级页面

1
wx.navigateBack(Object)

Object 参数对象的属性

属性名 类型 默认值 必选 说明
detail Number 1 否 返回的页面级数，如果 detail 大于现有页面数，则返回首页
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数

导航传参

  • 参数与路径之间使用 ? 分隔
  • 参数键与参数值之间使用 = 相连
  • 不同的参数使用 & 分隔
1
2
3
wx.navigateTo({
 url:"/pages/info/info?gid=123456&pagesize=10"
})

onLoad 事件获取参数

1
2
3
onLoad: function(options) {
 console.log(options)
}

options：导航参数