预期效果
1.在微信中打开，则显示一个遮罩层提示用户在浏览器中打开，类似如下：
微信打开的页面.png
2.在浏览器中打开，则跳转到对应的app，如果没有则跳转到下载页。
参考代码
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
<body>
<div style="width:100%;height: 100%;background: rgba(0,0,0,0.85);position: fixed;top:0;z-index: 3;" id="WXShadow">
<img src="./img/arrow.png" style="position: fixed;top: 4rem;right: 5.5rem;width:25%;">
<div style="font-size: 32px;color: #FFFFFF;position: fixed;top:17rem;width: 100%;text-align: center;">
请在外部浏览器中打开
</div>
</div>
</body>
<script>
//移动端的浏览器版本都比较高，可以监听DOMContentLoaded，而不是load，load会相对慢一点点，具体按事件使用情况而定。
document.addEventListener("DOMContentLoaded", function () {
var USER_Agent = navigator.userAgent;
var MOBILE_IOS = /(iPhone|iPad|iPod|iOS)/i;
var MOBILE_Android = /(Android)/i;
var WX = /(micromessenger)/i;
if (WX.test(USER_Agent)) {
//如果在微信中打开则只显示一个提示用户的罩层
return;
} else if (MOBILE_IOS.test(USER_Agent)) {
document.getElementById("WXShadow").style.display = "none";
window.location.href = "***://****"//苹果app跳转的协议
} else if (MOBILE_Android.test(USER_Agent)) {
document.getElementById("WXShadow").style.display = "none";
window.location.href = "***://****"//安卓app跳转的协议
}
//如果没有唤起app则3秒后会跳转到下载地址，反之则不会跳转到下载地址。
setTimeout(function () {
window.location.href = "https://****";//下载地址
}, 3000);
});
</script>
</html>
