微信小程序页面路由是指在小程序中,用户从一个页面跳转到另一个页面的过程。它是小程序中最基本的功能之一,也是小程序开发中必不可少的部分。
微信小程序的路由设置主要通过 app.json 文件来实现,app.json 文件是整个小程序的入口文件,它包含了整个小程序的全部信息,包括页面路由、导航样式、tabBar 等。
{ "pages": [ // 页面路由表 "pages/index/index", // 首页 "pages/list/list" // 列表页 ], "window": { // 窗口表单 "backgroundTextStyle": "light", // 背景文字样式,dark 或 light "navigationBarBackgroundColor": "#fff", // 导航栏背景色 "navigationBarTitleText": "WeChat", // 导航栏标题文字内容 "navigationBarTextStyle": "black" // 导航栏文字样式,black 或 white }, "tabBar": { // tabBar 设置 "color": "#999", // tabBar 文字默认颜色 "selectedColor": "#000", // tabBar 文字选中时的颜色 list: [{ // tab 项列表,详见 list 属性说明 pagePath: 'pages/index/index', // 页面路径,必填 text: 'home', // tabbar 标题文字 iconPath: 'images/home.png', // icon 路径 selectedIconPath: 'images/home_active.png' // 选中时 icon 的图片地址 }, { pagePath: 'pages/list/list', text: 'list', iconPath: 'images/list.png', selectedIconPath: 'images/list_active.png' }] } }
在小程序中所有页面的路由全部由框架进行管理。
框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:
路由方式 | 页面栈表现 |
---|---|
初始化 | 新页面入栈 |
打开新页面 | 新页面入栈 |
页面重定向 | 当前页面出栈,新页面入栈 |
页面返回 | 页面不断出栈,直到目标返回页 |
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 |
各种情况请参考下表 | |
重启动 | 调用 API wx.reLaunch
使用组件 <navigator open-type="reLaunch"/>
|
onUnload | onLoad, onShow |
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() |
Tips:
navigateTo
, redirectTo
只能打开非 tabBar
页面。switchTab
只能打开tabBar
页面。reLaunch
可以打开任意页面。tabBar
由页面决定,即只要是定义为 tabBar
的页面,底部都有 tabBar
。onLoad
中获取。
周期性更新基础库 2.8.0 开始支持,低版本需做兼容处理。生效条件:用户七天内使用过的小程序周期性更新能够在用户未打开小程序...
假设变量A为10,变量B为20,则: 运算符名称运算符简写描述例子自增++自增运算符,将整数值增加1A++ 将得出11自减--自减运算符,...
Arduino提供四种不同的时间操作函数。它们是:序号函数和描述1delay() 函数 delay()函数的工作方式非常简单。它接受单个整数(或...
一些 Electron 的行为受到环境变量的控制,因为他们的初始化比命令行和应用代码更早.POSIX shells 的例子:$ export ELECTRON_ENA...