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.vueonHide(){let page_name
    // 根据需要监听的页面路由进行判断添加if(window.location.href.includes('basic')) page_name ='a页面'if(page_name){this.$$DI.track('leave_page',{
            page_name
        })}},