小程序学习笔记5---导航跳转

1、页面导航分类

① 声明式导航

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

②编程式导航

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

2、声明式导航

2.1、跳转到tabBar页面

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

• url表示要跳转的页面地址，必须以/开头，路径的后面不可以携带参数
• open-type表示跳转的方式，必须为switchTab

如下：

<navigator url="/pages/contact/contact" open-type="switchTab">跳转到tabBar</navigator>

2.2、跳转到非tabBar页面

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

• url表示要跳转的页面地址，必须以/开头，路径的后面可以携带参数
• open-type表示跳转的方式，必须为navigate

ps：在跳转到非tabBar页面时，open-type="navigate"属性可以省略

如下：

<navigator url="/pages/message/message" open-type="navigate">跳转到非tabBar</navigator>

跳转到非tabBar页面传参：
navigator组件的url的属性用了指定将要跳转的页面路径，同时，路径后面还可以携带参数，如下：

• 参数与路径之间使用?分隔
• 参数键与参数值用=相连
• 不同参数用&分隔

代码示例如下：

2.3、后退导航

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

• open-type必须为navigateBack，表示要进行后退导航
• delta的值必须是数字，表示要后台的层级，默认值为1。

<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

3、编程式导航

3.1、跳转到tabBar页面

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

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

3.2、跳转到非tabBar页面

调用wx.navigateTo(Object Object)方法，可以跳转到非tabBar页面。参数对象属性如下：

属性	类型	是否必须	说明
url	string	是	需要跳转到非tabBar页面路径，路径后可以带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束后的回调函数

跳转到非tabBar页面传参：
wx.navigateTo组件的url的属性用了指定将要跳转的页面路径，同时，路径后面还可以携带参数，如下：

• 参数与路径之间使用?分隔
• 参数键与参数值用=相连
• 不同参数用&分隔
  

3.3、后退导航

调用wx.navigateBack(Object Object)方法，可以返回上一页面或多级页面。参数对象属性如下：

属性	类型	是否必须	说明
delta	number	是	默认值为1，如果delta大于现有页数，则返回到首页
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束后的回调函数

4、在onLoad中接收导航参数

通过声明式导航传参和编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到，示例代码如下：