热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序页面路由-微信小程序

微信小程序页面路由是千自学中一篇关于微信小程序的文章简介:页面路由在小程序中所有页面的路由全部由框架进行管理。页面栈框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈的表现如下:路由方式页面栈表现初始化新页面入栈打开新页面新页面入栈页面重定向当前页面出栈,新页面入栈
页面路由

在小程序中所有页面的路由全部由框架进行管理。

页面栈

框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈的表现如下:

路由方式页面栈表现
初始化新页面入栈
打开新页面新页面入栈
页面重定向当前页面出栈,新页面入栈
页面返回页面不断出栈,直到目标返回页,新页面入栈
Tab 切换页面全部出栈,只留下新的 Tab 页面
重加载页面全部出栈,只留下新的页面

getCurrentPages()

getCurrentPages()函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

Tip:不要尝试修改页面栈,会导致路由以及页面状态错误。

路由方式

对于路由的触发方式以及页面生命周期函数如下:

路由方式触发时机路由前页面路由后页面
初始化小程序打开的第一个页面 onLoad, onSHow
打开新页面调用 API wx.navigateTo 或使用组件 onHideonLoad, onShow
页面重定向调用 API wx.redirectTo 或使用组件 onUnloadonLoad, onShow
页面返回调用 API wx.navigateBack 或使用组件或用户按左上角返回按钮onUnloadonShow
Tab 切换调用 API wx.switchTab 或使用组件 或用户切换 Tab 各种情况请参考下表
重启动调用 API wx.reLaunch 或使用组件 onUnloadonLoad, onShow

Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例):

当前页面路由后页面触发的生命周期(按顺序)
AANothing happend
ABA.onHide(), B.onLoad(), B.onShow()
AB(再次打开)A.onHide(), B.onShow()
CAC.onUnload(), A.onShow()
CBC.onUnload(), B.onLoad(), B.onShow()
DBD.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D(从转发进入)AD.onUnload(), A.onLoad(), A.onShow()
D(从转发进入)BD.onUnload(), B.onLoad(), B.onShow()

Tips:

  • navigateTo,redirectTo只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  • 调用页面路由带的参数可以在目标页面的onLoad中获取。


推荐阅读
  • 深入解析微信小程序开发中的全局配置文件设置与优化技巧
    本文深入探讨了微信小程序开发中全局配置文件的设置与优化技巧,详细解析了 `app.js`、`app.json`、`app.wxss` 和 `project.config.json` 的功能与最佳实践。通过合理配置这些文件,开发者可以显著提升小程序的性能和用户体验。文章还介绍了如何利用这些配置文件进行模块化开发和调试,帮助开发者更好地管理和维护小程序项目。 ... [详细]
  • 微信小程序中如何实现轮播图
    这篇文章主要介绍了微信小程序中如何实现轮播图,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带 ... [详细]
  • 设计实战 | 10个Kotlin项目深度解析:首页模块开发详解
    设计实战 | 10个Kotlin项目深度解析:首页模块开发详解 ... [详细]
  • 如何撰写PHP电商项目的实战经验? ... [详细]
  • 微信小程序实战之菜谱小程序
    最近突发奇想,想要自己搞个小程序玩儿玩儿,但是鉴于自己是搞后端服务器出身,对于偏前端的微信小程序开发实在是一知半解,尤其是对于css类样式相关,更是无从下手,于是乎,只能从晚上找了 ... [详细]
  • 微信小程序地图实现展示线路的方法
    这篇文章将为大家详细讲解有关微信小程序地图实现展示线路的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所 ... [详细]
  • 微信小程序实现简易计算器功能_javascript技巧
    这篇文章主要为大家详细介绍了微信小程序实现简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的 ... [详细]
  • 在对WordPress Duplicator插件0.4.4版本的安全评估中,发现其存在跨站脚本(XSS)攻击漏洞。此漏洞可能被利用进行恶意操作,建议用户及时更新至最新版本以确保系统安全。测试方法仅限于安全研究和教学目的,使用时需自行承担风险。漏洞编号:HTB23162。 ... [详细]
  • 使用 ListView 浏览安卓系统中的回收站文件 ... [详细]
  • 在本文中,我们将详细介绍如何构建一个用于自动回复消息的XML类。当微信服务器接收到用户消息时,该类将生成相应的自动回复消息。以下是具体的代码实现:```phpclass We_Xml { // 代码内容}```通过这个类,开发者可以轻松地处理各种消息类型,并实现高效的自动回复功能。我们将深入探讨类的各个方法和属性,帮助读者更好地理解和应用这一技术。 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • 在本文中,我们将探讨如何使用 UniApp 封装小程序 API 请求接口的最佳实践。通过创建 `request.js` 文件,定义基础 URL 并传入后端提供的 URL 作为请求参数。同时,配置请求方法(如 GET、POST)和请求头(例如包含 token 的认证信息),以实现高效、安全的 API 调用。此外,我们还将介绍如何处理请求和响应的错误,以及如何优化请求性能,确保应用在不同平台上的兼容性和稳定性。 ... [详细]
  • 微信小程序API音频-暂停播放是千自学中一篇关于微信小程序的文章简介:wx.pauseVoice(Objectobject)从基础库 1.6.0 开始,本接口停止维护,请使用 wx.createInnerAudioContext 代替暂停正在播放的语 ... [详细]
  • 微信小程序自定义组件与页面的相互传参
    这篇文章主要为大家介绍了微信小程序自定义组件与页面的相互传参过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家 ... [详细]
  • 山雨欲来风满楼,最近微信小程序相关开发文章吹遍大江南北,亦有摧枯拉朽万象更新之势。问小程序形为何物,直教IT众生怡情悦性高潮迭起。作为一名有着远大理想“包袱”与互联网变革“使命感”的测试工程师,我再 ... [详细]
author-avatar
婧氏橙奂
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有