最近遇到一个棘手的问题就是,已经上线半年的微信公众号支付项目突然在安卓手机显示白屏,刚开始通过抓包发现,每次公众号中的页面授权回调后就会白屏,手动刷新就会显示页面。
通过研究,其实在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引入文件的版本号
<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">-->
<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" />
<link rel="shortcut icon" href="../img/logo_1.png" type="image/x-icon" />
<link href="/admin/index.css" rel="stylesheet" />
<link href="/admin/admin.css" rel="stylesheet" />
</head>
<body class="mainBody">
<div id="app"></div>
<div id="app"></div>
<script type="text/javascript">
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=\"/admin/admin.js?ver=" +randomNum(8)+ "\"></scr"+"ipt>");
</script>
<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前端项目的"#"去掉,就好了,试了下,果然是对的。但是在去掉“#”的时候还是有一个坑。
前端路由中添加