项目需求：将H5商城页面嵌套到公司微信公众号里
最近搞工程时碰到了个让人头大的事儿，就是把我们公司的微信公众号里添加H5商城页面。这个项目和普通的手机网站没啥两样儿，但下了单选付款方式那块儿出了问题。就是说下单之后的24小时之内如果不付钱，订单就自动撤消。做这个计时功能的时候，遇上了JS计时器失灵的问题。
问题出现：JS倒计时失效
搞倒计时这块儿，刚开始就是用JavaScript来做的，测过好几次都没啥问题。但真要把程序发出去，比如发布到安卓版微信上，就发现有点问题：一旦屏幕锁住然后开锁，倒计时就不动了，主机弹琴一样停顿了下来。说白了，手机休眠后，时间仿佛冻僵了似的，动不了了。
<pre class="brush:js;toolbar:false;”>
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("” + word);
timer = setTimeout(“UpdateTime()”, 1000);
}
else {
$('.content').find('.w_op').hide();
clearTimeout(timer);
jQuery(“.tc”).html(“” + “订单过期，已自动取消~”);
window.location.href='@Url.Action(“orderDetail”, “Order”, new { OrderNumber = Model.No })';; //订单过期，跳转到订单详情页
}
}
jQuery(document).ready(function () {
UpdateTime();
});
寻找解决方案：重新请求服务器时间并设置页面缓存策略
面对这个问题，团队意识到得重新想办法了。最后，经过大家一起研究跟确认，他们终于找到了个靠谱的法子。首先，当用户进入首页的时候，我们就去服务器那儿查询还剩多少时间。然后在网页上用JS装个小程序，让它给咱们自动倒计时。这样就算手机锁屏后再开，计时也不受影响。不过在实际应用过程中，有用户说解锁后倒计时时间不对。经过检查才发现，原来这都是浏览器缓存搞的鬼：不刷新页面的话，浏览器就一直用之前那次请求来算倒计时。
解决方案优化：设置页面缓存策略
为了搞定这个问题，咱们要在meta标签里设置些控制页缓存策略的参数。首先，得加个叫nocache的属性，这样每次看网页时都会重新加载新的内容，而不是用旧的缓存数据；其次，弄个叫expires的属性，设个超时时间一到，服务器就能自动收到旧数据已经过期的提示，然后为我们提供最新的数据。这样一搞，就能大大减少因为浏览器缓存而产生的数据滞后问题了。
总结与展望
咱们这次解决了JS倒计时在微信公众平台上出现过的问题，这让我明白了把HTML5网页嵌入进去会面临哪些难题和挑战。以后做项目的话，我会注意数据前后端同步、页面缓存这些事儿，还得努力提高大家的合作水平和技术本领。
这就是我对搞定微信里H5页面那个倒计时有问题的实战经验和心得，希望能给同样需要或者遇到这个问题的你一点启示。有啥不懂或者你也来分享下你的故事？欢迎随时跟我互动！感谢你花时间读完这篇小文儿！
评论0