H5如何唤起APP

.open_app_title{字体大小：(20/@rem);}.open_btn{margin-top:(20/@rem);填充：（10/@rem）0；边界半径：（8/@rem）；背景：鲑鱼；颜色：#fff；font-size:(16/@rem);}前言写过hybrid的同学肯定遇到过这样的需求。如果用户安装了自己的APP，就会打开APP或者跳转到APP中的某个页面。如果他们没有安装它，他们将指导用户。到相应页面或应用商店下载。这就涉及到H5和Native的交互。为什么H5可以唤醒APP并跳转到相应页面？即使你没有写过，你也一定经历过。最常见的是抖音里的一些广告。如果你点了这个广告，他就会判断你的手机有对应的APP，他就会打开那个APP。如果没有安装，他会帮你跳转到应用商店下载。这对用户更友好一些。有些会在后台直接下载给你，你根本感觉不到。哈哈，你觉得这个技术很牛逼吗？今天我们就来看看它是如何实现的~如果这篇文章对你有帮助，??关注+点赞??给作者打气，文章公众号为首发，关注前端南九获取最新文章在第一次~在call-end体验实现之前，先简单体验一下什么是call-end。从上图我们可以看到，在浏览器中，我们点击打开知乎??，系统会提示我们是否在知乎中打开，当我们点击打开时，知乎就会打开，这是一个简单的调用经验。有了这个技术，我们就可以实现H5唤起APP应用。现阶段的大部分引流方式都得益于这种技术，比如广告、吸引用户、引流等。体验完call-end技术，我们来说说它的实现技术。呼叫端技术也称为深度链接技术。当然，不同平台的实现方式有些不同。一般常见的有几种，分别是：URLScheme(universal)UniversalLink(iOS)AppLink,ChromeIntents(android)URLScheme(universal)这种方法是一种比较常用的技术，各个平台的兼容性也很好。一般由协议名、路径、参数组成。这个一般是Native开发的学生提供的。我们前端同学拿到这个方案后，可以用来打开APP或者APP中的某个页面。URLScheme组成[scheme:][//authority][path][?query][#fragment]常用APPURLSchemeAPP微信支付宝淘宝QQ知乎URLSchemeweixin://alipay://taobao://mqq:/以下方法常用打开/zhihu://直接通过window.location.href跳转window.location.href='zhihu://'通过iframe跳转constiframe=document.createElement('iframe')iframe.style.display='none'iframe.src='zhihu://'document.body.appendChild(iframe)直接用一个标签跳转js桥打开window.miduBridge.call('openAppByRouter',{url:'zhihu://'})判断是否唤醒成功。当用户唤醒APP失败时，我们希望引导用户下载。那么如何才能知道当前APP是否被成功唤醒呢？我们可以监听当前页面的visibilitychange事件。如果页面隐藏，则表示调用成功，否则调用失败，跳转到应用商店。OK，我们来尝试实现一下：首先，我的手机没有安装腾讯微博，所以唤醒不了，让他跳转到应用商店对应的应用下载页面，这里我们使用淘宝下载页面~.open_app_title{字体大小：(20/@rem);}.open_btn{margin-top:(20/@rem);填充：（10/@rem）0；边界半径：（8/@rem）；背景：鲑鱼；颜色：#fff；font-size:(16/@rem);}适用范围URLScheme这种方式兼容性好，无论是Android还是iOS都是目前最常用的方式。从上图我们可以看出它也有一些明显的缺点：无法准确判断调用是否成功，因为这个方法本质上是打开一个链接，并不是普通的http链接，所以如果用户没有安装对应的APP，尝试跳转后浏览器是没有反应的，定时器是用来引导用户跳转到应用商店的，但是这个定时器的时间没有准确的值，不同的手机通话终端时间也不同。我们只能粗略估计它实现的时间。一般设置在3000ms左右比较合适；从上图中我们可以看到，在对应的APP中会有弹窗提示是否打开，这可能会导致用户流失；存在URLScheme劫持的风险，例如，如果某个应用也向系统注册了zhihu://scheme，则流量可能被劫持到该应用；很容易被屏蔽，app很容易屏蔽DropURLScheme发起的重定向，比如微信里经常可以看到一些被屏蔽的现象。UniversalLink(iOS)UniversalLink是iOS9新增的功能，可以通过https协议的链接直接打开APP。与之前的URLScheme相比，它的优势在于使用了https协议，所以如果调用不成功，直接打开网页，不需要判断调用是否成功。并且有了UniversalLink，就不会再出现是否打开的弹窗提示了。对于用户来说，呼叫终端的效率更高。原理在APP中注册您要支持的域名；在你域名的根目录下配置一个apple-app-site-association文件。（前端同学不用关注具体配置，跟iOS同学确认支持的域名即可）打开方法openByUniversal(){//打开知乎提问页window.location.href='https//oia.知乎。com/questions/64966868'//oia.zhihu.com}，适用性与URLScheme相比，通用链接有一个很大的优势，就是在调用终端时没有弹窗提示是否打开，可以提高用户体验和减少部分用户的流失；无需关心用户是否安装了相应的APP。对于没有安装的用户，点击链接会直接打开对应的页面，因为也是http协议的路径，也可以解决URLScheme无法准确判断调用终端失败的问题一定程度上；只能在iOS上使用只能由用户主动触发AppLink,ChromeIntents(Android)AppLink在2015年的GoogleI/O大会上，AndroidM宣布了一个新特性：AppLinks允许用户点击一个普通的web链接时，可以打开指定APP的指定页面。前提是APP已经安装验证。否则，将显示一个弹出框以打开确认选项。仅支持AndroidM及以上系统。AppLinks最大的作用就是避免App从页面唤醒时出现的选择浏览器选项框；前提是必须注册对应的Scheme，可以直接打开关联的App。国内对App链接的支持还不够。部分安卓浏览器不支持跳转到App，而是直接在浏览器上打开对应页面。当系统询问是否打开对应的App时，如果用户选择了“取消”并选择了“记住这个动作”，那么用户以后将无法跳转到该App。ChromeIntentsChromeIntents是Android设备上Chrome浏览器中URI方案的深层链接替代品。如果APP已经安装，通过配置的URISCHEME打开APP。如果没有安装APP，则配置fallbackurl重定向到fallbackurl，如果没有配置则重定向到应用市场。这两个方案在国内的应用比较少。方案对比URLSchemeUniversalLinkAppLink=ios9支持不支持不支持=android6支持不支持不需要HTTPS不需要不需要不需要不需要客户端不需要没有对应APP报错/无响应现象跳转到对应页面跳转到对应页面URISchemeURIScheme兼容性最高，但用户体验差较差：未安装要唤醒的APP时，链接会出错，页面无响应。当同一个scheme有多个注册scheme时，是没有办法区分的。不支持从其他应用中的UIWebView跳转到目标应用，所以ios和android都有自己独特的解决方案。如果UniversalLink已经安装了APP，则直接唤醒APP；如果没有安装APP，会跳转到相应的网页链接。UniversalLink是从服务器查询需要打开哪个APP，所以不会有冲突。UniversalLink支持从其他应用中的UIWebView跳转到目标应用。缺点是会记住用户的选择：当用户点击Universallink后，iOS会检测用户上次选择的是直接打开app还是打开网站。一旦用户点击这个选项，他就会通过safiri打开你的网站。并且在后续操作中，该选择将默认继续，除非用户从您的网页中点击SmartAppBanner上的OPEN按钮将其打开。AppLink的优势类似于万能Link。缺点是国内支持比较差。在某些浏览器或手机ROM中，无法链接到APP，但在浏览器中打开相应的链接。在询问是否使用APP打开对应链接时，如果选择“取消”且勾选了“记住选择”，则下次再次链接APP时将无响应。css和js的加载顺序Vue异步更新机制和$nextTick的原理超全面的Vue面试知识点总结，帮助金三银四【面试必备】前端常用排序算法CSS性能优化常用前端的几种技巧-端安全问题及防范措施为什么各大工厂的前端监控都采用GIF作为嵌入点？前端人员不仅要知道KFC，还应该知道BFC、IFC、GFC、FFC。原文地址点此查看。欢迎大家关注公众号“前端南九”。如果你想加入前端交流群一起学习，请点我南九，我们下期再见！！！