微信小程序开发---页面导航

目录

一、页面导航的概念

二、页面导航的实现

（1）声明式导航

1、概念

2、导航到tabBar页面

3、导航非tabBar页面

4、后退导航

（2）编程式导航

1、导航到tabBar页面

2、导航到非tabBar页面

3、后退导航

三、导航传参

（1）声明式导航传参

（2）编程式导航传参

（3）在onLoad中接收导航参数

---

一、页面导航的概念

页面导航指的是页面之间的相互跳转。在小程序中有两种方式实现页面导航。

（1）声明式导航

（2）编程式导航

二、页面导航的实现

（1）声明式导航

1、概念

   在页面上声明一个navigator导航组件，通过点击该组件实现页面跳转

2、导航到tabBar页面

在使用navigator组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中：

url表示要跳转的页面地址，必须以/开头

open-type表示跳转的方式，必须为switchTab

"/pages/message/message" open-type="switchTab">消息页面

3、导航非tabBar页面

在使用navigator组件跳转到指定的非tabBar页面时，需要指定url属性和open-type属性，其中：

url表示要跳转的页面地址，必须以/开头

open-type表示跳转的方式，必须为navigate，注意在导航到非tabBar页面时，open-type=“navigate”属性可以省略

"/pages/test/test" open-type="navigate">到测试

4、后退导航

如果想要后退到上一页面或者多级页面，则需要指定open-type属性和delta属性，其中：

open-type的值必须是navigateBack，表示要进行后退导航

delta的值必须是数字，表示后退的层级，默认值是1

"navigateBack" delta="1">返回

（2）编程式导航

调用小程序的导航API，实现页面的跳转

1、导航到tabBar页面

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

属性       类型     是否必选   说明  
url       string      是      需要跳转的tabBar页面路径，路径后不能带参数 
success   function    否      接口调用成功的回调函数
fail      function    否      接口调用失败的回调函数
complete  function    否      接口调用结束的回调函数（不管成功还是失败都会执行）

 
bind:tap="handl">到消息页面
 
//js文件
 handl(e){
   wx.switchTab({
     url: '/pages/message/message',
   })
  },

2、导航到非tabBar页面

调用wx.navigateTo（Object object）方法，可以跳转到非tabBar页面，其中Object参数对象的属性列表如下：

属性       类型     是否必选   说明  
url       string      是      需要跳转的非tabBar页面路径，路径后不能带参数 
success   function    否      接口调用成功的回调函数
fail      function    否      接口调用失败的回调函数
complete  function    否      接口调用结束的回调函数（不管成功还是失败都会执行）

3、后退导航

调用wx.navigateBack（Object object）方法，可以返回上一级或者多级页面，其中Object参数对象的属性列表如下：

属性       类型     是否必选     说明  
delta     number      否      返回的页面数，如果delta大于现有的页面数，则返回首页，默认是1
success   function    否      接口调用成功的回调函数
fail      function    否      接口调用失败的回调函数
complete  function    否      接口调用结束的回调函数（不管成功还是失败都会执行）

handl(e){
   wx.navigateBack()
  },

三、导航传参

（1）声明式导航传参

navigator组件的url属性用来指定路径，路径后面带着参数，如下：

"/pages/test/test?name=as&age=10">到消息

这里我发现跳转到tanbBar页面时无法携带参数的

（2）编程式导航传参

handl(e){
    wx.navigateTo({
      url: '/pages/test/test?name=gq&age=100',
    })
  },

这里我发现跳转到tabBar页面时无法携带参数的，甚至可能会报错

（3）在onLoad中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数，可以在onLoad事件中直接获取到

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
     console.log(options)
  },