产品有一个要求,统计用户浏览H5页面的时长。技术原理是在H5打开时调用接口获取统计id,在H5关闭时调用接口结束统计。
前端主要解决的问题就是在什么地方请求后端接口。
需要注意的就是PC端和移动端有所不同。
{
data(){
return {
statisticId: null
}
},
onl oad() {
// pc端关闭h5页面时更新计时
window.addEventListener(
"beforeunload",
() => {
this.updateStatistic()
},
false
);
},
// pc端、移动端页面显示时开始计时
onShow() {
this.startStatistic()
},
// 移动端页面隐藏时更新计时
onHide() {
this.updateStatistic()
},
// 移动端页面关闭时更新计时
onUnload() {
this.updateStatistic()
},
methods: {
// 发起请求,获取statisticId
startStatistic() {
},
// 调用接口(传statisticId),更新计时
updateStatistic() {
this.$apis.xxx() // 调用接口
// 加一段同步代码阻塞一下,否则刷新会发不出去请求
let i = 0
while(i++ < 1000) {}
}
}
}
标签:调用,接口,关闭,计时,updateStatistic,页面
From: https://www.cnblogs.com/hdxg/p/17575957.html