需求:h5点击按钮跳转app,有下载app的直接打开,无下载就跳转下载的链接(安卓跟ios的下载链接不一样)
1、用超链接的方式打开app
<a href="xxxx"></a>
弊端:这种方式只能控制有下载app的,并不能控制没下载app就跳转下载链接
2、使用scheme协议打开
使用 URL Scheme 格式为 [scheme] : //[host]/[path]?[query]。每个app都有一个独立的scheme名称,例如淘宝的是taobao://
调用方式:
window.location = "rfzubs://";
整体的写法是:
let ua = navigator.userAgent.toLowerCase();
let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
let isOpera = userAgent.indexOf("Opera") > -1;
let isFirefox = userAgent.indexOf("Firefox") > -1;
let isChrome = userAgent.indexOf("Chrome") > -1;
let isSafari = userAgent.indexOf("Safari") > -1;
let isIE = !!window.ActiveXObject || "ActiveXObject" in window;
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
// 苹果机
var loadDateTime = new Date();
window.location = "rfzubs://"; //schema链接或者universal link
window.setTimeout(function() {
//如果没有安装app,便会执行setTimeout跳转下载页
var timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime < 5000) {
window.location =
"https://apps.applexxx"; //ios下载地址
} else {
window.close();
}
}, 500);
} else if (navigator.userAgent.match(/android/i)) {
try {
window.location = "rfzubs://"; //schema链接或者universal link
window.setTimeout(function() {
window.location =
"https://a.app.qq.xxxx"; //android下载地址
}, 1000);
} catch (e) {}
}
这种方式的弊端是
安卓机在微信浏览器上使用应用宝的话会出现红色错误提示
然后ios在默认浏览器可能会出现提示链接无效
解决办法是
在微信环境上,安卓手机提示用默认浏览器打开
在ios的默认浏览器使用直接打开应用市场的链接
window.location ="https://apps.applexxx"; //ios下载地址
最后
let ua = navigator.userAgent.toLowerCase();
let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
let isOpera = userAgent.indexOf("Opera") > -1;
let isFirefox = userAgent.indexOf("Firefox") > -1;
let isChrome = userAgent.indexOf("Chrome") > -1;
let isSafari = userAgent.indexOf("Safari") > -1;
let isIE = !!window.ActiveXObject || "ActiveXObject" in window;
if (ua.match(/MicroMessenger/i) == "micromessenger") {
// 微信环境
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
// 苹果机
var loadDateTime = new Date();
window.location = "rfzubs://"; //schema链接或者universal link
window.setTimeout(function() {
//如果没有安装app,便会执行setTimeout跳转下载页
var timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime < 5000) {
window.location =
"https://apps.applexxx"; //ios下载地址
} else {
window.close();
}
}, 500);
} else if (navigator.userAgent.match(/android/i)) {
that.showShare = true;
}
} else {
if (isOpera || isFirefox || isChrome || isSafari || isIE) {
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
window.location =
"https://apps.applexxx"; //ios下载地址
} else if (navigator.userAgent.match(/android/i)) {
try {
window.location = "rfzubs://"; //schema链接或者universal link
window.setTimeout(function() {
window.location =
"https://a.app.qxxxxx"; //android下载地址
}, 1000);
} catch (e) {}
}
} else {
that.showShare = true;
}
}