微信公众号，实现倒计时

sarva 发布于2019-08-26 12:09 / 902人阅读

摘要：在微信公众号开发过程中要实现倒计时的一个功能。原因是解决方案订单生成的时候我们记录下这个时间为，时间间隔为分钟内需要付款，为，为现在的时间。那么倒计时时间，代码如下支付超时订单已提交，请在分秒内完成支付

在微信公众号开发过程中要实现倒计时的一个功能。效果如下：

开始的思路没有考虑页面在后台运行以及锁屏等情况。代码如下：

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

}

改造之后发先问题依然存在。原因是：
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:"支付超时",
                isFalse:true
            });
            return;
        }
        let minutes = parseInt(sub/60);
        let Seconds = sub%60;
        let tip = "订单已提交，请在"+minutes+"分"+Seconds+"秒内完成支付";
        console.log(tip);
        this.setState({
            tip:tip,
            isFalse:false
        });
    },1000);

超融合服务器私有云微信公众号微信公众号名字微信公众号标签微信公众号排版

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108126.html

微信公众号，实现倒计时

摘要：在微信公众号开发过程中要实现倒计时的一个功能。原因是解决方案订单生成的时候我们记录下这个时间为，时间间隔为分钟内需要付款，为，为现在的时间。那么倒计时时间，代码如下支付超时订单已提交，请在分秒内完成支付在微信公众号开发过程中要实现倒计时的一个功能。效果如下： showImg(https://segmentfault.com/img/bVbelsn?w=343&h=71); 开始的思路...

Jeffrrey 2019-06-25 12:17 评论0 收藏0
前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

seanlook 2019-08-05 10:11 评论0 收藏0
前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

paney129 2019-08-20 11:14 评论0 收藏0
26天学通前端开发（配资料）

摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。前言好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。网上有很多前端的学习路径文章，大多是知...

blair 2019-08-21 16:59 评论0 收藏0
微信小程序-从零开始制作一个跑步微信小程序

摘要：微信小程序中的每一个页面的路径页面名都需要写在的中，且中的第一个页面是小程序的首页。真机运行截图运行于，微信版本功能能够计算里程时间实时获取跑步路径有些粗糙思路主要使用了微信小程序的获取位置和地图组件。首发地址一、准备工作 1、注册一个小程序账号，得用一个没注册过公众号的邮箱注册。2、注册过程中需要很多认证，有很多认证，比较繁琐，如果暂时只是开发测试，不进行提审、发布的话，只要完成...

zlyBear 2019-08-20 12:16 评论0 收藏0