IT廉连看——Uniapp——应用生命周期

IT廉连看——Uniapp——应用生命周期

[IT廉连看]  

目标:
  • 了解APP.vue这个页面

  • 了解所有的应用生命周期

  • 熟练编写常用的应用生命周期

1、App.vue:

在UniApp中,App.vue是应用的根组件。它类似于其他前端框架中的根组件,如Vue.js中的App.vue或React中的App.js

App.vue通常包含应用级别的配置、样式和逻辑,以及应用的全局导航栏、底部栏等元素。它负责整个应用的初始化、路由管理以及全局状态的管理。在App.vue中,你可以定义应用的全局生命周期函数、全局样式,以及一些全局配置。

App.vue中,我们可以通过生命周期函数来管理应用的初始化、前后台切换等事件。同时,你可以在这里定义全局的样式、全局的组件(如导航栏、底部栏)以及其他一些全局的配置。

总之,App.vue是UniApp应用的根组件,负责管理整个应用的初始化和全局配置。

2、应用生命周期

uni-app 支持如下应用生命周期函数:

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

3、应用生命周期函数的使用及示例代码:

3.1 onLaunch的用法及示例代码

在UniApp中,onLaunch是全局应用生命周期函数之一,用于应用初始化完成时触发。它只会在应用初始化时执行一次。你可以在App.vue文件中的onLaunch函数中执行应用初始化的相关操作。

示例代码:
// App.vue
​
<script>
export default {// 应用初始化完成时触发的生命周期函数onLaunch(options) {console.log('应用初始化完成', options);
​// 在这里可以执行一些应用初始化的操作,如获取用户信息、初始化全局变量等// 示例:获取设备信息uni.getSystemInfo({success: function(res) {console.log('设备信息', res);}});},
​// 应用进入前台时触发的生命周期函数onShow(options) {console.log('应用进入前台', options);},
​// 应用进入后台时触发的生命周期函数onHide() {console.log('应用进入后台');}
}
</script>

在这个示例中,当应用初始化完成时,onLaunch生命周期函数会被触发。在这个函数中,我们可以执行一些应用初始化的操作,比如获取设备信息、初始化全局变量等。在示例中,我们使用uni.getSystemInfo方法获取设备信息,并在成功回调中打印出来。

这样,你可以在onLaunch生命周期函数中进行应用初始化的相关操作,确保应用在初始化阶段完成所需的配置和准备工作。

3.2 onShow的用法及示例代码

在UniApp中,onShow是全局应用生命周期函数之一,用于应用进入前台时触发。它会在应用启动、或从后台进入前台时执行。你可以在App.vue文件中的onShow函数中执行一些在应用进入前台时需要处理的操作。

示例代码:
<script>
export default {// 应用初始化完成时触发的生命周期函数onLaunch(options) {console.log('应用初始化完成', options);
​// 在这里可以执行一些应用初始化的操作},
​// 应用进入前台时触发的生命周期函数onShow(options) {console.log('应用进入前台', options);
​// 在这里可以执行一些在应用进入前台时需要处理的操作// 示例:检查用户登录状态const userInfo = uni.getStorageSync('userInfo');if (userInfo) {console.log('用户已登录');} else {console.log('用户未登录');}},
​// 应用进入后台时触发的生命周期函数onHide() {console.log('应用进入后台');}
}
</script>

在这个示例中,当应用进入前台时,onShow生命周期函数会被触发。在这个函数中,我们可以执行一些在应用进入前台时需要处理的操作。在示例中,我们通过uni.getStorageSync方法获取本地缓存中的用户信息,判断用户是否已登录,并在控制台输出相应的信息。

这样,你可以在onShow生命周期函数中处理一些与应用前台展示相关的逻辑,比如检查用户登录状态、刷新页面数据等。

3.3 onHide的用法及示例代码

在UniApp中,onHide是全局应用生命周期函数之一,用于应用进入后台时触发。它会在应用从前台进入后台时执行。你可以在App.vue文件中的onHide函数中执行一些在应用进入后台时需要处理的操作。

示例代码:
<script>
export default {// 应用初始化完成时触发的生命周期函数onLaunch(options) {console.log('应用初始化完成', options);
​// 在这里可以执行一些应用初始化的操作},
​// 应用进入前台时触发的生命周期函数onShow(options) {console.log('应用进入前台', options);
​// 在这里可以执行一些在应用进入前台时需要处理的操作},
​// 应用进入后台时触发的生命周期函数onHide() {console.log('应用进入后台');
​// 在这里可以执行一些在应用进入后台时需要处理的操作// 示例:保存数据到本地缓存const dataToSave = { key: 'value' };uni.setStorageSync('cachedData', dataToSave);}
}
</script>

在这个示例中,当应用进入后台时,onHide生命周期函数会被触发。在这个函数中,我们可以执行一些在应用进入后台时需要处理的操作。在示例中,我们通过uni.setStorageSync方法将一些数据保存到本地缓存,以便在应用下次启动时可以使用。

这样,你可以在onHide生命周期函数中处理一些与应用进入后台相关的逻辑,比如保存数据、清理资源等。

3.4 onError的用法及示例代码

在UniApp中,onError是全局应用生命周期函数之一,用于监听应用运行时的错误信息。当应用发生未捕获的错误时,onError函数会被调用,你可以在这个函数中处理错误信息或进行相应的记录。

示例代码:
<script>
export default {// 应用初始化完成时触发的生命周期函数onLaunch(options) {console.log('应用初始化完成', options);
​// 在这里可以执行一些应用初始化的操作},
​// 应用进入前台时触发的生命周期函数onShow(options) {console.log('应用进入前台', options);
​// 在这里可以执行一些在应用进入前台时需要处理的操作},
​// 应用进入后台时触发的生命周期函数onHide() {console.log('应用进入后台');
​// 在这里可以执行一些在应用进入后台时需要处理的操作},
​// 监听应用运行时的错误信息onError(error) {console.error('应用发生错误', error);
​// 在这里可以处理错误信息,如向服务器发送错误日志// 示例:上报错误信息到服务器uni.request({url: 'https://example.com/log/error',method: 'POST',data: {error: error.message,stack: error.stack},success: function(res) {console.log('错误日志上报成功', res);},fail: function(err) {console.error('错误日志上报失败', err);}});}
}

在这个示例中,当应用发生未捕获的错误时,onError生命周期函数会被调用,并传入错误信息作为参数。在这个函数中,我们可以处理错误信息,比如向服务器发送错误日志。在示例中,我们通过uni.request方法向服务器上报错误信息,并在控制台打印出上报结果。

这样,咱们可以在onError生命周期函数中处理应用运行时的错误信息,以便及时发现和解决问题。

3.5 onUniNViewMessage的用法及示例代码

在UniApp中,onUniNViewMessage是用于接收来自nvue页面或uni.createInnerAudioContext等组件发出的消息的生命周期函数。通过onUniNViewMessage,可以在页面之间传递消息或者与原生组件进行通信。

示例代码:
<script>
export default {// 应用初始化完成时触发的生命周期函数onLaunch(options) {console.log('应用初始化完成', options);
​// 在这里可以执行一些应用初始化的操作},
​// 应用进入前台时触发的生命周期函数onShow(options) {console.log('应用进入前台', options);
​// 在这里可以执行一些在应用进入前台时需要处理的操作},
​// 应用进入后台时触发的生命周期函数onHide() {console.log('应用进入后台');
​// 在这里可以执行一些在应用进入后台时需要处理的操作},
​// 监听来自nvue页面或组件的消息onUniNViewMessage(message) {console.log('收到来自nvue页面或组件的消息', message);
​// 在这里可以根据收到的消息进行相应的处理// 示例:根据消息内容更新页面数据if (message.type === 'updateData') {this.updateData(message.data);}},
​methods: {// 更新页面数据的方法updateData(data) {console.log('更新页面数据', data);// 在这里可以更新页面的数据或进行其他操作}}
}
</script>

在这个示例中,当收到来自nvue页面或组件的消息时,onUniNViewMessage生命周期函数会被调用,并传入消息对象作为参数。在这个函数中,我们可以根据消息的内容进行相应的处理,例如更新页面数据。

这样,可以通过onUniNViewMessage生命周期函数实现不同页面之间的消息传递和通信。

3.6 onLastPageBackPress的用法及示例代码

onLastPageBackPress不是 UniApp 的标准生命周期函数。然而,UniApp 提供了一种机制,允许监听页面返回事件,可以在页面返回时触发相应的逻辑。

可以通过监听beforeEnter生命周期函数来实现类似于onLastPageBackPress的功能。在这个生命周期函数中,你可以判断当前页面是否是栈中的最后一个页面,如果是则执行相应的逻辑。

示例代码:
// 在需要监听返回事件的页面中,例如 A 页面
​
<script>
export default {beforeEnter(to, from, next) {// 判断当前页面是否是栈中的最后一个页面if (this.$route.path === '/') {// 如果是最后一个页面,执行相应的逻辑console.log('这是栈中的最后一个页面,可以执行返回时的逻辑');// 这里可以执行返回逻辑,比如弹出确认框等}next();}
}
</script>

在这个示例中,我们在页面的beforeEnter生命周期函数中监听页面的返回事件。通过判断当前页面是否是栈中的最后一个页面,来确定是否执行返回时的逻辑。

可以根据实际需求在beforeEnter生命周期函数中执行相应的逻辑,比如弹出确认框、执行数据保存操作等。这样就可以实现在 UniApp 中类似于onLastPageBackPress的功能。

3.7 onExit的用法及示例代码

UniApp 中并没有名为 onExit 的生命周期函数。但是,你可以通过监听全局的 beforeUnload 事件来实现类似于 onExit 的功能,该事件在用户关闭页面或离开页面时触发。

示例代码:
<template><view><!-- 应用内容 --><router-view /></view>
</template>
​
<script>
export default {beforeMount() {// 在组件挂载前监听 beforeUnload 事件window.addEventListener('beforeunload', this.handleBeforeUnload);},beforeDestroy() {// 在组件销毁前移除 beforeUnload 事件监听window.removeEventListener('beforeunload', this.handleBeforeUnload);},methods: {handleBeforeUnload(event) {// 处理应用退出逻辑console.log('应用即将退出');// 可以在这里进行一些清理工作或者向服务器发送退出事件// 如果需要阻止默认的退出行为,可以调用 event.preventDefault()}}
};
</script>

在这个示例中,我们在 App.vue 中监听了 beforeUnload 事件,通过 window.addEventListenerwindow.removeEventListener 方法来添加和移除事件监听器。当用户关闭页面或者离开页面时,会触发 beforeUnload 事件,从而执行 handleBeforeUnload 方法中的逻辑。在 handleBeforeUnload 方法中,你可以进行一些清理工作或者向服务器发送退出事件。

需要注意的是,在 handleBeforeUnload 方法中,如果需要阻止默认的退出行为,可以调用 event.preventDefault() 方法。但是需要注意,并非所有浏览器都支持阻止用户退出操作,具体行为可能因浏览器而异。

[IT廉连看]  

小结:
  • APP.vue 是负责哪些配置

  • 应用生命周期函数有几个,常用的有哪些?

  • 编写应用生命周期函数代码并查看效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/723572.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

@Component和@Bean的区别

Component、Bean都是使用注解的形式来定义bean&#xff0c;从功能上讲是一样的 Component&#xff08;包括&#xff20;Service、Repository&#xff09;用于自动检测和使用类路径扫描注解&#xff0c;自动装配 bean。注解类和bean 之间是存在隐性的映射关系的&#xff0c;一个…

基于springboot的精品在线试题库系统设计与实现(程序+数据库+文档)

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 目录 一、研…

广东工行客户在手机银行上进行医保查询

现在的手机银行功能越来越多&#xff0c;对于一些不常用的功能&#xff0c;更是不知道该在哪里找到及访问&#xff0c;像医保查询&#xff0c;我原来就不知道怎么访问&#xff0c;问了别人才知道&#xff0c;特记录一下&#xff0c;以方便下次要访问时能找到。 1、从 手机银行…

考勤签到作业表单周期打卡评分小程序开发

表单考勤签到作业周期打卡评分小程序开源版开发 这是一款功能丰富的自定义表单统计小程序&#xff0c;涵盖信息填表、预约报名、签到打卡、活动通知、报名投票以及班级统计等多项功能。 高度灵活与自定义 该小程序为用户提供高度灵活的自定义表单系统。正文描述字段包含文本…

JSP语言基础(案例代码)

JSP基本语法 编写一个JSP页面&#xff0c;在该页面中显示当前时间 <% page language"java" contentType"text/html; charsetUTF-8" pageEncoding"UTF-8" import"java.util.*"%> <% page import"java.text.SimpleDateF…

独孤思维:打着永久免费更新的幌子,诱惑你付费

01 说一个副业圈讳莫如深的真相。 很多人贪便宜&#xff0c;外面收费几百上千的工具&#xff0c;结果有的地方只卖几十块。 当然不是同一个工具&#xff0c;背后做了阉割和限制。 所以才便宜。 更有甚者&#xff0c;打着永久免费更新的幌子&#xff0c;诱惑你付费。 然后…

马蹄集 开学季活动赛

目录 最大的平均值 门票 二阶前缀和 最大异或和 背军理 信号灯 切蛋糕 矩形 矩阵01变 运动会进行中 三连 距离平方和 最大的平均值 黄金时间限制:1秒巴 占用内存:128 M少难度: 给一个数组&#xff0c;长度为n&#xff0c;找一个长度大于等于m的子区间&#xff0c;使…

部署DNS 实战篇

二、DNS 部署 环境介绍 服务器3台、系统centos 安装软件 yum install -y bind bind-utils bind-chrootbind 主包bind-utils 客户端测试工具&#xff08;host 、dig 、nslookup&#xff09;bind-chroot chroot环境 禁锢dns服务器的工作目录caching-nameserver(rhel5提供…

【Redis】redis的基本使用

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Redis ⛺️稳中求进&#xff0c;晒太阳 Redis的概述 为什么要有redis? redis是数据库&#xff0c;mysql也是数据库&#xff0c;redis做缓存的意义就是为了减轻数据库压力 数据库为什么…

微信公众号公司主体变更怎么办?

公众号迁移的好处有哪些&#xff1f;迁移后原公众号还能用吗&#xff1f;1&#xff09;获得更多权限功能如果公众号是个人主体&#xff0c;想进行认证&#xff0c;拥有更多权限功能。例如菜单栏跳转外部链接&#xff0c;相拥有留言功能&#xff0c;服务号认证获得开发权限等。就…

平台总线式驱动开发

一、总线、设备、驱动 硬编码式的驱动开发带来的问题&#xff1a; 垃圾代码太多 结构不清晰 一些统一设备功能难以支持 开发效率低下 1.1 初期解决思路&#xff1a;设备和驱动分离 struct device来表示一个具体设备&#xff0c;主要提供具体设备相关的资源&#xff08;如…

openEuler系统远程SSH远程连接

文章目录 1. 本地SSH连接测试2. openEuler安装Cpolar3. 配置 SSH公网地址4. 公网远程SSH连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 欧拉操作系统(openEuler, 简称“欧拉”)是面向数字基础设施的操作系统,支持服务器、云计算、边缘openEuler是面向数字基础设施的操作系…

基于51单片机的心率体温检测系统设计

目 录 摘 要 I Abstract II 引 言 1 1 控制系统设计 2 1.1 主控系统方案设计 2 1.2 脉搏传感器方案设计 3 1.3 系统工作原理 5 2 硬件设计 6 2.1 主电路 6 2.1.1 单片机的选择 6 2.1.2 STC89C51的主要功能及性能参数 6 2.1.3 STC89C51单片机引脚说明 6 2.2 驱动电路 8 2.2.1 比…

第八篇 - 预测受众(Predictive audience)技术是如何赋能数字化营销生态的?- 我为什么要翻译介绍美国人工智能科技巨头IAB公司

IAB平台&#xff0c;使命和功能 IAB成立于1996年&#xff0c;总部位于纽约市。 作为美国的人工智能科技巨头社会媒体和营销专业平台公司&#xff0c;互动广告局&#xff08;IAB- the Interactive Advertising Bureau&#xff09;自1996年成立以来&#xff0c;先后为700多家媒…

基于springboot+vue的政府管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

2024BAT大厂Android社招面试题,OMG,学它

开头 中国互联网发展的这些年&#xff0c;如今90后程序员是中国程序员的主力军&#xff0c;互联网的热潮也让一批批00后蠢蠢欲动&#xff0c;尝试涌入互联网圈。 当程序员容易&#xff0c;当一个优秀的程序员需要不断学习&#xff0c;从初级程序员到高级程序员&#xff0c;从…

【NR 定位】3GPP NR Positioning 5G定位标准解读(三)

目录 前言 5 NG-RAN UE定位架构 5.1 架构 5.2 UE定位操作 5.3 NG-RAN定位操作 5.3.1 通用NG-RAN定位操作 5.3.2 OTDOA定位支持 5.3.3 广播辅助信息支持 5.3.4 NR RAT相关定位支持 5.4 NG-RAN中与UE定位相关的元素功能描述 5.4.1 用户设备&#xff08;UE&#xff09; …

蓝桥杯嵌入式省赛模板构建——测量两路频率和占空比

结合测量一路PWM频率编程 测量占空比&#xff1a;测量高电平持续时间和周期 思路&#xff1a; ①.第一次上升沿中断&#xff0c;清零计数器&#xff0c;开始计时并改成下降沿中断 ②.下降沿中断&#xff0c;获取计数值T1&#xff0c;并改为上升沿中断 ③.第二次上升沿中断…

小猫挑食不吃猫粮是为什么?排行榜靠前适口性好的生骨肉冻干分享

现在的猫咪主人都把自家的小猫当成了心头的宝贝&#xff0c;呵护备至。但宠爱过度有时会导致猫咪形成挑食的坏习惯。小猫挑食不吃猫粮是为什么呢&#xff1f;面对这一问题&#xff0c;我们应该如何解决呢&#xff1f; 今天&#xff0c;我给大家剖析一下小猫挑食不吃猫粮是为什…

青少年软件编程图形化编程等级考试二级模拟测试

青少年软件编程图形化编程等级考试二级模拟测试 第 1 题 【单选题】 下面积木块的执行结果是&#xff1f;&#xff08; &#xff09; A :香蕉苹果 B :香蕉和苹果 C :香苹 D :香果 正确答案:D 试题解析: 第 2 题 【单选题】 执行下面的指令后&#xff0c; 舞台上的小…