零基础微信小程序开发——页面导航之声明式导航（保姆级教程+超详细）

在这里插入图片描述

🎥 作者简介： CSDN\阿里云\腾讯云\华为云开发社区优质创作者，专注分享大数据、Python、数据库、人工智能等领域的优质内容
🌸个人主页： 长风清留杨的博客
🍃形式准则： 无论成就大小，都保持一颗谦逊的心，尊重他人，虚心学习。
✨推荐专栏： Python入门到入魔，Mysql入门到入魔，Python入门基础大全，Flink入门到实战
🍂若缘分至此，无法再续相逢，愿你朝朝暮暮，皆有安好，晨曦微露道早安，日中炽热说午安，星河长明寄晚安🍂

小程序开发

页面导航

什么是页面导航

页面导航，顾名思义，是指在小程序或网页中不同页面之间的相互跳转功能。这种跳转功能允许用户在不同内容或功能区域之间快速移动，从而提升用户体验和互动性。

在小程序开发中，页面导航是实现页面间切换和交互的重要手段。它允许开发者设计多种跳转逻辑，以满足用户在不同场景下的需求。例如，用户可能从首页跳转到商品详情页，或者从购物车页面跳转到支付页面等。

浏览器中实现页面导航的方式有如下两种：

  1. <a>链接：这是HTML中用于创建超链接的标签，通过它可以实现从一个页面跳转到另一个页面的功能。在小程序开发中，虽然不直接使用HTML，但类似的跳转逻辑是通过小程序的路由系统来实现的。
  2. 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页面时，需要注意以下几点：

  1. tabBar页面配置：
    • 首先，确保目标页面（即要导航到的页面）已经被配置为tabBar页面。 - 这通常是在小程序的配置文件（如app.json）中完成的。
  2. <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页面时，需要注意以下几点：

  1. 指定url属性：
    • url属性用于指定要跳转的页面的地址。这个地址必须以“/”开头，并且应该与小程序中的页面路径相匹配。
  2. open-type属性：
    • open-type属性用于指定跳转的方式。对于导航到非tabBar页面，这个值通常设置为navigate。
    • 为了简便，在导航到非tabBar页面时，open-type="navigate"属性可以省略。这是因为navigate是<navigator>组件的默认跳转方式。
  3. 注意事项：
    • 尽管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属性来实现。

  1. open-type属性：
    • 这个属性用于指定导航的类型。
    • 在进行后退导航时，open-type的值必须设置为navigateBack，这表示要进行后退操作。
  2. 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>
  1. 第一个按钮：
    • <button>：这是一个按钮元素。
    • <navigator open-type="navigateBack" delta="2">：这是一个导航器元素，用于控制页面跳转。
    • open-type=“navigateBack”：表示这个导航器的操作类型是返回（即导航回上一个或上几个页面）。
    • delta=“2”：表示返回的页面数量为2，即点击这个按钮后，会返回到当前页面的前两页。
    • 返回前两页：这是按钮上显示的文本，告诉用户点击这个按钮可以返回前两页。
  2. 第二个按钮：
    • <button>：同样是一个按钮元素。
    • <navigator open-type="navigateBack">：这是另一个导航器元素，用于控制页面跳转。
    • open-type=“navigateBack”：表示这个导航器的操作类型也是返回。
    • 由于没有指定delta属性，所以默认返回上一页（即delta默认为1）。
    • 返回上一页：这是按钮上显示的文本，告诉用户点击这个按钮可以返回上一页。

现在来演示一下，注意看动图中的两个返回，看看是不是一个返回上一页，一个是返回前两页

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/65191.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Ch9 形态学图像处理

Ch9 形态学图像处理

Ch9 形态学图像处理 blog点此处&#xff01;<--------- 四大算子相应性质。 腐蚀、膨胀、开闭之间的含义、关系 文章目录 Ch9 形态学图像处理预备知识(Preliminaries)膨胀和腐蚀(Dilation and Erosion)腐蚀膨胀膨胀与腐蚀的对偶关系 开闭操作(Opening and Closing)开运算闭…
阅读更多...
【UE5 C++课程系列笔记】14——GameInstanceSubsystem与动态多播的简单结合使用

【UE5 C++课程系列笔记】14——GameInstanceSubsystem与动态多播的简单结合使用

效果 通过在关卡蓝图中触发GameInstanceSubsystem包含的委托&#xff0c;来触发所有绑定到这个委托的事件&#xff0c;从而实现跨蓝图通信。 步骤 1. 新建一个C类 这里命名为“SubsystemAndDelegate” 引入GameInstanceSubsystem.h&#xff0c;让“SubsystemAndDelegate”继承…
阅读更多...
实战举例——vue.js组件开发

实战举例——vue.js组件开发

有很多人在问有关Vue的组件开发&#xff0c;虽然之前我的文章里讲过关于前端组件开发的例子&#xff0c;不过作为一个前端技术小白&#xff0c;还是有很多内容需要学习和巩固。我这里用我之前开发过的组件举例&#xff0c;再次为大家简单分享一下基于Vue2和elementUI开发的组件…
阅读更多...
devops和ICCID简介

devops和ICCID简介

Devops DevOps&#xff08;Development 和 Operations 的组合&#xff09;是一种软件开发和 IT 运维的哲学&#xff0c;旨在促进开发、技术运营和质量保障&#xff08;QA&#xff09;部门之间的沟通、协作与整合。它强调自动化流程&#xff0c;持续集成&#xff08;CI&#xf…
阅读更多...
设计宝藏解压密码

设计宝藏解压密码

设计宝藏官网的解压密码是多少&#xff1f; 设计宝藏解压密码是&#xff1a;memm 设计宝藏一个致力于提供免费资源的宝藏网站。 无论你是Blender、After Effects (AE)、Cinema 4D (C4D)、Premiere Pro (PR)、Photoshop (PS)、Illustrator (AI)的爱好者&#xff0c;还是对CG影…
阅读更多...
Android OpenGLES2.0开发（十）：FBO离屏渲染

Android OpenGLES2.0开发（十）：FBO离屏渲染

人生是一场单程的旅行&#xff0c;即使有些遗憾我们也没有从头再来的机会&#xff0c;与其纠结无法改变的过去不如微笑着珍惜未来。 Android OpenGLES开发&#xff1a;EGL环境搭建Android OpenGLES2.0开发&#xff08;一&#xff09;&#xff1a;艰难的开始Android OpenGLES2.0…
阅读更多...
Magnet: 基于推送的大规模数据处理Shuffle服务

Magnet: 基于推送的大规模数据处理Shuffle服务

本文翻译自&#xff1a;《Magnet: Push-based Shuffle Service for Large-scale Data Processing》 摘要 在过去的十年中&#xff0c;Apache Spark 已成为大规模数据处理的流行计算引擎。与其他基于 MapReduce 计算范式的计算引擎一样&#xff0c;随机Shuffle操作&#xff08;即…
阅读更多...
Pytorch | 利用VA-I-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击

Pytorch | 利用VA-I-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击

Pytorch | 利用VA-I-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击 CIFAR数据集VA-I-FGSM介绍相关定义算法流程 VAI-FGSM代码实现VAI-FGSM算法实现攻击效果 代码汇总vaifgsm.pytrain.pyadvtest.py 之前已经针对CIFAR10训练了多种分类器&#xff1a; Pytorch | 从零构建AlexNet对…
阅读更多...
WebPack3项目升级webpack5的配置调试记录

WebPack3项目升级webpack5的配置调试记录

文章目录 前言一、webpack3环境1.1、知识点记录1.1.1、配置解释1.1.2、webpack与sass版本对应关系1.1.3、CommonJS与ESModule1.1.4、node版本管理nvm1.1.5、sass-loader、sass与node-sass 1.2、其他1.2.1、.d.ts是什么文件1.2.2、react与types/react版本对应关系1.2.3、webpack…
阅读更多...
MySQL 数据”丢失”事件之 binlog 解析应用

MySQL 数据”丢失”事件之 binlog 解析应用

事件背景 客户反馈在晚间数据跑批后,查询相关表的数据时,发现该表的部分数据在数据库中不存在 从应用跑批的日志来看,跑批未报错,且可查到日志中明确显示当时那批数据已插入到数据库中 需要帮忙分析这批数据丢失的原因。 备注:考虑信息敏感性,以下分析场景测试环境模拟,相关数据…
阅读更多...
微信小程序的轮播图学习报告

微信小程序的轮播图学习报告

微信小程序轮播图学习报告 好久都没分享新内容了&#xff0c;实在惭愧惭愧。今天给大家做一个小程序轮播图的学习报告。 先给大家看一下我的项目状态&#xff1a; 很空昂&#xff01;像一个正在修行的老道&#xff0c;空的什么也没有。 但是我写了 4 个 view 容器&#xff0c;…
阅读更多...
【RAII | 设计模式】C++智能指针，内存管理与设计模式

【RAII | 设计模式】C++智能指针，内存管理与设计模式

前言 nav2系列教材&#xff0c;yolov11部署,系统迁移教程我会放到年后一起更新&#xff0c;最近年末手头事情多&#xff0c;还请大家多多谅解。 上一节我们讲述了C移动语义相关的知识&#xff0c;本期我们来看看C中常用的几种智能指针&#xff0c;并看看他们在设计模式中的运…
阅读更多...
微软 CEO 萨提亚・纳德拉：回顾过去十年，展望 AI 时代的战略布局

微软 CEO 萨提亚・纳德拉：回顾过去十年，展望 AI 时代的战略布局

近日&#xff0c;微软 CEO 萨提亚・纳德拉与著名投资人比尔・格里和布拉德・格斯特纳进行了一场深度对话&#xff0c;回顾了过去十年微软的转型历程&#xff0c;并展望了 AI 时代的战略布局。在这次访谈中&#xff0c;纳德拉分享了他在微软的早期经历&#xff0c;包括他加入微软…
阅读更多...
【Java-tesseract】OCR图片文本识别

【Java-tesseract】OCR图片文本识别

文章目录 一、需求二、概述三、部署安装四、技术细节五、总结 一、需求 场景需求:是对识别常见的PNG,JPEG,TIFF,GIF图片识别&#xff0c;环境为离线内网。组件要求开源免费&#xff0c;并且可以集成Java生成接口服务。 二、概述 我不做选型对比了,我筛选测试了下Tesseract(v…
阅读更多...
iOS开发代码块-OC版

iOS开发代码块-OC版

iOS开发代码块-OC版 资源分享资源使用详情Xcode自带代码块自定义代码块 资源分享 自提&#xff1a; 通过网盘分享的文件&#xff1a;CodeSnippets 2.zip 链接: https://pan.baidu.com/s/1Yh8q9PbyeNpuYpasG4IiVg?pwddn1i 提取码: dn1i Xcode中的代码片段默认放在下面的目录中…
阅读更多...
如何借助边缘智能网关实现厂区粉尘智能监测告警

如何借助边缘智能网关实现厂区粉尘智能监测告警

在诸如木制品加工、纺织品加工、塑料橡胶制品加工等多种工业生产场景中&#xff0c;粉尘问题的隐患和风险不可小觑。如果缺少对生产环境中粉尘的监测和管理&#xff0c;可能发生易燃易爆、环境污染和工人尘肺等生产事故。 针对工业场景中的粉尘状况监测、管理及预警&#xff0c…
阅读更多...
McDonald‘s Event-Driven Architecture 麦当劳事件驱动架构

McDonald‘s Event-Driven Architecture 麦当劳事件驱动架构

原文链接 1 mcdonalds-technical-blog/ 原文链接 2 mcdonalds-technical-blog/ 麦当劳在异步、事务性和分析性处理用例中使用跨技术栈的事件&#xff0c;包括移动订单进度跟踪和向客户发送营销通信&#xff08;交易和促销&#xff09;。 统一事件平台&#xff08;unified eve…
阅读更多...
EasyExcel停更，FastExcel接力

EasyExcel停更，FastExcel接力

11月6日消息&#xff0c;阿里巴巴旗下的Java Excel工具库EasyExcel近日宣布&#xff0c;将停止更新&#xff0c;未来将逐步进入维护模式&#xff0c;将继续修复Bug&#xff0c;但不再主动新增功能。 EasyExcel以其快速、简洁和解决大文件内存溢出的能力而著称&#xff0c;官方…
阅读更多...
HarmonyOS NEXT 实战之元服务：静态多案例效果（一）

HarmonyOS NEXT 实战之元服务：静态多案例效果（一）

背景&#xff1a; 前几篇学习了元服务&#xff0c;后面几期就让我们开发简单的元服务吧&#xff0c;里面丰富的内容大家自己加&#xff0c;本期案例 仅供参考 先上本期效果图 &#xff0c;里面图片自行替换 效果图1代码案例如下&#xff1a; import { authentication } from…
阅读更多...
前端(Ajax)

前端(Ajax)

1.客户端请求 向https://jsonplaceholder.typicode.com/users发送get请求 const xhr new XMLHttpRequest(); console.log(xhr.readyState); xhr.open(‘get’, ‘https://jsonplaceholder.typicode.com/users’) console.log(xhr.readyState); xhr.send(); console.log(xhr.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023