微信公众号网页的缓存-终极解决方案

447 阅读1分钟

部分机型对于微信公众号网页的缓存很严重。

一般解决方案:刷新页面。取关公众号,退出微信。但是这些对于用户来说,体验很差。

终极解决方案:对于开发来说:微信公众号的菜单栏的入口是一个网页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://qiaoxin.apich.qfstatic.com/channel-openapi/version/getAssistantVersion")    
Http.send()    
Http.onreadystatechange = function () {      
if (this.readyState == 4) {        
var uuid = window.location.href        
uuid = uuid.split('?')[1]        
if (this.status == 200) {          
var url = "first.html?" + uuid + "&v=" + this.responseText || '';          
window.sessionStorage.setItem('version', this.responseText)          
window.location.replace(url);
} else {          
var url = "first.html?" + uuid + "&v=11.0.1";          
window.sessionStorage.setItem('version', '11.0.1')          
window.location.replace(url);        
}      
}    
}  
})()
</script>

first.html

<body>  <div id="app"></div></body>

缺点:每次发版,后端要记得更改版本号,要不然接口获取的版本号一直为旧的。原本打算在前端每次打包的时候生成版本号自动添加,研究很久最终未能实现,还希望有人有好的解决办法,不吝赐教。