微信小程序H5页面缓存问题处理

微信小程序会缓存H5页面，导致页面升级之后不能及时刷新。

这种情况通过配置nginx不缓存静态页面无法影响到小程序缓存。

假设H5请求地址是 https://xxx/h5/

用户进入小程序之后生成一个数字，请求H5时把数字拼接到URL后缀即可。

例： https://xxx/h5/222/

近期在发版验证时遇到一个问题，微信公众号登入后页面显示的是老的，强制刷新后，再退出重新登入，仍然显示的是老的页面；

经过一番查找得到了解决方案：

（1）公众号放的菜单地址后加 ?version=1.0.0 每次更新页面则更新菜单；

但是这样每次发版还得修改公众号的菜单，多一步很不方便；

于是和前端一块尝试寻找到另一中解决方案：

（2）前端在html的header中加入缓存策略

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

<meta http-equiv="Pragma" content="no-cache" />

<meta http-equiv="Expires" content="0" />

<meta http-equiv="Cache" content="no-cache" />

这样就彻底解决了缓存问题；

但是注意，往往遇到此问题时，已经缓存了没有加缓存策略的html文件，需要清除掉缓存，加载新的带缓存策略的html文件，将来才会实时更新；但是也不能让用户每个都清理缓存啊；

于是就要配合第一种解决方法，在菜单链接后面加参数，这样用户侧会重新load新版本的html（微信菜单设置发布后，有将近10分钟的延时），这样配合使用就完美解决了我们的问题；

期间多次尝试发现，微信的缓存策略和页面地址的后缀参数相关，使用相同的后缀，在不设置缓存策略下，就能回到对应的版本，很强大，也很鸡肋

前言：

缓存这个问题的出现，真真切切的感受到微信浏览器这鬼东西对前端程序员充满了恶意，捋捋自己的发型，甚是恐慌。

解决方案：

出现缓存问题导致用户出现很多车祸现场（还和java叼起来了），因为是上线了的项目，为了不破环生产环境,让客服暂时教用户解决微信缓存问题。

手动清理缓存

微信浏览器在iOS和安卓中浏览器内核不一样；从而不同的系统和不同版本的微信方式也各有不同。清理缓存的方式也就各种不一样的：

android：debugx5.qq.com，这是微信x5内核浏览器的debug调试页面，在微信浏览器打开，拉到页面最底部，有清理缓存的选项。

安卓微信x5内核浏览器debug页面

ios：

1、 取关公众号，重新关注；

2.、 退出微信账号登陆，重新登陆微信；

3、 微信设置-通用-存储-清理缓存；

4.、 进入页面，右上角‘...’选项中点击“刷新”

自动清理缓存

h5页面设置meta标签

一般浏览器还有用，碰到wx，并没有鸟用

文件加载设置版本号

h5很多都是静态资源，有些链接都是通过后台配的所以加版本号变得 *** 作异常繁琐，解决起来也是摒弃了一些逻辑。不过值得欣慰的是，这个令人头皮发麻的问题得以解决！

版本号有两种：

为啥用第二种，因为微信访问的时候有些场景可能会把参数或者参数值直接给忽略

总结：还是回归现实（天气冷了，还想多买几件格子衫）。

末尾彩蛋

---