Skip to content
Mr.HopeMr.Hope
主页
  • 小程序
    • 小程序教程

      • 小程序指南
        • 代码构成
          • 宿主环境
            • 配置

              • 配置
                • 全局配置文档
                  • 页面配置
                    • 小程序内索引
                    • 框架

                      • 框架
                        • 场景值
                          • 小程序的运行环境
                            • 小程序运行机制
                              • 小程序更新机制
                              • 逻辑层

                                • 逻辑层
                                  • 生命周期 <Badge text="不需要立即掌握" />
                                    • 页面路由
                                      • 页面栈
                                        • 路由方式
                                        • 注册
                                          • App
                                            • Page
                                              • 小程序运行机制
                                                • 模块化
                                                  • API

                                                    • API <Badge text="重要" type="error" />
                                                      • 路由 API
                                                        • 数据缓存 API
                                                          • 页面交互 API
                                                            • 网络 API
                                                              • 系统相关 API
                                                            • 视图层

                                                              • 视图层 View
                                                                • WXSS
                                                                  • 事件
                                                                    • 基础组件
                                                                      • 动画
                                                                        • WXS
                                                                          • WXS 事件
                                                                            • 简易双向绑定
                                                                              • 获取界面上的节点信息
                                                                                • 初始渲染缓存
                                                                                • 能力

                                                                                  • 小程序能力
                                                                                    • 网络
                                                                                      • 存储
                                                                                        • 文件系统
                                                                                          • 调试
                                                                                        • 开发者工具

                                                                                          • 工具使用
                                                                                            • 界面
                                                                                              • 调试
                                                                                                • npm 支持
                                                                                                  • 体验评分
                                                                                                  • 小程序框架

                                                                                                    • 小程序框架说明
                                                                                                      • 小程序简易开发指南
                                                                                                        • 小程序页面参数表
                                                                                                          • Page 插件
                                                                                                            • YAML 文件案例
                                                                                                            • 小程序分享

                                                                                                              页面路由

                                                                                                              Mr.Hope2020年11月8日
                                                                                                              • 小程序
                                                                                                              大约 2 分钟

                                                                                                              此页内容
                                                                                                              • 页面栈
                                                                                                              • 路由方式

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

                                                                                                              # 页面栈 重要

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

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

                                                                                                              开发者可以使用 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 | | 各种情况请参考下表 | | 重启动 | 调用 API wx.reLaunch
                                                                                                              使用组件 <navigator open-type="reLaunch"/> | onUnload | onLoad, onShow |

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

                                                                                                              当前页面路由后页面触发的生命周期(按顺序)
                                                                                                              AANothing happened
                                                                                                              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()

                                                                                                              提示

                                                                                                              • navigateTo, redirectTo 只能打开非 tabBar 页面。
                                                                                                              • switchTab 只能打开 tabBar 页面。
                                                                                                              • reLaunch 可以打开任意页面。
                                                                                                              • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
                                                                                                              • 调用页面路由带的参数可以在目标页面的 onLoad 中获取。
                                                                                                              编辑此页open in new window
                                                                                                              上次编辑于: 2021/3/21 09:22:34
                                                                                                              贡献者: Mr.Hope
                                                                                                              上一页
                                                                                                              生命周期 <Badge text="不需要立即掌握" />
                                                                                                              下一页
                                                                                                              注册

                                                                                                              预览:

                                                                                                              0  字
                                                                                                              评论
                                                                                                              Powered by Waline v2.5.1
                                                                                                              Copyright © 2019-present Mr.Hope