微信小程序开发---页面导航-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序开发---页面导航。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、页面导航的概念

二、页面导航的实现

（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
<navigator url="/pages/message/message" open-type="switchTab">消息页面</navigator>

3、导航非tabBar页面

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

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

open-type表示跳转的方式，必须为navigate，注意在导航到非tabBar页面时，open-type=“navigate”属性可以省略
<navigator url="/pages/test/test" open-type="navigate">到测试</navigator>

4、后退导航

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

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

delta的值必须是数字，表示后退的层级，默认值是1
<navigator open-type="navigateBack" delta="1">返回</navigator>

（2）编程式导航

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

1、导航到tabBar页面

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

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


<button bind:tap="handl">到消息页面</button>

//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    否      接口调用结束的回调函数（不管成功还是失败都会执行）