uni-app 经验分享,从入门到离职(三)——关于 uni-app 生命周期快速了解上手

文章目录

  • 前言
    • ⏬关于专栏
  • 什么是生命周期
    • 应用生命周期
      • 关于 App.vue/App.uvue
    • 页面生命周期
      • 关于 onShow 与 onLoad 的区别
    • 组件生命周期
  • 最后


在这里插入图片描述

前言

这篇文章是本专栏 uni-app 基础篇的第三章,通过上一篇文章的基础,我们继续对 uni-app 进行更深一步的了解和学习,这篇文章的主要内容的是讲一下在 uni-app 中的应用生命周期函数,以及关于 App.vue/App.uvue 文件在项目中的作用。

⏬关于专栏

本专栏主要是分享和介绍从零到一学习和使用的 uni-app 的笔记和个人经验。通过个人的学习经验和工作经验来给大家分享关于 uni-app 开发的技巧,以及快速入门的诀窍等等。

专栏主页:uni-app_黛琳ghz的博客-CSDN博客


什么是生命周期

在前端开发中,生命周期通常指的是组件或页面在特定阶段会经历的一系列事件和方法调用的过程。在 uni-app 中,每个页面和组件都有自己的生命周期钩子函数,用于在特定时机执行特定的操作。作为一名前端开发工程师,对于 Vue 的生命周期一定是非常熟悉的,那么我们可以在这个基础上去学习和了解 uni-app 的生命周期,接下来我们一起来看一下。

uni-app 生命周期包括创建、加载、渲染、更新和销毁等阶段,常见的生命周期钩子函数包括 onLoad、onShow、onReady、onHide、onUnload 等等,它们分别对应着页面或组件在不同阶段需要执行的操作。

应用生命周期

在了解 uni-app 的生命周期之前,我们先了解下什么是应用生命周期。应用生命周期指的是整个应用程序从启动到关闭的整个过程,包括了应用的初始化、运行、暂停、恢复和关闭等阶段。在小程序应用开发中,了解和管理应用的生命周期非常重要,可以在不同的生命周期阶段执行相应的操作,来保证应用的正常运行和用户体验。

应用生命周期通常包括以下几个阶段:

  • 启动(Launch):应用程序被用户启动,开始进行初始化,加载必要的资源和数据。
  • 运行(Running):应用程序处于活动状态,响应用户的操作,处理各种事件和交互。
  • 暂停(Pause):应用程序失去焦点,进入后台运行,可能被其他应用覆盖,此时需要做一些数据保存和状态保持的工作。
  • 恢复(Resume):应用程序重新获得焦点,从后台恢复到前台运行,需要做一些恢复状态和数据的操作。
  • 关闭(Close):应用程序被用户手动关闭,需要释放资源、保存数据等清理工作。

同理,在 uni-app 中,应用生命周期也大致是这个流程,接下来我们一起来看一下。在 uni-app 中支持如下应用生命周期函数:

函数名 说明 平台兼容
onLaunch 当uni-app初始化完成时触发(全局只触发一次),参数为应用启动参数,同uni.getLaunchOptionsSync的返回值 所有平台
onShow 当uni-app启动,或从后台进入前台显示,参数为应用启动参数,同uni.getLaunchOptionsSync的返回值 所有平台
onHide 当uni-app从前台进入后台 所有平台
onError 当uni-app报错时触发 app-uvue 不支持
onUniNViewMessage 对nvue页面发送的数据进行监听,可参考nvue向vue通讯 app-uvue 不支持
onUnhandledRejection 对未处理的Promise拒绝事件监听函数 app-uvue 不支持
onPageNotFound 页面不存在监听函数 app-uvue 不支持
onThemeChange 监听系统主题变化 app-uvue 不支持
onLastPageBackPress 最后一个页面按下Android back键,常用于自定义退出 app-uvue-android 3.9+
onExit 监听应用退出 app-uvue-android 3.9+

接下来我可以通过一个代码例子,看一下它们是怎么运行的,首先我们找到项目的 App.vue 文件,默认创建完项目,App.vue 的代码如下图所示。
uni-app 经验分享,从入门到离职(三)——关于 uni-app 生命周期快速了解上手_第1张图片
接下来我们用下面这段代码进行测试。

<script>
	export default {
		onLaunch: function(options) {
			console.log('App Launch')
			console.log('应用启动路径:', options.path)
		},
		onShow: function(options) {
			console.log('App Show')
			console.log('应用启动路径:', options.path)
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

uni-app 经验分享,从入门到离职(三)——关于 uni-app 生命周期快速了解上手_第2张图片
我们可以看到控制台输出了项目初始完成,触发了 onLaunch 函数,然后项目启动时,触发了 onShow 函数。接下来我们再看看如何触发 onHide 函数,如下图操作。
uni-app 经验分享,从入门到离职(三)——关于 uni-app 生命周期快速了解上手_第3张图片
uni-app 经验分享,从入门到离职(三)——关于 uni-app 生命周期快速了解上手_第4张图片
我们可以看到小程序从前台进入后台这个操作,触发 onHide 函数,如果再回到前台,则会再重新调用 onShow 函数,如下图所示。
uni-app 经验分享,从入门到离职(三)——关于 uni-app 生命周期快速了解上手_第5张图片
注意这里 onLaunch 函数只能全局触发一次,所以重新返回小程序的时候没有 触发 onLaunch 函数。

关于 App.vue/App.uvue

在uniapp中,App.vue 或 App.uvue 是应用程序的入口文件,是整个应用的父级组件,用于初始化应用程序并提供全局数据和方法。uni-app js 引擎版是 app.vue。uni-app x 是 app.uvue。其中包含

你可能感兴趣的:(前端,#,Vue,#,uni-app,uni-app,vue,生命周期,经验分享,组件,App.vue,小程序)