用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 的区别不大，相关配置可以在应用宝官网可以看到

用js实现点击链接跳转APP对应页面相关推荐

[Flutter]微信分享并从分享链接跳回APP指定页面
最近在使用flutter开发APP,flutter实现了一套代码同时生成Android和iOS两个平台的APP,可以实现零基础快速上手APP开发,缩短开发周期.但flutter仍处于较快增长期,版本迭 ...
点击链接跳转到新页面并显示对应的tab标签页切换
原理:从页面A跳转到页面B,则在A页面中跳转页面时传值,然后在B页面中写js获取该值并做对应的操作附:tab标签页的制作链接:https://mp.csdn.net/postedit/1010531 ...
ios开发跳转safari_阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了).拿来调试DeveMobile 与EaseMobile 主题时候发现了不少问题,现在在一 ...
链接跳转:在本页面跳转
链接跳转:在本页面跳转为什么要使用`href="javascript:void(0);"`? `href="javascript:void(0);"`与`hr ...
链接跳转（本页面跳转）
href="javascript:void(0);"这个的含义是,让超链接去执行一个js函数,而不是去跳转到一个地址, 而void(0)表示一个空的方法,也就是不执行js函数. 为 ...
HTML点击图片跳转到新页面怎么实现？（示例）
我们在设计网页开发过程中,"跳转链接"这个需求是最普遍不过了.相信那些对HTML有一定了解的朋友,想要实现点击某个元素然后跳转到新链接新页面的功能,是非常简单的事情.比如点击按钮实 ...
Android中点击链接调起App
最近工作中的一个需求是点击短信链接则调起App然后完成相关功能逻辑,查阅相关文章完成需求,以此文章来记录Android中点击链接吊起App的实现. 原理通过使用自定义Scheme方式,修改Schem ...
js判断网页在手机端跳转到移动页面，script怎么写跳转移动端
js判断网页在手机端跳转到移动页面,script怎么写跳转移动端 js案例: <script>if(/Android|webOS|iPhone|Windows Phone|iPod|Bla ...
H5 引用vue 打开app（如何该手机内有某个app则直接打开app，如果没有则跳转app下载页面）
H5 引用vue 打开app(如何该手机内有某个app则直接打开app,如果没有则跳转app下载页面) **ps: 一定一定一定一定先向 ios要 ( ios下载地址和 ios对应的app协议 ), ...

用js实现点击链接跳转APP对应页面

用js实现点击链接跳转APP对应页面相关推荐

最新文章

热门文章