问题重现
- 当我们需要开发手机端页面的时候,不得不在真机中调试
- 在微信中,可以通过微信提供的设置-通用-存储空间-清理微信(这是ios,android可能略不同)进行页面缓存的清理
- 在App中,就比较麻烦了,因为App一般不会像微信考虑的那么周全,给你提供清理页面缓存的途径
问题解决
像网上说的一些方法,经本人测试,都是无效的,如给head加meta标签:
<meta http-equiv="pragram" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, must-revalidate"> <meta http-equiv="expires" content="0">
自然而然,我们想到给文件加时间戳,如:
加时间戳前
<!DOCTYPE html> <html lang="en"> <head> <script src="js/test.js"></script> </head> <body> <div class="body"></div> </body> </html>
加时间戳后
<!DOCTYPE html> <html lang="en"> <head> <script src="js/test.js?_=1480405186452"></script> </head> <body> <div class="body"></div> </body> </html>
这样是可以的,但是请注意,这样只能解决html引入的js或css的缓存问题,html的缓存还是没有解决,也就是说你手机扫码进入页面后,看到的是之前缓存好的【加时间戳前】的html文件,就导致了加的时间戳不生效
为了解决html的缓存问题,我们可以给访问的html链接后面也加上一个时间戳
加时间戳前
http://v35new.faqrobot.org/robot/app.html
- 加时间戳后
http://v35new.faqrobot.org/robot/app.html?_=1480405186452
以上2种措施都要执行,才能彻底解决手机端缓存问题
- 我们可以通过自动化工具gulp来为html引用的外部资源加时间戳,具体请参考前端构建工具gulp的使用教程集合中的案例一
- 我们让app开发人员给我们页面的访问地址后面加个时间戳,来解决html的缓存问题