快捷導(dǎo)航

uni-app的h5頁(yè)面中onHide/onUnload方法不觸發(fā)的問(wèn)題解決方法

更新時(shí)間：2023年12月27日 08:23:35 作者：洛千隕

uni-app的頁(yè)面的生命周期包括onInit、onLoad、onShow、onReady、onHide和onUnload等幾個(gè)階段,這篇文章主要給大家介紹了關(guān)于uni-app的h5頁(yè)面中onHide/onUnload方法不觸發(fā)的問(wèn)題解決方法,需要的朋友可以參考下

背景

目的：對(duì)h5頁(yè)面進(jìn)行埋點(diǎn)過(guò)程中，需要對(duì)頁(yè)面瀏覽時(shí)長(zhǎng)進(jìn)行統(tǒng)計(jì)，通過(guò)生命周期的監(jiān)聽(tīng)上傳埋點(diǎn)日志
預(yù)設(shè)方案：通過(guò)個(gè)頁(yè)面的onShow/onHide/onUnload生命周期對(duì)頁(yè)面的展示/隱藏/銷毀進(jìn)行監(jiān)聽(tīng)
問(wèn)題：僅在首頁(yè)正常觸發(fā)生命周期，通過(guò)跳轉(zhuǎn)進(jìn)入的其他頁(yè)面的onShow正常觸發(fā)，onHide與onUnload不觸發(fā)

解決過(guò)程

推測(cè)原因：通過(guò)路由跳轉(zhuǎn)的頁(yè)面屬于二級(jí)頁(yè)面，而onHide與onUnload生命周期僅在一級(jí)頁(yè)面中存在

解決方法

二級(jí)頁(yè)面：
- onShow：正常使用該生命周期監(jiān)聽(tīng)頁(yè)面顯示，包括后臺(tái)進(jìn)前臺(tái)與路由跳轉(zhuǎn)進(jìn)入
- destroyed：用組件生命周期代替onHide與onUnload，監(jiān)聽(tīng)路由跳轉(zhuǎn)離開(kāi)
app.vue：
- onHide：應(yīng)用生命周期對(duì)整個(gè)應(yīng)用的前臺(tái)進(jìn)入后臺(tái)進(jìn)行監(jiān)聽(tīng)，通過(guò)url區(qū)分不同頁(yè)面的埋點(diǎn)日志上傳

示例代碼

// 一級(jí)頁(yè)面-首頁(yè)
onShow() {
    this.$$DI.track('enter_page', {
        page_name: '首頁(yè)'
    })
},
onHide() {
    this.$$DI.track('leave_page', {
        page_name: '首頁(yè)'
    })
},
onUnLoad() {
    this.$$DI.track('leave_page', {
        page_name: '首頁(yè)'
    })
},

// 二級(jí)頁(yè)面
onShow() {
    this.$$DI.track('enter_page', {
        page_name: 'a頁(yè)面'
    })
},
destroyed() {
    this.$$DI.track('leave_page', {
        page_name: 'a頁(yè)面'
    })
}

// app.vue
onHide() {
    let page_name
    // 根據(jù)需要監(jiān)聽(tīng)的頁(yè)面路由進(jìn)行判斷添加
    if(window.location.href.includes('basic')) page_name = 'a頁(yè)面'
    if(page_name) {
        this.$$DI.track('leave_page', {
            page_name
        })
    }
},

總結(jié)

到此這篇關(guān)于uni-app的h5頁(yè)面中onHide/onUnload方法不觸發(fā)的問(wèn)題解決方法的文章就介紹到這了,更多相關(guān)uni-app onHide/onUnload方法不觸發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: