这不是一篇严格意义上的原创,参考了很多大佬的文章, 下面根据自己的情况做了一下整理。
近两天,接到公司的需求----点击 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 的区别不大,相关配置可以在应用宝官网可以看到
更多推荐
用js实现点击链接跳转APP对应页面
发布评论