实现效果
如下图所示,顶部会有一个广告图,点击这个广告图,如果手机上已经安装了App,则直接打开,如果没有安装,则开始下载,如果在微信公众号中,则跳转应用宝第三方平台跳转。
html
<span @click="openAppClick" class="see-btn">打开APP</span>
js
openclient(){
let ua = navigator.userAgent.toLowerCase();
//config 配置文件 JS 传递 scheme 客户端进行匹配
//scheme_IOS IOS端必要参数
//scheme_Adr 安卓端必要参数
//download_url_Adr download_url_IOS 下载地址 timeout 过期时间
let config = {
//scheme:必须
scheme_IOS: 'scheme://',
scheme_Adr: 'scheme://xxx',
download_url_Adr: 'https://a.app.qq.com/o/simple.jsp?xxxx',//微信应用宝下载的地址(安卓)
download_url_IOS: 'https://itunes.apple.com/cn/app/xxxx',//微信应用宝下载的地址(ios)
timeout: 1000
};
let startTime = Date.now();
// 用户点击时,在动态创建一个iframe,并且让这个iframe去加载config中的Schema
let ifr = document.createElement('iframe');
ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;
ifr.style.display = 'none';
document.body.appendChild(ifr);
let timer = setTimeout(()=>{
let endTime = Date.now();
//指定的时间内没有跳转成功 当前页跳转到apk的下载地址
if ((endTime - startTime) < (config.timeout + 200)) {
//判断是安卓 还是IOS
if (/iphone|ipad|ipod/.test(ua)) {
window.location.href = config.download_url_IOS;
} else if (/android/.test(ua)) {
window.location.href = config.download_url_Adr;
}
} else {
window.close();
this.applyClick();
}
}, config.timeout);
window.onblur = function() {
clearTimeout(timer);
}
},
applyClick(){
if (/(iPhone |ipad | ipod | i0s)/i.test(navigator . userAgent)) {
window.location.href = "https://itunes.apple.com/cn/app/xxx";//微信应用宝下载的地址(ios)
}else if(/(Android)/i.test(navigator .userAgent)){
window.location.href ='https://a.app.qq.com/o/simple.jsp?xxxx',//微信应用宝下载的地址(安卓);
}else{
window.location.href ='https://itunes.apple.com/cn/app/xxxx',
}
},
openAppClick() {
this.openclient();
},