背景
- 目的:对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页面'
})
}
onHide() {
let page_name
if(window.location.href.includes('basic')) page_name = 'a页面'
if(page_name) {
this.$$DI.track('leave_page', {
page_name
})
}
},