🎥 作者简介： CSDN\阿里云\腾讯云\华为云开发社区优质创作者，专注分享大数据、Python、数据库、人工智能等领域的优质内容
🌸个人主页： 长风清留杨的博客
🍃形式准则： 无论成就大小，都保持一颗谦逊的心，尊重他人，虚心学习。
✨推荐专栏： Python入门到入魔，Mysql入门到入魔，Python入门基础大全，Flink入门到实战
🍂若缘分至此，无法再续相逢，愿你朝朝暮暮，皆有安好，晨曦微露道早安，日中炽热说午安，星河长明寄晚安🍂
小程序开发
页面导航
什么是页面导航
页面导航，顾名思义，是指在小程序或网页中不同页面之间的相互跳转功能。这种跳转功能允许用户在不同内容或功能区域之间快速移动，从而提升用户体验和互动性。
在小程序开发中，页面导航是实现页面间切换和交互的重要手段。它允许开发者设计多种跳转逻辑，以满足用户在不同场景下的需求。例如，用户可能从首页跳转到商品详情页，或者从购物车页面跳转到支付页面等。
浏览器中实现页面导航的方式有如下两种：
<a>链接：这是HTML中用于创建超链接的标签，通过它可以实现从一个页面跳转到另一个页面的功能。在小程序开发中，虽然不直接使用HTML，但类似的跳转逻辑是通过小程序的路由系统来实现的。- location.href：在JavaScript中，location.href属性用于获取或设置当前页面的URL。通过修改这个属性，可以实现页面的跳转。在小程序开发中，虽然不直接使用JavaScript的location.href，但类似的跳转操作是通过调用小程序的API来完成的。
小程序中实现页面导航的两种方式
声明式导航
声明式导航是小程序中实现页面跳转的一种直观且易于理解的方式。它主要通过在页面上声明一个<navigator>导航组件来实现。这个组件类似于Web开发中的<a>标签，用于创建一个链接，当用户点击这个链接时，就会触发页面跳转。
在<navigator>组件中，可以通过设置相关属性来指定跳转的目标页面、跳转方式等。例如，可以使用url属性来指定目标页面的路径，使用open-type属性来指定跳转的类型（如普通跳转、重定向等）。
声明式导航的优点是直观易懂，易于在页面中布置导航链接。然而，它的灵活性相对较低，只能实现简单的页面跳转逻辑。
编程式导航
与声明式导航相比，编程式导航提供了更灵活和强大的页面跳转能力。它主要通过调用小程序的导航API来实现页面的跳转。这些API允许开发者在JavaScript代码中编写跳转逻辑，从而实现更加复杂的页面跳转需求。
在编程式导航中，常用的导航API包括wx.navigateTo、wx.redirectTo、wx.switchTab等。这些API可以根据需要传递不同的参数来指定跳转的目标页面、是否保留当前页面、是否显示动画效果等。
编程式导航的优点是灵活性强，可以实现复杂的跳转逻辑。同时，它还可以与小程序的其他功能（如用户状态管理、数据请求等）相结合，实现更加丰富的用户体验。
| 导航方式 | 描述 | 实现方法 |
|---|---|---|
| 声明式导航 | 在页面上声明一个<navigator>导航组 | 通过点击<navigator>组件实现页面跳转 |
| 编程式导航 | 调用小程序的导航API | 通过API调用实现页面的跳转 |
导航到 tabBar 页面
在小程序开发中，tabBar通常用于在底部显示一个导航栏，用户可以通过点击不同的tab项来快速切换到不同的页面。当使用声明式导航（即通过在WXML中使用<navigator>组件）来导航到tabBar页面时，需要注意以下几点：
- tabBar页面配置：
- 首先，确保目标页面（即要导航到的页面）已经被配置为tabBar页面。 - 这通常是在小程序的配置文件（如app.json）中完成的。
<navigator>组件属性：- 在使用
<navigator>组件时，需要设置url属性和open-type属性来指定跳转的目标页面和跳转方式。 - url属性表示要跳转的页面的地址，这个地址必须以“/”开头，并且应该与小程序配置文件中的页面路径相匹配。
- open-type属性表示跳转的方式，对于导航到tabBar页面，这个值必须设置为switchTab。
- 在使用
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
<navigator>组件的url属性被设置为"/pages/message/message"，这意味着当用户点击这个导航按钮时，他们将被导航到pages/message/message这个tabBar页面。- open-type属性被设置为switchTab，这确保了跳转是以切换tab的方式进行的。
案例演示
首先在app.json中添加一个配置，生成一个message.wxml,而且必须有tabBar的配置，相当于需要跳转的页面必须是tabBar的页面
app.json文件：
{"pages": ["pages/index/index","pages/logs/logs","pages/home/home","pages/message/message"],"window": {"navigationBarBackgroundColor": "#000000", "navigationBarTextStyle": "white", "navigationBarTitleText": "我是全局配置", "backgroundColor": "#ffffff", "enablePullDownRefresh": false },"tabBar": {"list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "/images/tabs/home.png","selectedIconPath": "/images/tabs/home-active.png"},{"pagePath": "pages/message/message", "text": "消息", "iconPath": "/images/tabs/mess.png", "selectedIconPath": "/images/tabs/mess-active.png" }]},"style": "v2","sitemapLocation": "sitemap.json"}
写入上面的代码之后就可以看到自动生成的message.wxml
在message.wxml文件中写上如下内容
message.wxml文件：
<text>我是消息页面</text>
然后在index.wxml文件中编写如下内容，进行跳转，编写一个按钮主键，点击按钮就跳转到message.wxml页面中
index.wxml文件：
<button><!-- 注意，open-type="switchTab" 一定要有这个设置才能够跳转 指定跳转到的页面路径为 /pages/message/message 也就是message.wxml页面--><navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
</button>
然后点击按钮就可以跳转到message.wxml页面
导航到非 tabBar 页面
在小程序开发中，非tabBar页面是指那些没有被配置为底部导航栏（tabBar）的页面。当使用声明式导航（即通过<navigator>组件）来跳转到这些非tabBar页面时，需要注意以下几点：
- 指定url属性：
- url属性用于指定要跳转的页面的地址。这个地址必须以“/”开头，并且应该与小程序中的页面路径相匹配。
- open-type属性：
- open-type属性用于指定跳转的方式。对于导航到非tabBar页面，这个值通常设置为navigate。
- 为了简便，在导航到非tabBar页面时，open-type="navigate"属性可以省略。这是因为navigate是
<navigator>组件的默认跳转方式。
- 注意事项：
- 尽管open-type="navigate"属性可以省略，但在某些情况下，明确指定open-type属性可以使代码更加清晰和易于理解。
- 确保目标页面（即要跳转的页面）已经存在，并且路径正确无误。
案例演示
跟导航到tabBar页面不一样，使用open-type="navigate"可以直接导航到非tabBar页面，跟上面的案例完全相反
现在先去配置individual.wxml文件，该文件不需要在app.json中配置tabBar的属性只需要配置在app.json中的pages中来表名该页面在小程序中的路径
app.json文件：
{"pages": ["pages/index/index","pages/logs/logs","pages/home/home","pages/message/message","pages/individual/individual"],"window": {"navigationBarBackgroundColor": "#000000", "navigationBarTextStyle": "white", "navigationBarTitleText": "我是全局配置", "backgroundColor": "#ffffff", "enablePullDownRefresh": false },"style": "v2","sitemapLocation": "sitemap.json"}
individual.wxml文件：
<text>公众号：小白的大数据之旅</text>
然后在index.wxml中编写一个按钮，点击按钮进行跳转
index.wxml文件：
<button><navigator url="/pages/individual/individual" open-type="navigate">导航到消息页面</navigator>
</button>
点击按钮进行跳转
后退导航
在小程序开发中，页面导航是一个重要的功能，它允许用户在不同的页面之间进行切换。其中，后退导航是页面导航的一种常见形式，它允许用户返回到之前访问过的页面。
为了实现后退导航，小程序提供了声明式导航的方法。具体来说，就是通过使用<navigator>组件并设置其open-type属性和delta属性来实现。
- open-type属性：
- 这个属性用于指定导航的类型。
- 在进行后退导航时，open-type的值必须设置为navigateBack，这表示要进行后退操作。
- delta属性：
- 这个属性用于指定要后退的层级数。
- delta的值必须是数字，表示用户希望后退到之前访问过的第几个页面。例如，如果delta的值为1，则用户将返回到上一页面。
- 如果只是为了后退到上一页面，并且不需要指定具体的层级数，那么可以省略delta属性，因为其默认值就是1。
案例演示
现在演示一下后退导航的操作，分别演示一下后退上一页和后退前两页(也就是后退上上页)
首先创建individual.wxml和message.wxml文件，如果代码案例的步骤做过的话应该已经有了这两个文件，这里再重复一下
首先在app.json中配置这两个页面
app.json文件：
{"pages": ["pages/index/index","pages/logs/logs","pages/home/home","pages/message/message","pages/individual/individual"],"window": {"navigationBarBackgroundColor": "#000000", "navigationBarTextStyle": "white", "navigationBarTitleText": "我是全局配置", "backgroundColor": "#ffffff", "enablePullDownRefresh": false },"style": "v2","sitemapLocation": "sitemap.json"}
然后pages目录就有了individual和message这两个文件了
编写index.wxml文件，设置一个按钮，用来跳转到individual.wxml页面
index.wxml文件：
<button><navigator url="/pages/individual/individual" open-type="navigate">导航到个人中心</navigator>
</button>
编写individual.wxml文件，设置一个按钮，用来跳转到message.wxml页面
individual.wxml文件：
<text>公众号：小白的大数据之旅</text>
<button><navigator url="/pages/message/message" open-type="navigate">导航到消息页面</navigator>
</button>
编写message.wxml文件，设置两个按钮，一个是返回上一页，一个是返回上上一页
message.wxml文件：
<!--pages/message/message.wxml-->
<text>我是消息页面</text>
<button><navigator open-type="navigateBack" delta="2">返回前两页</navigator>
</button>
<button><navigator open-type="navigateBack">返回上一页</navigator>
</button>
- 第一个按钮：
<button>：这是一个按钮元素。<navigator open-type="navigateBack" delta="2">：这是一个导航器元素，用于控制页面跳转。- open-type=“navigateBack”：表示这个导航器的操作类型是返回（即导航回上一个或上几个页面）。
- delta=“2”：表示返回的页面数量为2，即点击这个按钮后，会返回到当前页面的前两页。
- 返回前两页：这是按钮上显示的文本，告诉用户点击这个按钮可以返回前两页。
- 第二个按钮：
<button>：同样是一个按钮元素。<navigator open-type="navigateBack">：这是另一个导航器元素，用于控制页面跳转。- open-type=“navigateBack”：表示这个导航器的操作类型也是返回。
- 由于没有指定delta属性，所以默认返回上一页（即delta默认为1）。
- 返回上一页：这是按钮上显示的文本，告诉用户点击这个按钮可以返回上一页。
现在来演示一下，注意看动图中的两个返回，看看是不是一个返回上一页，一个是返回前两页
