微信小程序页面停留时间统计

近来在研究微信小程用户是否在使用小程序或者查看用户在小程序停留的时间，无意中在git上找到了相关的解决问题方法，希望正在开发这个功能的的你，能帮助你解决！
收到一个需求，要统计一个用户在我们小程序的每个页面的停留时间。
初步想法，在页面的onShow事件里面，打一个开始的时间戳，然后在onHide里面再弄一个时间戳，两个一减，然后把得出来的数据，一提交，齐活。 BUT~，尼玛，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之前执行，加个延迟，放到后面执行，这样每次都可以先检测是页面切换还是前后台切换，然后再去做对应的逻辑，不然就反了。

原文：https://github.com/ireeoome/reeoome/issues/3

换工作？找面试题？ 来前端面试题库 wx搜索 进阶的大前端

标签：停留时间,onShow,微信,app,onHide,globalData,切换,页面
来源： https://blog.csdn.net/u010952787/article/details/121558444