Entwicklung eines öffentlichen WeChat-Kontos zur Implementierung einer Countdown-Funktion (reiner Code)

Das Folgende ist ein Code, den ich selbst geschrieben habe. Die Funktion besteht darin, den Countdown während des Entwicklungsprozesses des offiziellen WeChat-Kontos zu implementieren. Der Effekt ist wie folgt: Die Bestellung wurde aufgegeben. Bitte schließen Sie die Zahlung innerhalb von 2 Minuten und 57 Sekunden ab. Reine Codeanalyse.

Die ursprüngliche Idee berücksichtigte nicht die Situation, dass die Seite im Hintergrund läuft und den Bildschirm sperrt. Der Code lautet wie folgt:

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();
    
     //计算页面在后台的时间

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 );
});

}

改造之后发先问题依然存在。原因是：
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('sub',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);

Apache php mysql

Verwandte Artikel:

Autorisierungseinstellungen für das öffentliche WeChat-Konto, öffentliche WeChat-Autorisierung

Die Implementierungsmethode des öffentlichen WeChat-Kontos, indem Sie auf das Menü klicken, um die Microsite zu öffnen und sich bei ihr anzumelden

Verwandtes Video:

Video-Tutorials zur Entwicklung öffentlicher WeChat-Plattformen von Chuanzhi und Dark Horse

Das obige ist der detaillierte Inhalt vonEntwicklung eines öffentlichen WeChat-Kontos zur Implementierung einer Countdown-Funktion (reiner Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!