微信小程序、微信公众号webview清除缓存、页面白屏、空白、不刷新问题

 一、缓存带来的问题和原因

        我们在发布新版本的时候&＃xff0c;在打开微信小程序嵌套的h5页面和微信公众号h5页面的时候&＃xff0c;常常会发现页面还是上个版本的旧页面或者打开直接空白 白屏了&＃xff0c;那么为什么会存在这个问题呢&＃xff1f;

        原因是微信浏览器为了提高性能&＃xff0c;自带缓存功能&＃xff0c;缓存了html文件&＃xff0c;比如页面 https://www.xxx.com/abc.html,虽然这个页面内部内容都全部替换了&＃xff0c;但是页面路径还是同一个&＃xff0c;还是https://www.xxx.com/abc.html&＃xff0c;缓存就会生效&＃xff0c;还是会请求到旧的资源&＃xff1b;也因为有时手动清除了缓存&＃xff0c;缓存资源不存在会造成空白的现象。

        这种可能第二天或过几个小时后就自动清除了&＃xff0c;这个功能不能说好也不能说坏&＃xff0c;但缓存问题确实对发布新版本造成很大的困扰&＃xff0c;总不能让用户手动清除缓存吧&＃xff0c;而且清除缓存后还不一定成功有效。

 二、怎么解决

        在这之前我们肯定已经做过了努力&＃xff0c;比如服务器 cache-control 强缓存协商缓存&＃xff0c;还有加时间戳等等&＃xff0c;后面发现都没有用。所以我在改变 请求路径 例如https://www.xxx.com/abc.html 做尝试。

        同时我们也要知道hash路由和history路由的区别

hash 路由&＃xff1a;监听 url 中 hash 的变化&＃xff0c;然后渲染不同的内容&＃xff0c;这种路由不向服务器发送请求&＃xff0c;不需要服务端的支持&＃xff1b;
history 路由&＃xff1a;监听 url 中的路径变化&＃xff0c;需要客户端和服务端共同的支持&＃xff1b;

        vue项目默认采用的就是hash路由&＃xff0c;带#号的路由&＃xff0c;例如https://www.xxx.com/#/abc.vue&＃xff0c;#后面无论改变什么内容都不会向服务器发送请求,也不会清除缓存。所以hash路由后面加版本号还是时间戳都不会有太大作用&＃xff0c;例如https://www.xxx.com/#/abc.vue?version&＃61;1.0&t&＃61;Date.now()。采用history模式加版本号和时间戳应该是可行的&＃xff0c;但需要nginx加一些处理。

三、具体做法

重点&＃xff1a;既然#符号后面内容改变无效&＃xff0c;那能不能在 #符号前面加版本号改变请求路径呢&＃xff1f;

例如&＃xff1a;原访问路径是  https://www.xxx.com/policy/#/abc.vue&＃xff0c;policy是二级域名&＃xff0c;前端项目放在hdwork-h5目录下。

在#前面加版本号就变成&＃xff1a;https://www.xxx.com/123/policy/#/abc.vue,123是版本号的事例&＃xff0c;这个可以自己定&＃xff0c;是个数字就可以&＃xff0c;这种做法简单&＃xff0c;只需要nginx配置一下就可以了&＃xff0c;其他流程还是原流程。以下是nginx项目的配置参考&＃xff0c;具体以自己项目定

原理就是 当我们请求带版本号的请求路径https://www.xxx.com/123/policy/#/abc.vue时&＃xff0c;会自动重写成 正常的访问路径https://www.xxx.com/policy/#/abc.vue&＃xff0c;这样就达到了修改请求路径从而让微信浏览器以为这是一个新的路径&＃xff0c;就不会有缓存的情况。

四、版本号怎么定

        版本号只要是一个数字就可以&＃xff0c;因为nginx 正则就是 /d数字&＃xff0c;需要其他正则自己配置。版本号的产生可以在每次前端发版的时候定义全局变量 version&＃xff0c;也可以和后端约定&＃xff0c;通过接口的形式获取版本号&＃xff0c;每次发新版本&＃xff0c;version都&＃43;1更新&＃xff0c;版本号只要和上次就版本不一致就可以。建议还是通过接口形式获取版本号&＃xff0c;这样比较好维护也好变更。拿到版本号后再路径上追加版本号。

https://www.xxx.com/{版本号}/policy/#/abc.vue

五、加版本号的一些问题

        有一些微信小程序需要分享二维码或者路径的&＃xff0c;这种二维码都是比较固定的&＃xff0c;分享出去的路径是什么就是什么了&＃xff0c;不会有太大变化。所以对于分享出去的链接最好先把版本号去掉&＃xff0c;等扫码进入或者链接进入时&＃xff0c;请求接口再把版本号加上。