カウントダウン機能を実装するための WeChat パブリック アカウントの開発 (純粋なコード)

以下は私が自分で書いたコードで、WeChat公式アカウントの開発過程でカウントダウンを実装する機能です。結果は次のとおりです。注文が送信されました。2 分 57 秒以内に支払いを完了してください。純粋なコード分析。

当初のアイデアでは、ページがバックグラウンドで実行され、画面がロックされている状況が考慮されていませんでした。コードは次のとおりです:

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 = () => マイクロサイトの実装方法を開いてログインできます

関連ビデオ:

Chuanzhi、Heima WeChatパブリックプラットフォーム開発ビデオチュートリアル

以上がカウントダウン機能を実装するための WeChat パブリック アカウントの開発 (純粋なコード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。