使用微信内嵌H5网页解决JS倒计时失效问题

网络编程 2024/9/24 佚名

3 1 2

项目要求：将H5商城页面嵌套到公司微信公众号里

项目本身的开发跟移动端网页并无太多差异，只是这昨天遇到一个问题，说是棘手，到也简单。

用户下单后，在选择支付方式页面，有个倒计时的逻辑（从下单时开始计算，24小时后未支付，会有ws自动取消这个订单），js代码如下：　

<script type="text/javascript"><br> var timespan = '20160113'; //后台程序生成24小时时间差值，这里随便写写
  var timer;
  function UpdateTime() {
   if (timespan > 0) {
    var hour = Math.floor(timespan / (60 * 60));
    var minute = Math.floor((timespan - (hour * 60 * 60)) / 60);
    var second = (timespan - (hour * 60 * 60) - (minute * 60));
    var word = "支付剩余时间" + (hour<10"0"+hour):hour) + "：" + (minute<10"0"+minute):minute) + "：" + (second<10"0"+second):second) + "，逾期订单将自动取消~";
    timespan--;
    jQuery(".tc").html("<i class='time'></i>" + word);
    timer = setTimeout("UpdateTime()", 1000);
   }
   else {
    $('.content').find('.w_op').hide();
    clearTimeout(timer);
    jQuery(".tc").html("<i class='time'></i>" + "订单过期，已自动取消~");
    window.location.href='@Url.Action("orderDetail", "Order", new { OrderNumber = Model.No })';; //订单过期，跳转到订单详情页
   }
  }
  jQuery(document).ready(function () {
   UpdateTime();
  });<br></script>

　　页面效果如下：

　　这样写，本来没有任何问题的，而且本地测试都ok。

　　可是，放到外侧的时候，问题就来了。安卓版微信，会出现当手机锁屏时，出现倒计时没有走，仍然是关闭屏幕前时间，也就是说息屏这段时间，时间静止了...

　　后来，后来当然不能着急啊，各方求救，寻找方法，于是有了下面：

　　倒计时的实现，在第一次进入页面时，请求服务器获取倒计时的剩余时间，然后在页面通过js等手段再倒计时；手机在锁屏后再解锁后倒计时还在进行但是倒计时的时间不准确，究其原因是在解锁后没有去请求服务器的时间来重新倒计时而是还是按照上次锁屏的基础上进行倒计时的，这是因为浏览器有缓存，在不刷新页面的情况下，浏览器会缓存第一次请求的内容，服务端更新后浏览器仍然显示第一次的内容

　　后来多方查证，可以在meta里进行设置，设置页面nocache，每次访问次页面，均需要从服务器重新获取，而不是使用缓存中读取

　 expires设定过期时间，一旦过期就必须请求服务器，

　 expries出现在http-equiv属性中，使用content属性表示页面缓存的过期时间

　 expries=0，缓存过期前的分钟数。若用户在页面过期前返回该页面，就会显示缓存的版本页　　　

<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0">

以上所述是小编给大家介绍的使用微信内嵌H5网页解决JS倒计时失效问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

微信,h5,js倒计时失效

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“使用微信内嵌H5网页解决JS倒计时失效问题”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年09月24日

使用微信内嵌H5网页解决JS倒计时失效问题

js数组与字符串常用方法总结

bootstrap按钮插件（Button）使用方法解析

评论“使用微信内嵌H5网页解决JS倒计时失效问题”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接