【小程序从0到1】视图与逻辑｜路由导航（声明式、编程式）

欢迎来到我的博客
📔博主是一名大学在读本科生，主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥$React/小程序$🔥，中间穿插了一些基础知识的回顾
🌈博客主页👉codeMak1r.小新的博客

😇本文目录😇

• 学习目标：能够知道如何实现页面之间的导航跳转
• 什么是页面导航？
• 小程序中实现页面导航的两种方式
• 1、声明式导航
• • 导航到tabBar页面
  • 导航到非tabBar页面
  • 后退导航
• 2、编程式导航
• • 导航到tabBar页面
  • 导航到非tabBar页面
  • 后退导航

本文被专栏【小程序｜原力计划】收录

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

上篇文章详细讲解了微信小程序的首页布局案例的实现，这篇文章将带领大家学习的是小程序的「路由导航」

学习目标：能够知道如何实现页面之间的导航跳转

什么是页面导航？

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

• < a >链接
• loaction.href

小程序中实现页面导航的两种方式

1. 声明式导航

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

2. 编程式导航

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

1、声明式导航

导航到tabBar页面

tabBar页面指的是被配置为tabBar的页面。比如在上一篇文章的首页布局案例中，我们的tabBar页面指的是【首页、消息页、联系我们页】

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

• url表示要跳转的页面的地址，必须以 / 开头；
• open-type 表示跳转的方式，必须为 switchTab

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面navigator>
1

导航到非tabBar页面

非tabBar页面指的是没有被配置为tabBar的页面。

基于上一篇文章中的首页布局案例，我又新创建了一个新的info页面，并且不将其添加到tabBar节点中。

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

• url表示要跳转的页面的地址，必须以 / 开头；
• open-type 表示跳转的方式，必须为 navigate。

<navigator url="/pages/info/info" open-type="navigate">导航到info页面navigator>
1

open-type属性默认值即为navigate，此方式跳转的navigator组件的open-type属性可以省略。

后退导航

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

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

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

delta属性默认值即为1，只需要后退一个页面时，可以省略delta。

2、编程式导航

导航到tabBar页面

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

// 页面结构
<button bindtap="gotoMessage">跳转到消息页面button>
1
2

 // 编程式导航 -- 跳转到消息页面
 gotoMessage() {
   wx.switchTab({
     url: '/pages/message/message',
   })
 },
1
2
3
4
5
6

导航到非tabBar页面

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

// 页面结构
<button bindtap="gotoInfo">跳转到Info页面button>
1
2

 // 编程式导航 -- 跳转到info页面
 gotoMessage() {
   wx.navigateTo({
     url: '/pages/info/info',
   })
 },
1
2
3
4
5
6

后退导航

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

// 页面结构
<button type="primary" bindtap="goBack">后退button>
1
2

 goBack() {
   wx.navigateBack()
 },
1
2
3