方法都是网上的方法,但是抄来的方法有一个缺陷就是,
打开APP后再返回网页,发现依然能跳转到下载页面
这里看到了一中解决方法,就是在setTimeout中加时间差值的判断,如果setTimeout中的时间差值超过1s,即代表用户已经安装APP
// 打开APP
openApp() {
let ua = navigator.userAgent.toLowerCase();
console.log(ua);
if(this.isWeixinBrowser(ua)){
$('.layer').show();//遮罩层(使用外部浏览器打开,此处样式自行设定)
}else{
if(this.isAndroid(ua)){
//android
window.location = 'innersect://navigation?target=product&id=1747';
let loadDateTime = Date.now();
let turn = setTimeout(function(){
let timeOutDateTime = Date.now();
if ((timeOutDateTime - loadDateTime) < 1000 ){
window.location = 'https://fir.im/d7bc?utm_source=fir&utm_medium=qr&release_id=5b0bd16e959d6952471473bd'
}
},600);
}else{
//ios
window.location = 'innersect://navigation?target=product&id=1747';
let loadDateTime = Date.now();
let turn = setTimeout(function(){
let timeOutDateTime = Date.now();
if ((timeOutDateTime - loadDateTime) < 1000 ){
window.location = 'itms-apps://itunes.apple/WebObjects/MZStore.woa/wa/viewSoftware?id=1243476718';
}
},600);
}
}
},
isWeixinBrowser(ua) {
return (/micromessenger/.test(ua)) ? true : false;
},
isAndroid(ua) {
return ua.indexOf('android') > -1 || ua.indexOf('linux') > -1;
}
上面分享的方法有缺陷,在安卓上体验没有问题,但是在苹果上,当没安装APP的时候,会弹出一个无效链接的警告框,体验非常不好
这里采取另外一个比较通用的解决方案:
点击下图中的立即打开按钮后,跳转到一个另外的网页B,在另一个网页B中完成打开APP,或者引导下载
网页B实现逻辑:
(1) 首先网页放APP的静态下载按钮,不参与其他逻辑
(2) onload事件
window.location.href = 'app scheme';
// 代码片段A
setTimeout(function() {
window.location.reload();
window.location.href = '下载引导页';
}, 50);
解释:
代码片段A解决苹果机器弹出无效网址的警告框问题,其实苹果机器已经弹出来了警告框,但是50毫秒后立即刷新,覆盖了警告框(同时刷新页面不会覆盖confirm弹框),所以能够在用户已经安装APP的时候,刷新页面也会打开APP
重定向网页代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta charset="UTF-8">
</head>
<body onload="load()">
<div style="width:100%;">
<img src="http://res.innersect/share/share_bg.jpg" class="appLogo">
</div>
<div style="width:100%;">
<img src="http://res.innersect/share/down_btn.png" class="appButton" onclick="onClickDownload()">
</div>
</body>
<script>
function onClickDownload() {
var u = navigator.userAgent;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isIOS) {
window.open(
"http://a.app.qq/o/simple.jsp?pkgname=com.tmmt.innersect"
);
} else {
// var ua = window.navigator.userAgent.toLowerCase();
window.open(
"http://res.innersect/download/general_InnerSect.apk"
);
}
}
function load() {
var query = getRequest();
// let reloadFlag = query['reloadFlag'];
// let url = location.host + location.pathname;
let reloadFlag = localStorage.getItem("reloadFlag");
console.log(reloadFlag);
console.log(!reloadFlag);
if ('true' != reloadFlag) {
window.location.href = decodeURI(query['url']);
setTimeout(function () {
console.log(1);
localStorage.setItem("reloadFlag", true);
// let newUrl = "https://" + url;
// window.location.href = flagUrl;
window.location.reload();
// window.location.replace(newUrl);
}, 50);
} else {
console.log(2);
localStorage.setItem("reloadFlag", false);
}
}
function getRequest() {
var url = location.search; //获取url中含"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
</script>
<style>
body {
height: 100%;
background: black;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size: 100% 100%;
background-size: 100% 100%;
background-attachment: fixed;
text-align: center;
}
.btn_wrapper {
margin-top: 59px;
}
.appLogo {
margin-top: 15px;
width: 100%;
}
.appSlogan {
margin-top: 30px;
max-width: 240px;
}
.appButton {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 10%;
max-width: 80%;
}
.appDownload {
position: absolute;
width: 100%;
height: 100%;
top: 5%;
left: 8%;
background: rgba(0, 0, 0, 0.7);
/* visibility: hidden; */
display: none;
}
.show_download {
/* visibility: visible; */
display: inline;
}
@media (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
.btn_wrapper {
margin-top: 64.9px;
}
.appLogo {
margin-top: 15px;
width: 100%;
}
.appSlogan {
margin-top: 40px;
max-width: 264px;
}
.appButton {
margin-top: -30px;
max-width: 80%;
}
}
</style>
</html>
更多推荐
JavaScript打开APP
发布评论