微信H5开发缓存问题解决

移动端微信开发过程中，多数人可能遇到过打包编译完的文件上传到服务器之后，立即访问会发现存在缓存，有的时候部分设备刷新页面或者清除微信以及QQ浏览器缓存会解决这种现象，这对于项目运行有一定的影响，所以总要找出解决办法。

原因：

微信x5内核浏览器webview上层缓存机制，访问过的页面，静态资源都会被缓存，待下次访问，所有资源是从缓存中拉取的，而不是实时更新的。

解决办法：

1.手动清理缓存（十分不友好）

安卓：debugx5.qq.com，勾选Cookie，文件缓存两项，进行清除即可。

ios：退出微信重新登录即可清除缓存。

2.自动清理缓存

手动清除缓存虽然可能能够达到更新的目的，但是对于用户十分不友好，总不能每次更新都让客户去刷新页面，这对于ToB/ToC的项目是要命的，要想从根本上解决问题，还是要浏览器不缓存资源的方法最为妥当。

①版本号

对项目中的静态资源文件名称添加版本号，如：文件名带参数【index.js?v=b8c42adff1b74f6e】或者采用md5文件名【index-b8c42adff1b74f6e.js】两种方式，经过测试均有效果，但是文件名带参数的方式可能会被微信忽略掉hash值。

②nginx

location ~ .*\.(?:htm|html)$ {
    # 由于服务器部署多套项目环境，所以配置具体的项目目录。
    root    jimei-admin
    # 缓存设置 -1为永不缓存
    expires      -1;
    # 添加返回头字段，设置HTTP请求头
    add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}

通过以上方法就可以解决掉头疼的微信X5浏览器缓存问题了，nice！