原理:onShow和onHide时间相减就是所停留的时间
onShow
和onHide
不仅在页面切换的时候会触发,小程序切换到后台和回到前台,也会触发,这就有干扰了,计算时间不准确
但是在app.js
里面的onShow
和onHide
事件只在小程序前后台切换的时候才会触发,不会在页面切换的时候触发,利用这点,把前后台切换排除掉,只在页面切换的时候,上报页面停留时间就好了 在app.js
里面,初始化以下三个状态,
globalData: {
firstIn:1,
onShow: 0,
onHide: 0
}
onShow
和onHide
的值默认为0
,当小程序进入后台或者返回前台的时候,给这两个值变为1
,用来告诉页面,刚才的切换是前后台切换,不是页面切换,不用上报页面停留时间。代码如下: 依旧是在app.js
里面
onShow(){
if(this.globalData.firstIn){
this.globalData.firstIn = 0;
} else{
this.globalData.onShow = 1;
}
},
onHide(){
this.globalData.onHide = 1;
}
里面的firstIn表示是不是第一次进入小程,因为第一次进入的时候也会触发onShow(相当于从后台切换到前台了),要把这个也排除在外。默认是第一次进入,进入之后就把这个值置为0
OK,app.js准备好了,然后看下具体页面的, 在页面里面,先声明两个变量,一个startTime,一个endTime分别来存储用户进入页面的时间和离开的时间
var startTime,
endTime,
app = getApp();
Page({
onShow(){
setTimeout(function () {
if (app.globalData.onShow) {
app.globalData.onShow = 0;
console.log("demo前后台切换之切到前台")
}
else {
console.log("demo页面被切换显示")
startTime = +new Date();
}
}, 100)
},
onHide(){
setTimeout(function () {
if (app.globalData.onHide) {
app.globalData.onHide = 0;
console.log("还在当前页面活动")
}
else {
endTime = +new Date();
console.log("demo页面停留时间:" + (endTime - startTime))
var stayTime = endTime - startTime;
//这里获取到页面停留时间stayTime,然后了可以上报了
}
}, 100)
}
})
有几个页面要统计的,就把这几个页面都加一下。 嫌麻烦的话,可以修改一下Page方法,默认自带onShow和onHide,然后如果外面有传入的话,可以合并。页面在使用的时候,直接用这个心的Page,就不用每个页面都onHide、onShow了,这里就不上具体的代码了。
关于setTimeout的说明: 页面的onShow和onHide会在app.js的onShow和onHide之前执行,加个延迟,放到后面执行,这样每次都可以先检测是页面切换还是前后台切换,然后再去做对应的逻辑,不然就反了。
git:微信小程序页面停留时间统计 · Issue #3 · ireeoome/reeoome · GitHub