1. 什么是页面导航
页面导航指的是页面之间的相互跳转
。例如:浏览器中实现页面导航的方式有如下两种:
- <a>链接
- location.href
2. 小程序中实现页面导航的两种方式
a. 声明式导航
- 在页面上定义一个<navigator>导航组件
- 通过点击<navigator>组件实现页面跳转
b. 编程式导航
- 调用小程序的导航API,实现页面的跳转
3. 导航到tabBar页面(声明式)
tabBar页面
指的是被配置为tabBar的页面
在使用<navigator>组件跳转到指定的tabBar页面时,需要指定url
属性和open-type
属性,其中:
- url表示要跳转的
页面的地址
,必须以/
开头 - open-type表示
跳转的方式
,必须为switchTab
示例代码如下:
<navigator url="/pages/message/message" open-type="switchTab"> 导航到消息页面</navigator>
4. 导航到非tabBar页面(声明式)
非tabBar页面
指的是没有被配置为tabBar的页面。
在使用<navigator>组件跳转到普通的非tabBar页面时,则需要指定url
属性和open-type
属性,其中:
- url表示要跳转的
页面的地址
,必须以/
开头 - open-type表示
跳转的方式
,必须为navigate
<navigator url="/pages/info/info" open-type="navigate"> 导航到info页面</navigator>
注意:为了简便,在导航到非tabBar页面时,open-type="navigate"
属性可以省略
。
5. 后退导航(声明式)
如果要后退到上一页面或多级页面,则需要指定open-type属性和delta属性,其中:
open-type
的值必须是navigateBack
,表示要进行后退导航delta
的值必须是数字
,表示要后退的层级 示例代码如下:
<navigator open-type="navigateBack" delta='1'>返回上一页</navigator>
注意:为了简便,如果只是后退到上一页面,则可以省略delta属性
,因为其默认值就是1
6. 导航到tarBar页面(编程式导航)
调用wx.switchTab(Object object)
方法,可以跳转到tabBar页面。其中,Object参数对象
的属性列表如下:
属性 | 类型 | 是否必选 | 说明 |
---|---|---|---|
url | string | 是 | 需要跳转的tabBar页面的路径,路径后不能带参数 |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码如下: |
//wxml 页面结构
<button bindtap="gotoMessage">跳转到消息页面</button>
//js 通过编程式导航,跳转到message页面
gotoMessages(){
wx.switchTab({
url:"/pages/message/message"
})
}
7. 导航到非tabBar页面(编程式导航)
调用wx.navigateTO(Object object)方法
,可以跳转到非tabBar的页面。其中Object参数对象
的属性列表如下:
属性 | 类型 | 是否必选 | 说明 |
---|---|---|---|
url | string | 是 | 需要跳转的非tabBar页面的路径,路径后可以带参数 |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码如下: |
//wxml 页面结构
<button bindtap="gotoInfo">跳转到info页面</button>
//js 通过编程式导航,跳转到info页面
gotoInfo(){
wx.navigateTo({
url:"/pages/info/info"
})
}
8. 后退导航(编程式导航)
调用wx.navigateBack(Object object)方法
,可以返回到上一页面或多级页面。其中Object参数对象
的属性列表如下:
属性 | 类型 | 默认值 | 是否必选 | 说明 |
---|---|---|---|---|
delta | number | 1 | 否 | 返回的页面数,如果delta大于现有页面数,则返回到首页 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) | |
示例代码如下: |
//wxml 页面结构
<button bindtap="gotoBack">后退</button>
//js 通过编程式导航,后退到上一页面
gotoBack(){
wx.navigateBack()
}