最近开发微信h5有一个需求是需要用户关注了公众号才能继续体验
常规的做法是弹窗二维码用户识别关注后回来手动刷新页面,页面刷新了数据自然重新请求也就拿到了是否关注了的数据,但是客户要求了不能刷新页面,用户也不知道要刷新页面,٩( 'ω' )و,嗯说的还是蛮有道理的。
于是查找解决方案,h5是没有onShow的回调的(好像也不是没有 Firefox 貌似支持)继续百度怎么知道页面隐藏或显现了,还真的找到了,
通过document.hidden属性判断当前页面是否是激活状态。判断的属性有了
visibilitychange事件是浏览器新添加的一个事件,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,现在主流的浏览器都支持该消息了,判断的触发也有了。
结合一下就能解决问题了。
var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;
document.addEventListener('visibilitychange', function(){
if (document[hiddenProperty]) {
console.log('页面隐藏了');
}else {
//在这里加入ajax 请求用户关注的最新数据,如果关注了就放行,没有关注继续阻止
console.log('页面显示了');
}
});
最后再说下需要注意的事项
这里是能接受到用户页面的隐藏于显示,但同时用户锁屏、切换微信打开其他app,或是突然接电话,这些都会触发visibilitychange,所以这里需要加一些程序上逻辑的判断了以免影响到正常的体验流程,例如在显现中新增判断--当前页面是否是个人中心,把在其他页面的显示隐藏过滤掉,具体就根据项目实际的自己加入了。