小程序页面导航全家桶:navigateTo、redirectTo、switchTab等方法一网打尽,快速掌握不同场景下的最佳应用!

简介: 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。

⭐  专栏简介


       欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。



       同时,我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进,前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术,使你能够站在前沿,与时俱进。通过掌握最新的前端技术,你将能够在竞争激烈的Web开发领域中有更大的竞争力。



📘  文章引言


一、是什么


微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能


在微信小程序中,每个页面可以看成是一个 pageModel,pageModel 全部以栈的形式进行管理


二、有哪些


常见的微信小程序页面跳转方式有如下:


wx.navigateTo(Object)

wx.redirectTo(Object)

wx.switchTab(Object)

wx.navigateBack(Object)

wx.reLaunch(Object)

wx.navigateTo(Object)

wx.navigateTo()用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面


对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转, 以便返回原页面,以提高加载速度。当页面特别多时,则不推荐使用


wx.redirectTo(Object)

重定向,当页面过多时,被保留页面会挤占微信分配给小程序的内存,或是达到微信所限制的 10 层页面栈的情况下,我们应该考虑选择 wx.redirectTo


wx.redirectTo()用于关闭当前页面,跳转到应用内的某个页面


这样的跳转,可以避免跳转前页面占据运行内存,但返回时页面需要重新加载,增加了返回页面的显示时间


wx.switchTab(Object)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面


wx.navigateBack(Object)

wx.navigateBack() 用于关闭当前页面,并返回上一页面或多级页面,开发者可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层则设置对象的delta属性即可


wx.reLaunch(Object)

关闭所有页面,打开到应用内的某个页面,返回的时候跳到首页


三、总结


关于上述五种跳转方式,做下总结:


navigateTo 保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回到原页

redirectTo 关闭当前页面,跳转到应用内的某个页面

switchTab 跳转到 tabBar 页面,同时关闭其他非 tabBar 页面

navigateBack 返回上一页面

reLanch 关闭所有页面,打开到应用内的某个页面

其中关于它们的页面栈的关系如下:


avigateTo 新页面入栈


redirectTo 当前页面出栈,新页面入栈


navigateBack 页面不断出栈,直到目标返回页,新页面入栈


switchTab 页面全部出栈,只留下新的 Tab 页面


reLanch 页面全部出栈,只留下新的页面


⭐  写在最后


请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.


✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式


✅ 认为我部分代码过于老旧,可以提供新的API或最新语法


✅ 对于文章中部分内容不理解


✅ 解答我文章中一些疑问


✅ 认为某些交互,功能需要优化,发现BUG


✅ 想要添加新功能,对于整体的设计,外观有更好的建议


最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!

相关文章
|
7月前
|
Web App开发 移动开发 小程序
公众号小程序H5网页像素流送UE5模型的方法分享
本文探讨了如何通过像素流送技术在小程序、公众号等平台展示复杂的3D模型(如UE5引擎开发的楼盘模型、数字孪生展厅)。该技术将GPU和CPU算力需求转移到服务器端,使用户侧无需高性能硬件即可流畅体验。通过Webrtc实现实时云渲染,确保毫秒级响应,且兼容多种浏览器。使用点量云流等产品级软件,老项目只需重新打包为EXE格式,即可轻松嵌入H5网页、小程序或公众号中,支持Unity、WebGL等多种3D应用及传统CAD模型。
222 1
|
8月前
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
小程序
小程序消除图片下边距的三个方法
小程序消除图片下边距的三个方法
230 69
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
12月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
727 1
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
493 12
|
9月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
314 0
|
11月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
211 0
在线课堂+工具组件小程序uniapp移动端源码

热门文章

最新文章