网站建设资讯

NEWS

网站建设资讯

怎么利用微信内嵌H5网页解决JS倒计时失效的问题

小编给大家分享一下怎么利用微信内嵌H5网页解决JS倒计时失效的问题,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

创新互联建站总部坐落于成都市区,致力网站建设服务有成都网站制作、成都做网站、网络营销策划、网页设计、网站维护、公众号搭建、微信小程序开发、软件开发等为企业提供一整套的信息化建设解决方案。创造真正意义上的网站建设,为互联网品牌在互动行销领域创造价值而不懈努力!

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

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

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

页面效果如下:

怎么利用微信内嵌H5网页解决JS倒计时失效的问题

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

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

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

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

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

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

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

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

 
 

看完了这篇文章,相信你对怎么利用微信内嵌H5网页解决JS倒计时失效的问题有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


名称栏目:怎么利用微信内嵌H5网页解决JS倒计时失效的问题
分享URL:http://cdweb.net/article/pcdsei.html