由于微信为了节省用户流量,提升访问速度,会将用户所访问过的站点的各项资源进行缓存,并且这个缓存不能通过清空缓存来清除,必须删除所有微信的数据,才能清除所有的缓存。
这样以来极大提升了用户访问速度(弥补了微信反映慢的坑爹之处),节省了用户的流量消耗。然而带给开发者的则是无尽的痛苦。加之微信的浏览器并非标准webkit,也非所号称的QQx5浏览器。其并不完全支持html5标准(并加入了一些自己奇奇怪怪的标准,例如无法发起跨域ajax请求)所以,测试必须在微信上完成,不能使用chrome也不能使用QQ浏览器。
然而,我们可以通过下面的步骤解决微信开发中的种种问题:
劫持域名到开发设备上
在每次访问的路径后面都添加不同的url参数避免html文件的缓存
给要测试的页面添加相应的meta避免js和CSS的缓存
一、劫持域名到开发设备上
这一步并不能解决微信客户端缓存的问题,但能解决微信服务器上的缓存,目前还不确定微信的缓存是只在客户端存在还是在服务器上也有一次缓存,如果只有客户端存在的话,这一步是可以跳过的。
大致的做法就是,让手机(测试设备)连接一个与网站服务器在同一个网络下的路由器。并且在路由器上设置固定的域名解析到网站的服务器(或者你的电脑)上,也就是DNS劫持。
然后当手机访问网站的域名的时候,就会访问到你开发的服务器(或你的电脑)上了。
具体的步骤待我详细向运维的朋友探讨之后再来补全。
二、通过url参数避免html文件缓存
测试发现,请求同一个页面的时候,如果url后面的参数不一样,则不会调用微信缓存中的html页面,由此可以解决html页面的缓存问题。
但是每一次都要去修改后面的参数也是个麻烦事情。于是,我编写了一个简单的html文件如下:
<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
<title>测试跳转</title>
<!-- 坑爹的微信缓存-->
<meta http-equiv="cache-control" content="max-age=0"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
<meta http-equiv="pragma" content="no-cache"/>
</head>
<body>
正在跳转……
<script>
//定义将要跳转的路径,通过修改这个路径进入不同的页面
var route = "login/0"
//获取当前时间戳
var n = new Date().getTime()
//跳转要测试的页面
window.location.href = './index.html?n=' + n + "#!/" + route
</script>
</body>
</html>
关键在于script的地方,将当前时间戳拼接在url后面然后跳转。这样每次就只用访问这个文件,他会帮我们自动生成不同的参数,并跳转要测试的地址。
如果要测试不同的地址,只需要修改route这个参数,就可以了。
三、避免css和js的缓存
以上工作完成之后,我们解决了html的缓存问题,但是通过访问nginx(或是其他工具)的日志发现,虽然带上了不同的参数,html确实不会缓存了,但是却没有js和css文件的请求。
猜测在这里,微信发现我们所请求的js和css文件在他的缓存里面有了,所以就直接打开缓存中的文件返回给了页面上。(所以这就坑爹了啊!!)
所以我们要在html文件的头部(head)处加上一些meta:
<meta http-equiv="cache-control" content="max-age=0"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
<meta http-equiv="pragma" content="no-cache"/>
以上,这样请求过来的都是新的版本啦,再也不用头疼于微信缓存失效的问题了。
ps,网上很多答案都提供了添加在head处的meta,但是有的人说没有用。目测是因为meta只能保障js和css等资源不会被缓存,但是无法保障html不被缓存。所以,要和url参数方法于meta方法一起使用,才能保障毫无侧漏!
有话要说