微信小程序学习笔记-页面导航

22 阅读3分钟

1. 什么是页面导航

页面导航指的是页面之间的相互跳转。例如:浏览器中实现页面导航的方式有如下两种:

  1. <a>链接
  2. 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参数对象的属性列表如下:

属性类型是否必选说明
urlstring需要跳转的tabBar页面的路径,路径后不能带参数
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
示例代码如下:
//wxml 页面结构
<button bindtap="gotoMessage">跳转到消息页面</button>

//js 通过编程式导航,跳转到message页面
gotoMessages(){
    wx.switchTab({
        url:"/pages/message/message"
    })
}

7. 导航到非tabBar页面(编程式导航)

调用wx.navigateTO(Object object)方法,可以跳转到非tabBar的页面。其中Object参数对象的属性列表如下:

属性类型是否必选说明
urlstring需要跳转的非tabBar页面的路径,路径后可以带参数
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
示例代码如下:
//wxml 页面结构
<button bindtap="gotoInfo">跳转到info页面</button>

//js 通过编程式导航,跳转到info页面
gotoInfo(){
    wx.navigateTo({
        url:"/pages/info/info"
    })
}

8. 后退导航(编程式导航)

调用wx.navigateBack(Object object)方法,可以返回到上一页面或多级页面。其中Object参数对象的属性列表如下:

属性类型默认值是否必选说明
deltanumber1返回的页面数,如果delta大于现有页面数,则返回到首页
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
示例代码如下:
//wxml 页面结构
<button bindtap="gotoBack">后退</button>

//js 通过编程式导航,后退到上一页面
gotoBack(){
    wx.navigateBack()
}