HTML
<div class="container">
<div id="btn_download" class="card-btn card_item">
立即下載
</div>
</div>
<div class="mask" @click="hide">
<ol>
<li>點擊右上角</li>
<li>瀏覽器打開</li>
</ol>
</div>
JS方法
document.querySelector('#btn_download').onclick = function () {
toApp();
}
function toApp() {
var btn_download = document.getElementById("btn_download");
var ua = window.navigator.userAgent.toLowerCase();
var isweixin =
navigator.userAgent.toLowerCase().match(/micromessenger/i) != null;
var isqq = navigator.userAgent.toLowerCase().indexOf("qq/") > -1;
var isweibo = ua.match(/weibo/i) == "weibo";
if (isweixin || isweibo) {
document.getElementsByClassName("mask")[0].style.display = "block";
document.body.addEventListener('touchmove', bodyScroll, false);
document.documentElement.style.overflow = 'hidden';
document.body.style.overflow = 'hidden';
if (/android/i.test(navigator.userAgent)) {
alert("安卓微信瀏覽器");
}
else if (/ipad|iphone|mac/i.test(navigator.userAgent)) {
alert("iOS微信瀏覽器 ");
}
} else {
if (/android/i.test(navigator.userAgent)) {
if (!isweixin && !isqq) {
btn_download.setAttribute("href", "ops://");
this.openandIndex();
}
} else if (/ipad|iphone|mac/i.test(navigator.userAgent)) {
if (!isweixin && !isqq) {
window.location.href = "com.dakang.mentalhealth://";
openiosIndex();
} else if (isqq) {
btn_download.setAttribute("href", "com.dakang.mentalhealth://");
openiosIndex();
}
}
}
}
function openandIndex() {
var t = setTimeout(function () {
window.location.href = "******"
}, 3000);
setTimeout(function () {
clearTimeout(t);
}, 3500);
}
function openiosIndex() {
var t = setTimeout(function () {
window.location.href = "******";
}, 1500);
setTimeout(function () {
clearTimeout(t);
}, 1500);
}
CSS樣式
.mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
text-align: center;
line-height: 100%;
font-size: 1.2rem;
color: #333;
background-color: rgba(242, 242, 242, 0.7);
}
ol {
position: absolute;
top: 30%;
left: 35%;
}
ol li {
margin-bottom: 30px;
}