部分机型对于微信公众号网页的缓存很严重。
一般解决方案:刷新页面。取关公众号,退出微信。但是这些对于用户来说,体验很差。
终极解决方案:对于开发来说:微信公众号的菜单栏的入口是一个网页url:如index.html
有时发版后index请求的依旧是旧版index.html。所以即使html里面的js,css添加了版本号也是没有用的。所以,我们可以通过在index.html后面加版本号来使用户获取最新的index.html。
index.html页面支付负责实时获取版本号,来跳转到真正有内容的页面first.html。在 vue.config.js里面配置打包生成的文件为first.html
configureWebpack: (config) => {
let HtmlWebpackPlugins=new HtmlWebpackPlugin({
filename: 'first.html',
template: 'public/first.html',
inject: true,
})
config.plugins.push(HtmlWebpackPlugins)
代码如下:index.html
<script>
(function a() {
const Http = new XMLHttpRequest()
Http.open("POST", "http://xxx/getAssistantVersion")
Http.send()
Http.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
var url = "first.html?"+ "&v=" + this.responseText || '';
window.location.replace(url);
} else {
var url = "first.html?" + "&v=11.0.1";
window.location.replace(url);
}
}
}
})()
</script>
first.html
<body>
<div id="app"></div>
</body>
缺点:每次发版,后端要记得更改版本号,要不然接口获取的版本号一直为旧的。原本打算在前端每次打包的时候生成版本号自动添加,研究很久最终未能实现,还希望有人有好的解决办法,不吝赐教。