安卓手机微信浏览器缓存问题

最近遇到一个棘手的问题就是，已经上线半年的微信公众号支付项目突然在安卓手机显示白屏，刚开始通过抓包发现，每次公众号中的页面授权回调后就会白屏，手动刷新就会显示页面。

通过研究，其实在vue前端项目中，index.html是所有页面的入口文件，就相当于我们要进城，每次都会通过城门，进城之前需要例行检查你的牌子是不是这个城里面用的，是你就可以进去，但是你进去一次这个牌子就会留底，后面你又来了，我看到你的牌子以前有底，注意（ios就会重新留底，但是安卓就留下的是以前的那个底，你得想办法去更新那个底）。我通过网上的各种方法，都没啥作用。

主要试了一下方法

1、手动清理缓存

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

2、自动清理缓存

设置meta标签 （无效）

<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" />

3、版本号，修改我index.html引入文件的版本号

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-orientation" content="portrait" />
    <meta name="format-detection" content="telephone=no" />

//获取指定位数的随机数
       function randomNum(n){
           var t='';
           for(var i=0;i<n;i++){
               t+=Math.floor(Math.random()*10);
           }
           return t;
       }

document.write("<script type=\"text/javascript\" src=\"/common.js?ver=" +randomNum(8)+ "\"></scr"+"ipt>");
document.write("<script type=\"text/javascript\" src=\"/admin/admin.js?ver=" +randomNum(8)+ "\"></scr"+"ipt>");
</script>

</body>
<style>
    .mainBody {
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: #d6dee0;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }
</style>

</html>

这个方法其实只是更新了index.html中的内容，而没有更新浏览器本身的index.html

折腾了两天，都没有解决，后来有同事告诉我说是vue前端项目的"#"去掉，就好了，试了下，果然是对的。但是在去掉“#”的时候还是有一个坑。

前端路由中添加

 
   new Router({ 
 
   mode: 'history', 
 
   routes: vueRouters 
 
   }); 
 
后端添加插件 
    historyFallback 
   
    然后添加 
   
      app.use(historyApiFallback({ 
     
       whiteList: ['/jhq/app/weixin/api/get_wx_access_token'], 
     
       rewrites: [ 
     
       { 
     
       from: '/jh/mobile', 
     
       to: '/jh/mobile/index.html' 
     
       }, 
     
       { 
     
       from: '/jh', 
     
       to: '/jh/index.html' 
     
       }, 
     
       ] 
     
      })); 
     
      在这里解释一下，由于一个域名下有很多项目，所以我们给添加了子域名来区分，所以路由中必须带“jh”这个前缀。我刚开始没有带，结果首页一直白屏。

安卓手机微信浏览器缓存问题

1、手动清理缓存

猜你喜欢