这里我们直接使用JQuery，调试的时候一定要注意缓存啊
简单粗暴直接上代码，别的都是赤裸裸的广告。
实现方式
判断微信的ua，然后弹出一个遮罩提示用户在浏览器中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
html, body, iframe, .page {
height: 100%;
width: 100%;
border: 0;
margin: 0;
padding: 0;
font-family: Tahoma, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif !important;
font-weight: 400;
}
h1, img, p, a, span {
border: 0;
margin: 0;
padding: 0;
}
.tip {
color: #FF0000;
font-size: 18px;
padding-top: 18px;
display: block;
}
.page {
text-align: center;
}
.page h1 {
margin: 0 0 35px;
font-size: 24px;
line-height: 32px;
color: #666;
font-weight: normal;
}
.content {
position: absolute;
left: 0;
top: 50%;
margin-top: -142px;
width: 100%;
z-index: 1;
}
.page img.logo {
width: 70px;
margin: 0 auto 35px;
display: block;
}
.open-button {
display: block;
margin: 0 auto;
width: 260px;
height: 44px;
line-height: 44px;
color: #00B9C8;
font-size: 16px;
text-decoration: none;
border-radius: 5px;
border: 1px solid #00B9C8;
}
.download-button {
margin-bottom: 20px;
background: #00B9C8;
color: #fff;
}
</style>
</head>
<body>
<div id="pMask" style="width: 100%;height: 100%;background-color: #333;display: none">
<img src="callapp.png" style="width: 100%"/>
</div>
<div class="page" id="pMain">
<p class="tip">已安装？点击右上角用浏览器打开！</p>
<div class="content">
<img src="http://www.ylzx66.com/[email protected]" alt="" class="logo">
<h1>xxxxx标题</h1>
<a href="http://www.ylzx66.com/gamedownload/index.html" class="open-button download-button"> 立即安装 </a>
<p>
<a href="" class="open-button" id="call_app_url"> 打开 APP 继续 </a>
</p>
</div>
</div>
</body>
<script>
/*获取到Url里面的参数*/
(function ($) {
$.getUrlParam = function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
})(jQuery);
var roomNum = $.getUrlParam('roomNum');
console.log(roomNum)
if (roomNum != null) {
$('#call_app_url').attr('href', 'ylscqp://?roomNum=' + roomNum);
}
function openWithIFrame(uri) {
let ifr = document.createElement('iframe');
ifr.style.cssText = 'opacity:0;width=1px;height=1px;';
ifr.src = uri;
document.body.appendChild(ifr);
setTimeout(function () {
document.body.removeChild(ifr);
}, 2000);
return ifr;
}
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
$('.tip').show();
$('#pMask').show();
$('#pMain').hide();
}else {
$('.tip').hide();
$('#pMask').hide();
$('#pMain').show();
}
setTimeout(function () {
openWithIFrame("ylscqp://?roomNum=" + roomNum);
}, 100);
</script>
</html>
指引图片
