【Uniapp】三、生命周期及路由

Uniapp生命周期，页面路由及传参，项目分包

Chx.zhang

3082人浏览 · 2023-01-19 17:16:31

Chx.zhang · 2023-01-19 17:16:31 发布

1 UniAPP 生命周期

学习一个工具的目的核心是什么？是为了解决核心业务逻辑问题，业务逻辑很多时候简单的解释一句话：“在合适的时机干合适的事情”，OK！什么是合适的时机呢？简单的说，页面运行过程中，各个阶段的回调函数就是页面中的时机，我们也叫这个为“生命周期钩子函数”，当然，业务中我们也会写到很多「回调」的逻辑，这些回调其实也是咱们自定义的时机，UniAPP 的生命周期钩子函数回调函数有哪些呢？我们来理解一下！

uni-app 完整支持 Vue 实例的生命周期，同时还新增应用生命周期及页面生命周期。

1）应用生命周期

函数名	说明
onLaunch	当`uni-app` 初始化完成时触发（全局只触发一次）
onShow	当 `uni-app` 启动，或从后台进入前台显示
onHide	当 `uni-app` 从前台进入后台
onError	当 `uni-app` 报错时触发
onUniNViewMessage	对 `nvue` 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

2) 页面生命周期

uni-app会将pages.json -> pages配置项中的第一个页面，作为当前工程的首页（启动页）。

#页面生命周期

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项
onShareAppMessage	用户点击右上角分享
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object
onBackPress	监听页面返回
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件
onShareTimeline	监听用户点击右上角转发到朋友圈
onAddToFavorites	监听用户点击右上角收藏

3) 组件生命周期

uni-app组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

2 UniAPP 路由配置及页面跳转

1）路由配置

uni-app 页面路由全部交给框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式（类似小程序在app.json中配置页面路由）。

"pages": [
		{
			"path": "pages/index",
			"style": {
				"navigationBarTitleText": "路由配置index",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"backgroundColor": "#FFFFFF",
				"enablePullDownRefresh": true
			}
		},
		{
			"path": "pages/user",
			"style": {
				"navigationBarTitleText": " 路由配置user",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"backgroundColor": "#FFFFFF",
				"enablePullDownRefresh": true
			}
		}
]

2）路由跳转

uni-app 有两种页面路由跳转方式：使用navigator组件跳转（标签式导航）、调用API跳转（编程式导航）

框架以栈的形式管理当前所有页面，当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API `uni.navigateTo`、使用组件 `<navigator open-type="navigate" />`
页面重定向	当前页面出栈，新页面入栈	调用 API uni.redirectTo 、使用组件
页面返回	页面不断出栈，直到目标返回页	调用 API uni.navigateBack 、使用组件、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 API uni.switchTab 、使用组件、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API uni.reLaunch 、使用组件

3）获取当前页面栈

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
注意： getCurrentPages() 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。
每个页面实例的方法属性列表如下：

方法	描述	平台说明
page.$getAppWebview()	获取当前页面的webview对象实例	5+App
page.route	获取当前页面的路由	-

uni-app 在 getCurrentPages()获得的页面里内置了一个方法 $getAppWebview() 可以获取当前页面的webview对象实例，从而获得 webview 的 style、id等属性，也可设置 webview 的 style。

4）路由传参与接收

说明：页面生命周期的onLoad(）监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）。如：

页面 1 传递参数

//页面跳转并传递参数
uni.navigateTo({
    url: 'page2?name=liy&message=Hello'
});

url为将要跳转的页面路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔。如 ‘path?key1=value2&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数。

页面 2 接收参数

onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.name); //打印出上个页面传递的参数。
        console.log(option.message); //打印出上个页面传递的参数。
    }

注意：url有长度限制，太长的字符串会传递失败，可使用窗体通信、全局变量，或encodeURIComponent等多种方式解决。

5）小程序路由分包配置

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。

"subPackages": [
  	{
			"root": "news",
			"pages": [{
					"path": "index",
					"style": {
						"navigationBarTitleText": "金迅教育 · 新闻中心",
						"navigationBarBackgroundColor": "#FFFFFF",
						"navigationBarTextStyle": "black",
						"backgroundColor": "#FFFFFF"
					}
				}
			]
		},

		{
			"root": "activities",
			"pages": [{
					"path": "index",
					"style": {
						"navigationStyle": "custom",
						"enablePullDownRefresh": true
					}
				},
				{
					"path": "userList",
					"style": {
						"navigationBarTitleText": "金迅教育 · 活动报名",
						"navigationBarBackgroundColor": "#FFFFFF",
						"navigationBarTextStyle": "black",
						"backgroundColor": "#FFFFFF",
						"enablePullDownRefresh": true
					}
				}
			]
		}
]，
// 预下载分包设置
"preloadRule": {
		"pages/index": {
			"network": "all",
			"packages": ["activities"]
		}
}