标签：停留时间 onShow 微信 app onHide globalData 切换 页面
近来在研究微信小程用户是否在使用小程序或者查看用户在小程序停留的时间，无意中在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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。