背景
- 目的：對h5頁面進行埋點過程中，需要對頁面瀏覽時長進行統(tǒng)計，通過生命周期的監(jiān)聽上傳埋點日志
- 預設方案：通過個頁面的onShow/onHide/onUnload生命周期對頁面的展示/隱藏/銷毀進行監(jiān)聽
- 問題：僅在首頁正常觸發(fā)生命周期，通過跳轉進入的其他頁面的onShow正常觸發(fā)，onHide與onUnload不觸發(fā)
解決過程
- 推測原因：通過路由跳轉的頁面屬于二級頁面，而onHide與onUnload生命周期僅在一級頁面中存在
解決方法
- 二級頁面：
- onShow：正常使用該生命周期監(jiān)聽頁面顯示，包括后臺進前臺與路由跳轉進入
- destroyed：用組件生命周期代替onHide與onUnload，監(jiān)聽路由跳轉離開
- app.vue：
- onHide：應用生命周期對整個應用的前臺進入后臺進行監(jiān)聽，通過url區(qū)分不同頁面的埋點日志上傳
示例代碼
// 一級頁面-首頁
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
// 根據(jù)需要監(jiān)聽的頁面路由進行判斷添加
if(window.location.href.includes('basic')) page_name = 'a頁面'
if(page_name) {
this.$$DI.track('leave_page', {
page_name
})
}
},
文章來源地址http://www.zghlxwxcb.cn/news/detail-624225.html
文章來源：http://www.zghlxwxcb.cn/news/detail-624225.html
到了這里，關于uni-app的h5頁面的onHide/onUnload方法不觸發(fā)的問題解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
