本文解决uni-app开发H5页面时，非首页的onHide和onUnload生命周期不触发的问题。通过区分一级与二级页面的生命周期差异，利用组件的destroyed事件替代页面级隐藏监听，并结合应用级onHide处理后台切换，实现准确的页面浏览时长统计与埋点上报。
背景
- 在对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方法不触发内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！