Développement de compte public WeChat pour implémenter une fonction de compte à rebours (code pur)-Développement WeChat-php.cn

Développement de compte public WeChat pour implémenter une fonction de compte à rebours (code pur)

php是最好的语言

Libérer： 2018-07-27 16:35:49

original

9070 Les gens l'ont consulté

Ce qui suit est un code que j'ai écrit moi-même. La fonction est d'implémenter le compte à rebours pendant le processus de développement du compte officiel WeChat. L'effet est le suivant, la commande a été soumise, veuillez effectuer le paiement dans les 2 minutes et 57 secondes. Analyse de code pur.

Développement de compte public WeChat pour implémenter une fonction de compte à rebours (code pur)

L'idée initiale ne prenait pas en compte la situation de la page s'exécutant en arrière-plan et verrouillant l'écran. Le code est le suivant :

let interval = setInterval(() => {
            let {staticTime} = this.state;
            staticTime = staticTime - 1;
            if (staticTime <= 0) {
                clearInterval(interval);
                this.setState({
                    tip:&#39;支付超时&#39;,
                    staticTime:0
                });
                return;
            }
            let minutes = parseInt(staticTime/60);
            let Seconds = staticTime%60;
            let tip = &#39;订单已提交，请在&#39;+minutes+&#39;分&#39;+Seconds+&#39;秒内完成支付&#39;;
            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:&#39;支付超时&#39;,
                    staticTime:0,
                });
                return;
            }
            let minutes = parseInt(staticTime/60);
            let Seconds = staticTime%60;
            let tip = &#39;订单已提交，请在&#39;+minutes+&#39;分&#39;+Seconds+&#39;秒内完成支付&#39;;
            this.setState({
                tip:tip,
                staticTime:staticTime,
            });
        }, 1000);
        this.listenPageShowHideHandle();
    
     //计算页面在后台的时间

Copier après la connexion

listenPageShowHideHandle = () =>{

let {backGroundTime} = this.state;
let start, end;
let self = this;
document.addEventListener("visibilitychange", function() {
    if(document.visibilityState == &#39;hidden&#39;){
        start = new Date().getTime();
    }else if(document.visibilityState == &#39;visible&#39;){
        end = new Date().getTime();
        backGroundTime = Math.floor((end - start)/1000);
        self.setState({backGroundTime});
        console.log(&#39;时间差：&#39;, backGroundTime);
    }
    console.log( document.visibilityState );
});

Copier après la connexion

}

改造之后发先问题依然存在。原因是：
You cannot continue to run javascript while the iPhone is sleeping using setTimeout(), however.When the phone is put to sleep, Safari will kill any running javascript processes using setTimeout(). Check out this answer here for some reasons why this is done.

**解决方案：**
订单生成的时候我们记录下这个时间为A， 时间间隔为B（3分钟内需要付款，B为3*60*1000），C为现在的时间。我们使用setInterval 每个1秒读取一下时间。那么倒计时时间 == A+B-C，代码如下

 let interval = setInterval(()=>{
        let {orderTime, staticTime} = this.state;
        let nowTime = Date.now();
        let sub = Math.floor((orderTime + staticTime - nowTime)/1000);
        console.log(&#39;sub&#39;,sub);
        if(sub<=0){
            clearInterval(interval);
            this.setState({
                tip:&#39;支付超时&#39;,
                isFalse:true
            });
            return;
        }
        let minutes = parseInt(sub/60);
        let Seconds = sub%60;
        let tip = &#39;订单已提交，请在&#39;+minutes+&#39;分&#39;+Seconds+&#39;秒内完成支付&#39;;
        console.log(tip);
        this.setState({
            tip:tip,
            isFalse:false
        });
    },1000);

Copier après la connexion

apache php mysql