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

目录结构
微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)
这是我小程序的目录结构

页面学习

逻辑层(App Service)

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

页面路由

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

页面栈

栈的解释

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

页面栈解释

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

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

getCurrentPages()

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

路由方式

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

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

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

  1. 初始化 A
    微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)
  2. 打开新页面 由 A 打开 C , C 打开 D
    微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)
  3. 页面重定向 A重定向到B, B重定向到A
    微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)
  4. 页面返回 D返回 C, C 返回 A
    微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)
  5. Tab切换 后面详情
  6. 重加载 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()

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

  1. A->A
    微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)
  2. A->B(初次)
    微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)
  3. A->B(再次)
    微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)
  4. C->A
    微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)
  5. C->B
    微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)
  6. D->B
    微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)
  7. D(转发进入) -> A
    微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)
  8. D(转发进入) -> B
    微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)

注意:

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

实验代码下载
微信代码片段 wechatide://minicode/dRW3TFmO69ZR
导入步骤
微信小程序学习笔记 (小程序页面学习 三 逻辑层 页面路由 基础食用方法)