微信小程序学习笔记 (小程序页面学习三逻辑层页面路由基础食用方法)

本文链接：https://blog.csdn.net/cdhjava/article/details/80438641

目录结构

这是我小程序的目录结构

页面学习

逻辑层(App Service)

   小程序开发框架的逻辑层由 JavaScript 编写。
   逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
   在JavaScript 的基础上，我们做了一些修改，以方便地开发小程序。
    ¤ 增加App和 Page方法，进行程序和页面的注册。
    ¤ 增加getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
    ¤ 提供丰富的API，如微信用户数据，扫一扫，支付等微信特有能力。
    ¤ 每个页面有独立的作用域，并提供模块化能力。
    ¤ 由于框架并非运行在浏览器中，所以JavaScript 在 web 中一些能力都无法使用，如 document，window 等。
    ¤ 开发者写的所有代码最终将会打包成一份JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。

页面路由

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

页面栈

栈的解释

栈是一种先进后出的数据结构, 具体信息可以百度,但是其使用大致如下就如快速开始模板，刚开始我们进入小程序，这时index在页面栈顶端，之后我们登录后进入了，日志logs页面这时logs在页面栈最顶端， index在他下面，之后我们点击后退，页面栈将logs弹出，这是index在页面栈最顶端，这个栈其实也很像我们日常生活中的放盘子放碗，可以自己拿几个盘子碗试试，别把东西摔了

页面栈解释

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

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

getCurrentPages()

getCurrentPages() 用于获取当前页面栈实例,以数组的形式按栈的顺序给出,第一个为首页,最后一个为当前页面
不要修改页面栈,会导致路由以及页面状态错误,后果自负

路由方式

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

路由方式	触发时机	路由前页面	路由后页面
初始化	小程序打开的第一个页面	无	onLoad``onShow
打开新页面	调用API`wx.navigateTo` 或使用组件`<navigator open-type="navigateTo"/>`	`onHide`	`onLoad`,`OnShow`
页面重定向	调用API`wx.redirectTo`或使用组件`<navigator open-type="redirectTo"/>`	`onUnload`	`onLoad`,`onShow`
页面返回	调用 API`wx.navigateBack`或使用组件`<navigator open-type="navigateBack">`或用户按左上角返回按钮	onUnload	onShow
Tab切换	调用 API`wx.switchTab`或使用组件`<navigator open-type="switchTab"/>`或用户切换 Tab	无	各种情况参考Tab切换对应生命周期
重加载	调用 API`wx.reLaunch`或使用组件`<navigator open-type="reLaunch"/>`	`onUnload`	`onLoad`,`onShow`

代码模拟
代码环境共有 A B C D 四个页面 , A 会重定向到 B , B也会重定向到A, A会跳到C, C会跳到D. 所有页面均实现了 onLoad(), onShow, onUnload

初始化 A
打开新页面由 A 打开 C , C 打开 D
页面重定向 A重定向到B, B重定向到A
页面返回 D返回 C, C 返回 A
Tab切换后面详情
重加载 D 完成重加载操作

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()`
C	A	`C.onUnload()`,`A.onShow()`
C	B	`C.onUnload()`,`B.onLoad()`,`B.onShow()`
D	B	`D.onUnload()`,`C.onUnload()`,`B.onLoad()`,`B.onShow()`
D(从转发进入)	A	`D.onUnload()`,`A.onLoad()`,`A.onShow()`
D(从转发进入)	B	`D.onUnload()`,`B.onLoad()`,`B.onShow()`