- 需求:统计页面的访问时长
- 看似简单,实则磨难重重,最关键的是获取离开页面的时机,回退/前进/关闭都算离开,在离开之前要请求接口才能完成统计,此处借助pagehide方法,但它也是个坑,亲测ios13+以及其他部分机型,在pagehide方法中不支持同步/异步请求。 可以借助百度统计的方式,在离开的时候请求一张图片,图片的src就是结束统计要请求的get接口地址。
- 思路1: 一进页面就请求接口A,传入type=1标记进入,离开时请求接口A,type=2标记离开。由接口去计算具体的访问时长
- 思路2: 一进页面前端就保存当前系统时间,离开前再次获取系统时间,计算时间差并传给接口
推荐思路1,一是怕前端的时间不准,二是万一pagehide有些手机不支持呢也不至于丢失该访问记录,由接口定时结束即可,vue相关代码如下:
export default {
data () {
return: {
tickApiUrl: '', // 统计接口地址
tickData: {
}
}
},
created () {
this.getPageDetail(