用js实现点击链接跳转APP对应页面
鲜于光赫
这不是一篇严格意义上的原创，参考了很多大佬的文章, 下面根据自己的情况做了一下整理。
近两天，接到公司的需求----点击 H5 的购买按钮，跳转到 APP 对应的页面。啊！ 一脸懵！ 还等啥，赶紧查资料啊。
下面的描述分为两点：
- js 的判断与跳转
- URL Scheme 、Universal link 、App link 的区别
通过 js 判断与跳转的思路是这样的
- 通过
let u = navigator.userAgent判断浏览器的系统类型及版本信息 - 通过
u.indexOf()判断系统为 Android 还是 iOS - 如果是 Android 系统，则
u含有的关键字段为Android或Linux - 如果是 iOS 系统，则
u含有的关键字段为Mac OS X - 设置时常为 3s 的定时器，如果可以打开 APP，则打开。如果不行，则 3s 后跳转到 APP 下载链接
- 我对 iOS 系统做了一个处理，判断系统版本是否小于 9 ，若小于，则通过 URL Scheme 打开APP，否则用 Universal link ( iOS 9.0 以后支持 ) 打开。
上代码：
<!DOCTYPE html>
<html lang="en">
...
<body>
<div id="box">点击打开app</div>
</body>
<script>
document.querySelector('#box').addEventListener('click', function () {
// 判断是那种设备
let u = navigator.userAgent;
console.log(u);
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // Android系统或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // iOS系统
// 如果为Android系统
if (isAndroid) {
window.location.href = " "; // 直接跳转到App的链接，可以是 scheme 也可以是 App link 链接
window.setTimeout(function () {
window.location.href = " "; // 3s后如果不能跳转到 App，则跳转到 App 的下载地址，一般是应用宝的对应的下载地址
}, 3000);
return;
}
// ios设备：原理：判断是否认识这个协议，认识则直接跳转，不认识就在这里下载appios();
if (isiOS) {
let startIndex = u.indexOf('iPhone OS') + 9;
let endIndex = u.indexOf('like Mac OS') - 1;
let num = +u.slice(startIndex, endIndex).split('_')[0]; // 计算版本号的前面数值
if (num < 9) {
window.location.href = " "; // URL scheme 链接
} else {
window.location.href = " "; // universal link 链接
}
window.setTimeout(function () {
window.location.href = " "; // 3s后如果不能跳转到 App，则跳转到 AppStore 的下载地址
}, 3000);
return;
};
})
</script>
</html>
上面代码中有提到 URL scheme、universal link、App link，这三者之间有什么区别呢？
- 这三个链接都能跳转到 App 对应的页面。当然浏览器是不能判断你是否安装了某个软件的，只能是如果能跳转到 App 对应的页面，那就是你安装了这个 App，如果不能跳转，则在一个时间后作出处理，就是上面写的跳转到 App 下载链接页。
- URL scheme 必须唯一，不能与其它 App 重名，如支付宝的 scheme 字段为
alipays，则你的 App 在设置字段的时候就不能用alipays - 如果没有安装 App，URL scheme 不会做任何处理。
- universal link (通用链接)是 Apple 在 iOS 9 后提出的，就是说一个链接可以打开网址同时也可以打开 App
- 相对于 URL scheme，universal link 的这个特点就显得更加多变、灵活
- universal link 必须要跨域，即跳转目标链接的域名与当前视图所在的域名不一样才能跳转
- 像微信和手机百度是禁用 URL scheme 的，而用 universal link 则完美的解决了这个问题
- App link 和 URL scheme 的区别不大，相关配置可以在应用宝官网可以看到
类似资料：