目录
说明
下载app页面，在微信中分享，很容易被拦截。这里作了一个处理，当在微信中打开链接，自动跳转到浏览器中打开提示下载。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>XXX客户端</title>
<style type="text/css">
.wxtip {
background: rgb(104 102 102 / 80%);
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 998;
display: none;
}
.wxtip-icon {
width: 52px;
height: 67px;
background: url(weixin-tip.png) no-repeat;
display: block;
position: absolute;
right: 20px;
top: 20px;
}
.wxtip-txt {
margin-top: 100px;
color: #fff;
font-size: 35px;
line-height: 1.5;
float: right;
margin-right: 50px;
text-align: left;
}
.vx-body {
position: absolute;
top: 25%;
text-align: center;
width: 100%;
}
.vx-font {
font-size: 55px;
font-weight: bold;
text-align: center;
margin-top: 10px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.vx-button {
color: #fff;
background-color: #3498DB;
border-color: #3498DB;
font-weight: 400;
padding: 10px 20px;
font-size: 40px;
text-decoration: none;
width: 90%;
display: inline-block;
height: 80px;
line-height: 80px;
border-radius: 52px;
}
.vx-tips-text {
background: #e9e8e9;
width: 80px;
border-radius: 10px;
height: 45px;
color: #000;
font-weight: bold;
text-align: center;
display: inline-block;
}
</style>
<script type="text/javascript">
function downloadAPP() {
var ua = navigator.userAgent;
var isWeixin = !!/MicroMessenger/i.test(ua);
if (isWeixin) {
document.getElementById("weixinTip").style.display = "block";
} else {
window.location.href = "https://a.b.c/dowanload/4fde027e-948d-44e3-89f0-28114de52f7e.apk";
}
}
function wxTipClick() {
document.getElementById("weixinTip").style.display = "none";
}
</script>
</head>
<body>
<div class="vx-body">
<img src="../static/logo.jpg" style="height: 280px;" /><br />
<div class="vx-font">这里写slogan</div>
<div style="margin-top: 85px;width: 100%;text-align: center;">
<a href="#" class="vx-button" onclick="downloadAPP()">下载App</a>
</div>
</div>
<div class="wxtip" id="weixinTip" onclick="wxTipClick()">
<div class="wxtip-txt">
请点击右上角
<div class="vx-tips-text">
···
</div>
按钮选择<br />使用浏览器进行下载
</div>
</div>
</body>
</html>