本文摘自PHP中文网,作者不言,侵删。
最近参考项目开发,遇到这样一个需求将H5商城页面嵌套到公司微信公众号里,在开发遇到一个棘手的问题,js倒计时失效问题,怎么回事呢?下面说下我使用微信内嵌h5解决的这一问题,需要的朋友参考下吧项目要求:将H5商城页面嵌套到公司微信公众号里
项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单。
用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算,24小时后未支付,会有ws自动取消这个订单),js代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
页面效果如下:
这样写,本来没有任何问题的,而且本地测试都ok。
可是,放到外侧的时候,问题就来了。安卓版微信,会出现当手机锁屏时,出现倒计时没有走,仍然是关闭屏幕前时间,也就是说息屏这段时间,时间静止了...
后来,后来当然不能着急啊,各方求救,寻找方法,于是有了下面:
倒计时的实现,在第一次进入页面时,请求服务器获取倒计时的剩余时间,然后在页面通过js等手段再倒计时;手机在锁屏后再解锁后倒计时还在进行但是倒计时的时间不准确,究其原因是在解锁后没有去请求服务器的时间来重新倒计时而是还是按照上次锁屏的基础上进行倒计时的,这是因为浏览器有缓存,在不刷新页面的情况下,浏览器会缓存第一次请求的内容,服务端更新后浏览器仍然显示第一次的内容
后来多方查证,可以在meta里进行设置,设置页面nocache,每次访问次页面,均需要从服务器重新获取,而不是使用缓存中读取
expires设定过期时间,一旦过期就必须请求服务器,
expries出现在http-equiv属性中,使用content属性表示页面缓存的过期时间
expries=0,缓存过期前的分钟数。若用户在页面过期前返回该页面,就会显示缓存的版本页
1 2 3 |
|
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
如何使用HTML5
File接口在web页面上使用文件下载
HTML5中postMessage API的基本使用
新增HTML5的八类INPUT输入
以上就是如何利用微信内嵌H5网页解决JS倒计时失效的问题的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html5中返回当前音频/视频的url的属性currentsrc
更多相关阅读请进入《微信》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者