小程序开放平台

文档中心
起步
目录
配置小程序
小程序框架
框架
逻辑层
注册小程序
注册页面
页面生命周期
页面路由
模块化
API
视图层
小程序运行时
自定义组件
基础能力
开放能力
性能优化
转发
事件回调
基础库
调试
数据分析
服务端调试

页面路由

开发
>
指南
>
小程序框架
>
逻辑层
>
页面路由
>
更新时间:2024-11-13 19:05:22

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

页面栈

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

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

开发者可以使用

getCurrentPages()
函数获取当前页面栈。

路由方式

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

路由方式
触发时机
路由前页面
路由后页面
初始化小程序打开的第一个页面onLoad, onShow
打开新页面调用 API
xhs.navigateTo

使用组件
<navigator open-type="navigateTo"/>
onHideonLoad, onShow
页面重定向调用 API
xhs.redirectTo

使用组件
<navigator open-type="redirectTo"/>
onUnloadonLoad, onShow
页面返回调用 API
xhs.navigateBack

使用组件
<navigator open-type="navigateBack">

用户按左上角返回按钮
onUnloadonShow
Tab 切换调用 API
xhs.switchTab

使用组件
<navigator open-type="switchTab"/>

用户切换 Tab
各种情况请参考下表
重启动调用 API
xhs.reLaunch

使用组件
<navigator open-type="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()

注意事项

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