uni-app的h5页面中onHide/onUnload方法不触发的问题解决方法
更新时间：2023年12月27日 08:23:35 作者：洛千陨
uni-app的页面的生命周期包括onInit、onLoad、onShow、onReady、onHide和onUnload等几个阶段,这篇文章主要给大家介绍了关于uni-app的h5页面中onHide/onUnload方法不触发的问题解决方法,需要的朋友可以参考下
背景
- 目的：对h5页面进行埋点过程中，需要对页面浏览时长进行统计，通过生命周期的监听上传埋点日志
- 预设方案：通过个页面的onShow/onHide/onUnload生命周期对页面的展示/隐藏/销毁进行监听
- 问题：仅在首页正常触发生命周期，通过跳转进入的其他页面的onShow正常触发，onHide与onUnload不触发
解决过程
- 推测原因：通过路由跳转的页面属于二级页面，而onHide与onUnload生命周期仅在一级页面中存在
解决方法
- 二级页面：
- onShow：正常使用该生命周期监听页面显示，包括后台进前台与路由跳转进入
- destroyed：用组件生命周期代替onHide与onUnload，监听路由跳转离开
- app.vue：
- onHide：应用生命周期对整个应用的前台进入后台进行监听，通过url区分不同页面的埋点日志上传
示例代码
// 一级页面-首页
onShow() {
this.$$DI.track('enter_page', {
page_name: '首页'
})
},
onHide() {
this.$$DI.track('leave_page', {
page_name: '首页'
})
},
onUnLoad() {
this.$$DI.track('leave_page', {
page_name: '首页'
})
},
// 二级页面
onShow() {
this.$$DI.track('enter_page', {
page_name: 'a页面'
})
},
destroyed() {
this.$$DI.track('leave_page', {
page_name: 'a页面'
})
}
// app.vue
onHide() {
let page_name
// 根据需要监听的页面路由进行判断添加
if(window.location.href.includes('basic')) page_name = 'a页面'
if(page_name) {
this.$$DI.track('leave_page', {
page_name
})
}
},总结
到此这篇关于uni-app的h5页面中onHide/onUnload方法不触发的问题解决方法的文章就介绍到这了,更多相关uni-app onHide/onUnload方法不触发内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了jsTree事件和交互以及插件plugins的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
在JavaScript中数组是一种常用的数据结构,用于存储多个值,这篇文章主要给大家总结介绍了关于JS中截取数组的几种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-05-05
这篇文章主要为大家介绍了Web Components使用生命周期回调函数实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
下面小编就为大家分享一篇js登录滑动验证的实现(不滑动无法登陆)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
事件是用来描述网页中某一特定有趣时刻的，众所周知事件通常是在由用户和浏览器进行交互时触发，其实不然，通过Javascript可以在任何时间触发特定的事件，并且这些事件与浏览器创建的事件是相同的2012-06-06
本文探讨了将包含 {icon: "abc", url: "123"} 形式对象的数组转换为键值对形式的四种方法,并从实现方式的简洁性、可读性和性能角度进行了分析比较,感兴趣的朋友可以参考下2024-02-02
本文介绍了使用javascript判断整数的2种方法中的一种正则判断，因为逐字判断效率太低下了，有相同需求的小伙伴们参考下2014-12-12
类型守卫是TypeScript中特有的用于在运行时检查类型的方式,它显式的将javascript代码按类型划分,从而确保了运行安全,下面我们就来简单聊聊TypeScript中的4种类型守卫吧2023-08-08
safari,opera嵌入iframe页面cookie读取问题解决方法
最近做的合作网站嵌入到对方的iframe中去，在safari,opera和有些版本的搜狗浏览器（内核版本原因）中不能读到cookie。2010-06-06
这篇文章主要为大家介绍了JavaScript 算法 复写0双指针解法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论