微信公众号开发，完成倒计时的一个技巧（纯代码）
微信（WeChat）是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序，由张小龙所带领的腾讯广州研发中心产品团队打造 [2] 。微信支持跨通信运营商、跨操作系统平台通过网络快速发送免费（需消耗少量网络流量）语音短信、视频、图片和文字，同时，也可以使用通过共享流媒体内容的资料和基于位置的社交插件“摇一摇”、“漂流瓶”、“朋友圈”、”公众平台“、”语音记事本“等服务插件。
以下是我自己编写的一个代码，功能是在微信公众号开发过程中实现倒计时的。效果如下，订单已提交，请在2分57秒内完成支付。纯代码解析。
开始的思路没有考虑页面在后台运行以及锁屏等情况。代码如下：
let interval = setInterval(() => {
let {staticTime} = this.state;
staticTime = staticTime - 1;
if (staticTime <= 0) {
clearInterval(interval);
this.setState({
tip:'支付超时',
staticTime:0
});
return;
}
let minutes = parseInt(staticTime/60);
let Seconds = staticTime%60;
let tip = '订单已提交，请在'+minutes+'分'+Seconds+'秒内完成支付';
this.setState({
tip:tip,
staticTime:staticTime
});
}, 1000);
后来测试发现锁屏或者把页面留在后台，计算就不对，于是把代码进行了如下改造。
let interval = setInterval(() => {
let {backGroundTime, staticTime} = this.state;
this.setState({
backGroundTime:0
});
staticTime = staticTime - backGroundTime - 1;
if (staticTime <= 0) {
clearInterval(interval);
this.setState({
tip:'支付超时',
staticTime:0,
});
return;
}
let minutes = parseInt(staticTime/60);
let Seconds = staticTime%60;
let tip = '订单已提交，请在'+minutes+'分'+Seconds+'秒内完成支付';
this.setState({
tip:tip,
staticTime:staticTime,
});
}, 1000);
this.listenPageShowHideHandle();
//计算页面在后台的时间listenPageShowHideHandle = () =>{
let {backGroundTime} = this.state;
let start, end;
let self = this;
document.addEventListener("visibilitychange", function() {
if(document.visibilityState == 'hidden'){
start = new Date().getTime();
}else if(document.visibilityState == 'visible'){
end = new Date().getTime();
backGroundTime = Math.floor((end - start)/1000);
self.setState({backGroundTime});
console.log('时间差：', backGroundTime);
}
console.log( document.visibilityState );
});