微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言:
对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的。哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多。
这里就以另外一种方式来详细的介绍小程序的页面栈及路由方式,相信看了本文你能更深入的了解小程序的页面路由的。
模拟场景:
小程序的页面路径基本上都可以用PC端浏览器来模拟,如:
小程序页面栈 |
类似于 |
浏览器页面栈 |
小程序的初始化(新页面入栈) |
——— |
打开浏览器默认加载首页 |
小程序打开新页面(新页面入栈) |
——— |
浏览器在新标签中访问网址或者点击当前页面链接新标签页打开页面 |
页面返回(当前页面出栈,新页面入栈) |
——— |
浏览器返回上一页 |
。。。。。。 |
如果说小程序的官方文档比较抽象,那么转换成浏览器来理解就应该容易的多了。
下面会结合官方相关文档,以浏览器为例进行详细解析。
页面路由:
小程序所有页面的路由全部由框架进行管理。
页面栈:
框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈的表现如下:
路由方式 | 页面栈表现 | pc端浏览器模拟 |
---|---|---|
初始化(打开小程序,进入首页) |
新页面入栈 |
打开浏览器自动打开默认首页 |
打开新页面 | 新页面入栈 |
1. 浏览器打开新标签页访问网址; 2. 他页面中点击链接新窗口打开页面 |
页面重定向 | 当前页面出栈,新页面入栈 |
1. 当前页面点击链接在当前页面打开; 2. 当前页面地址栏输入其他网址访问; 3. 在当前页面点击书签栏中的书签(设置在当前页面打开书签) |
页面返回 | 页面不断出栈,直到目标返回页 | 点击浏览器的返回按钮返回上一页 |
Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 |
这个可能有点不好理解,不过还是可以用浏览器解释的: 小程序的Tab页可看做一个浏览器打开的不同窗口,这些窗口相互之间不影响,从Tab页打开其他非Tab页面可看做在浏览器一个窗口页面中在当前页面进入其他页面,从这个角度来看,就容易理解的多了 |
重加载 | 页面全部出栈,只留下新的页面 |
这个就不太好举例了,可以理解为重启浏览器,只不过重启后可以打开指定页面 |
如果还是有点看不懂,下边将会在路由方式中进行详细介绍:
对于路由的触发方式以及页面生命周期函数如下:
路由方式 | 路由前页面 | 路由后页面 | 浏览器模拟 | |
---|---|---|---|---|
初始化 | 小程序首页 | onLoad, onShow | 浏览器打开的第一个页面初次加载 | |
打开新页面 | wx.navigateTo |
onHide | onLoad, onShow | 在浏览器新标签页中打开新页面都会隐藏上一页并加载新页面 |
页面重定向 | w
|
onUnload | onLoad, onShow | 浏览器页面中打开新的页面 |
页面返回 | wx.navigateBack |
onUnload | onShow | 当前页面内打开新页面,点击返回按钮会销毁新页面,返回显示上一页 |
Tab 切换 | wx.switchTab |
各种情况请参考下表 | ||
重启动 | wx.reLaunch |
onUnload | onLoad, onShow | 销毁所有页面重启浏览器,打开加载新页面 |
这里尤其需要注意的就是Tab页了,对于小程序的Tab页与普通页面有很大的区别的,最常用的就是只能使用wx.switchTab来跳转到Tab页面,否则,超链接将无法进行跳转。
对于Tab页,可以理解为浏览器的不同的标签页,不同标签页之间相互无影响,可以在新的标签页中打开新页面,也可以在已打开标签页内打开新的页面,下边将结合官方文档中关于Tab 切换对应的生命周期进行详细解析。
Tab 切换对应的生命周期:
如下,以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例:
当前页面 | 路由后页面 | 触发的生命周期(按顺序) | 浏览器场景模拟 |
---|---|---|---|
A | A | Nothing happend | 刷新页面 |
A | B | A.onHide(), B.onLoad(), B.onShow() | 新标签打开页面,原页面隐藏,新页面加载显示 |
A | B(再次打开) | A.onHide(), B.onShow() | 切回A页面,然后再点B页面,那么A隐藏,B显示 |
C | A | C.onUnload(), A.onShow() |
C页面由A页面进入,则C页面进入A页面,C页面销毁,A页面显示 |
C | B | C.onUnload(), B.onLoad(), B.onShow() |
这个就不好用浏览器来解释了,表格后边直接用小程序Tab页来细说 |
D | B | D.onUnload(), C.onUnload(), B.onLoad(), B.onShow() | 这个就不好用浏览器来解释了,表格后边直接用小程序Tab页来细说 |
D(从转发进入) | A | D.onUnload(), A.onLoad(), A.onShow() | D页面入口还是A页面,所以这个同C-->A |
D(从转发进入) | B | D.onUnload(), B.onLoad(), B.onShow() | 同C-->B |
对于C-->B可以这样理解:
如上,Tab页中都会显示导航栏的,C页面由Tab A进入,则由C页面通过wx.switchTab打开Tab B的时候,Tab B页面就会显示导航栏,也就是回到了Tab A/Tab B入口了。
这样就可以理解为Tab A页内打开的页面打开其他Tab页的时候会销毁当前页面并重新加载其他即将打开的Tab页,这个可能有点绕,可以看下边的脑图:
注:
1. 上边脑图系实例验证得出,建议最好是自己写个完整的demo验证下,如果能按这个完整走一遍,相信你对Tab 切换对应的生命周期会有不一样的理解。
2. 上面例子中仅使用了 wx.navigateTo 和 wx.switchTab 两个 页面跳转Api,仅在验证Tab切换生命周期,感兴趣的可以自行验证其他路由跳转方式。
示例代码:
https://developers.weixin.qq.com/s/FGRKgcmu7Y4U
微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由的更多相关文章
- 在C#/.NET应用程序开发中创建一个基于Topshelf的应用程序守护进程(服务)
本文首发于:码友网--一个专注.NET/.NET Core开发的编程爱好者社区. 文章目录 C#/.NET基于Topshelf创建Windows服务的系列文章目录: C#/.NET基于Topshelf ...
- 微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理
前言: 小程序开发中诸如获取用户手机号码.调起微信支付.领取卡券等api都是会有一定的延迟的.也就是说通过点击按钮调用这些api的时候,从点击按钮调用api,到支付页面或者领取卡券界面展示出来是需要一 ...
- 微信公众号开发上传图文素材带有卡片小程序报错:errcode=45166,errmsg = invalid content hint
微信公众号开发自从支持允许在群发图文中插入小程序,方便了小程序的运营及推广.最近在三方服务开发中,要支持图文素材插入小程序遇到了一个很是棘手的问题.官方给出的插入小程序的示例支持文字.图片.卡片.如下 ...
- .NET Core 小程序开发零基础系列(2)——小程序服务通知(模板消息)
基于上一篇文件“.NET Core 小程序开发零基础系列(1)——开发者启用并校验牵手成功”的反映,个人觉得效果很不错,大家对公众号开发还是有很大需求的,同时也收到了很多同学的问题,后面我也会通过实战 ...
- Win32 程序开发入门:一个最简单的Win32程序
一.什么是 Win32 Win32 是指 Microsoft Windows 操作系统的 32 位环境,与 Win64 都为 Windows 常见环境. 这里再介绍下 Win32 Applicatio ...
- 微信小程序开发公测,小程序账号申请办法攻略
11月3号晚上 10 点,微信公众平台发布公告,宣布微信小程序正式开放公测.此次小程序公测允许开发者将产品提交至微信公众平台审核,但是暂时不支持发布,也就是说普通消费者若想体验小程序,还需要等待一段时 ...
- 【微信】1.微信小程序开发--入门
开始开发微信小程序咯!! ============================= 1.找到官网API地址 https://developers.weixin.qq.com/miniprogram/ ...
- 微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返 ...
- 关于微信小程序开发中遇到的缺少game.json问题的解决
一.小程序开发的两种选项 ①小游戏开发:内部对应的入口配置文件为game.json丶game.wxml之类的文件或者项目. ②小程序开发:内部对应的入口配置文件为app.json丶app.wxml之类 ...
随机推荐
- grep命令的常用选项
Linux的grep命令是使用正则表达式进行文本搜索的,一些对程序员很有用的选项如下: -i 忽略大小写 -w 进行普通文件匹配,而不是正则表达式匹配 -c 只统计每个文件中匹配行数(默认是输 ...
- python流程控制for循环
流程控制 for循环 #首先我们用一例子看下用while循环取出列表中值的方法 l=['a','b','c'] i=0 while i<len(l): print(l[i]) i+=1 #whi ...
- 如何查看虚拟机的ip地址,以及如何给虚拟机配置静态ip
1 在命令行上敲ifconfig 如下图: 通过inet addr : 192.168.25.129就是你的虚拟机当前的ip 2. 我们一般在局域网内是通过dhcp协议向网关发送ip请求,因此获取的i ...
- Easy-to-Learn English Travel Phrases and Vocabulary!
Easy-to-Learn English Travel Phrases and Vocabulary! Share Tweet Share Tagged With: Real Life Englis ...
- Extjs动态增删组件
在项目中遇到要动态的增加删除一个组件,于是就查找资料,实现了下面的效果. Ext.onReady(function(){ // Ext.Msg.alert("提示","h ...
- C++几个重要关键字(包含借鉴其他博主的东西)
//内存 栈区 与 static区 ,C++为了兼容C,#include 只是文本替换,导致一堆命名空间之间的复杂问题,倍受人诟病 extern 关键字 1.基本含义:意如其名,告诉编译器声明的东西 ...
- JAVAWEB 一一 SpringMVC(注解)
web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="2 ...
- 全局异常 同时ajax或是web跳转
F8功能强大 在java代码debug的时候,F8键可直接跳到下一个类中.免去下一步 只用把之前两种方式合并即可,就是在exception包中不要ajax的异常,将其放入到web异常中,用if ...
- webservice调用dll
今天客户那里报出来,ws通讯不成功.但是在本机和windows2003上都可以测试成功.WS的页面(asmx)可以出来,但是点击接口方法,调用就报http500错误. 网站无法显示该页面 HTT ...
- android有关生命周期探讨
android生命周期直接贴一个经典图: 1.activity生命周期三段式,(开三步,跑,关三步,这三步都是回掉函数哦) 开 onCreate->onStart->onResume 跑 ...