微信公众号,小程序，当微信退到后台，js定时器停止

在最近微信公众号开发的时候，获取验证码，有一个倒计时功能，发现在息屏或者微信在后台挂起的时候，定时器停止了，再次进入，发现倒计时计数还是之前的值。这个显然不符合用户习惯。查了相关资料之后，发现微信的设计就是如此，在微信在后台挂起的时候JS代码就会停止运行。这个也是微信考虑到如果任其运行，会造成较高的系统资源占用，手机系统会杀死微信进程。
html 有一个属性visibilitychange，它的作用是浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。我们的解决思路分为下面几个步骤
1.在页面离开当前浏览器的时候，判断是否在计时，记下倒计时的计时数，保存离开时的时间戳
2.在页面重新回来的时候，判断之前离开的时候的是否在计时，没有在计时，不做任何操作，若在计时，执行第三步
3.获取重新回到浏览器的时间戳,减去离开时的时间戳，获取离开时间，判断离开的时间是否大于离开时的计时数，大于的话，将定时器重置。小于的话，计算出剩余时间，将定时器计数，设置为剩余时间。

代码实现
1.监听visibilitychange 事件
componentDidMount(){
//浏览器监听页面显示，隐藏
let that = this;
document.addEventListener("visibilitychange",()=>{
if(document.visibilityState =='visible') {
that.showPage();
}
if(document.visibilityState=='hidden'){
that.hidePage();
}
})
}
2.离开时
hidePage = ()=>{
//1.判断当前按钮是否处于计数状态
if(this.state.isTiming){
var timestamp = Date.parse(new Date())/1000;//2.记录下离开页面的时间戳
this.setState({
leaveTime:timestamp,
})
}
}
3.重新进入浏览器
showPage = ()=>{
//判断是否在计时
if(this.state.isTiming){
var timestamp = Date.parse(new Date())/1000; //获取打开界面的时间戳
var leaveTime = this.state.leaveTime;
var interval = timestamp-leaveTime;//重新进入页面和离开页面时间差
if(interval>=this.time){//如果间隔时间，大于剩下来的时间，就算是计数结束
/计时结束/
clearInterval(this.interval);
this.setState({
timer:60,
disable:false,
title:'获取验证码',
isTiming:false,
});
this.time=59;
}else{//如果小于的话，就用当前剩余时间减去时间间隔
this.time = this.time-interval;
this.setState({
timer:this.time,
title:(this.time+'s'),
disable:true,
isTiming:true,
})
}
}
}
这样就实现了，微信在后台挂起，js定时器停止的问题了