微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题_小程序通过webview嵌入h5页面,在部分手机上显示空白是什么原因呢?

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

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

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

        如果不处理，缓存第二天或过几个小时后就自动清除，这个功能有好有坏，但缓存问题确实对发布新版本造成很大的困扰，总不能让用户手动清除缓存吧，而且清除缓存后还不一定成功有效。

 二、怎么解决

        在这之前我们肯定已经做了尝试，比如服务器 cache-control 强缓存协商缓存，还有加时间戳等等，发布后还是没有用。在本文中会采用修改请求路径的方式做测试。

例如下面常规的清除缓存的方式，参考我的另外一篇文章

h5、微信浏览器、微信公众号清理缓存的常用方法_飞歌Fly的博客-CSDN博客h5浏览器特别是微信公众号存在缓存的问题，让我们在测试、产品、用户面前彻底丢了面子，他们会问。为什么会有缓存？别人的产品可以做到，为什么我们的不可以？下面提供几种方案可以尝试处理h5浏览器缓存的问题。一、普通h5浏览器清理缓存方式。1、在index.html文件中加入清理缓存的meta标签（有些浏览器有用，有些浏览器然并卵）<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /&https://blog.csdn.net/qq_35430000/article/details/111572760

hash路由和history路由的区别：

hash 路由：hash 就是指 url 尾巴后的 # 号以及后面的字符，监听 url 中 hash 的变化，然后渲染不同的内容，这种路由不向服务器发送请求，不需要服务端的支持；
history 路由：监听 url 中的路径变化，需要客户端和服务端共同的支持；

        vue项目默认采用的就是hash路由，带#号的路由，例如https://www.xxx.com/policy/#/abc.vue，#后面无论改变什么内容都不会向服务器发送请求,也不会清除缓存。所以hash路由模式后面加版本号还是时间戳都不会有太大作用，例如https://www.xxx.com/policy/#/abc.vue?version=1.0&t=Date.now()。

另外采用history模式加版本号和时间戳重新发起请求清理缓存应该是可行的，因为url访问路径已经改变，这个我没有具体尝试，如果有效果就不需要下面的步骤了。history模式需要nginx加一些处理，要不然刷新会404。

三、具体做法

重点：既然#符号后面内容改变无效，那能不能在 #符号前面加版本号改变请求路径呢？

举例：原访问路径是  https://www.xxx.com/policy/#/abc.vue，policy是项目名称，前端项目放在服务器data/hdwork-h5目录下。

在#前面加版本号就变成：https://www.xxx.com/policy/123/#/abc.vue,123是版本号的举例，这个可以自己定，是个数字就可以，这种做法简单，只需要nginx再多加一个匹配数字的配置就可以。以下是nginx项目的配置参考，具体以自己项目定义。这里只给出了匹配/policy/\d+ 匹配数字的案例，不加数字的/policy 就是原逻辑。

这样 加版本号https://www.xxx.com/policy/{版本号}/#/abc.vue 和 不加版本号https://www.xxx.com/policy/#/abc.vue，这两种方式都是可以正常访问的

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

四、版本号怎么定

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

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

五、加版本号的一些问题

        有一些微信小程序需要分享二维码或者分享给第三方的链接。因为二维码都比较固定，不会经常变化。所以对于分享出去的链接最好先把版本号去掉，等扫码进入或者链接进入时，再请求接口把版本号拼接上。