H5如何实现唤起APP

~ 前言

写过hybrid的同学，想必都会遇到这样的需求，如果用户安装了自己的APP，就打开APP或跳转到APP内某个页面，如果没安装则引导用户到对应页面或应用商店下载。这里就涉及到了H5与Native之间的交互，为什么H5能够唤起APP并且跳转到对应的页面？

就算你没写过想必也体验过，最常见的就是抖音里面的一些广告，如果你点击了广告，他判断你手机装了对应APP，那他就会去打开那个APP，如果没安装，他会帮你跳转到应用商店去下载，这个还算人性化一点的，有些直接后台给你去下载，你完全无感知。

哈哈，是不是觉得这种技术很神奇，今天我们就一起来看看它是如何实现的～

如果这篇文章有帮助到你，??关注+点赞??鼓励一下作者，文章公众号首发，关注前端南玖第一时间获取最新文章～

唤端体验

实现之前我们先简单体验一下什么是唤端

从上图中，我们可以看到在浏览器中我们点击打开知乎，系统会提示我们是否在知乎中打开，当我们点击打开时，知乎就被打开了，这就是一个简单的唤端体验。

有了这项技术我们就可以实现H5唤起APP应用了，现阶段的引流方式大都得益于这种技术，比如广告投放、用户拉新、引流等。

唤端技术

体验过后，我们就来聊一聊它的实现技术是怎样的，唤端技术我们也称之为deeplink技术。当然，不同平台的实现方式有些不同，一般常见的有这几种，分别是：

URLScheme（通用）

UniversalLink（iOS）

AppLink、ChromeIntents（android）

URLScheme（通用）

这种方式是一种比较通用的技术，各平台的兼容性也很好，它一般由协议名、路径、参数组成。这个一般是由Native开发的同学提供，我们前端同学再拿到这个scheme之后，就可以用来打开APP或APP内的某个页面了。

URLScheme组成

[scheme:][//authority][path][?query][#fragment]

常用APP的URLSchemeAPP微信支付宝淘宝QQ知乎URLSchemeweixin://alipay://taobao://mqq://zhihu://打开方式

常用的有以下这几种方式

直接通过window.location.href跳转

window.location.href?=?'zhihu://'

通过iframe跳转

const?iframe?=?document.createElement('iframe')iframe.style.display?=?'none'iframe.src?=?'zhihu://'document.body.appendChild(iframe)

直接使用a标签进行跳转

通过jsbridge来打开

window.miduBridge.call('openAppByRouter',?{url:?'zhihu://'})

判断是否成功唤起

当用户唤起APP失败时，我们希望可以引导用户去进行下载。那么我们怎么才能知道当前APP是否成功唤起呢？

我们可以监听当前页面的visibilitychange事件，如果页面隐藏，则表示唤端成功，否则唤端失败，跳转到应用商店。

OK，我们尝试来实现一下：

首先我手机上并没有安装腾讯微博，所以也就无法唤起，我们让他跳到应用商店对应的应用下载页，这里就用淘宝的下载页来代替一下～

<template>??<div?class="open_app">??????<div?class="open_app_title">前端南玖唤端测试Demo</div>??????<div?class="open_btn"?@click="open">打开腾讯微博</div>??</div></template><script>let?timerexport?default?{????name:?'openApp',????methods:?{????????watchVisibility()?{????????????window.addEventListener('visibilitychange',?()?=>?{????????????????//?监听页面visibility????????????????if(document.hidden)?{????????????????????//?如果页面隐藏了，则表示唤起成功，这时候需要清除下载定时器????????????????????clearTimeout(timer)????????????????}????????????})????????},????????open()?{????????????timer?=?setTimeout(()?=>?{??????????????//?没找到腾讯微博的下载页，这里暂时以淘宝下载页代替????????????????window.location.href?=?'http://apps.apple.com/cn/app/id387682726'????????????},?3000)????????????window.location.href?=?'TencentWeibo://'????????}????}}</script><style?lang="less">.open_app_title?{????font-size:?(20/@rem);}.open_btn{????margin-top:(20/@rem);????padding:(10/@rem)?0;????border-radius:?(8/@rem);????background:?salmon;????color:?#fff;????font-size:?(16/@rem);}</style>

适用性

URLScheme这种方式兼容性好，无论安卓或者iOS都能支持，是目前最常用的方式。从上图我们能够看出它也有一些比较明显的缺点：

无法准确判断是否唤起成功，因为本质上这种方式就是打开一个链接，并且还不是普通的http链接，所以如果用户没有安装对应的APP，那么尝试跳转后在浏览器中会没有任何反应，通过定时器来引导用户跳到应用商店，但这个定时器的时间又没有准确值，不同手机的唤端时间也不同，我们只能大概的估计一下它的时间来实现，一般设为3000ms左右比较合适；

从上图中我们可以看到会有一个弹窗提示你是否在对应APP中打开，这就可能会导致用户流失；

有URLScheme劫持风险，比如有一个APP也向系统注册了zhihu://这个scheme，唤起流量可能就会被劫持到这个app里；

容易被屏蔽，app很轻松就可以拦截掉通过URLScheme发起的跳转，比如微信内经常能看到一些被屏蔽的现象。

UniversalLink（iOS）

UniversalLink是在iOS9中新增的功能，使用它可以直接通过https协议的链接来打开APP。它相比前一种URLScheme的优点在于它是使用https协议，所以如果没有唤端成功，那么就会直接打开这个网页，不再需要判断是否唤起成功了。并且使用UniversalLink，不会再弹出是否打开的弹出，对用户来说，唤端的效率更高了。

原理

在APP中注册自己要支持的域名；

在自己域名的根目录下配置一个apple-app-site-association文件即可。（具体的配置前端同学不用关注，只需与iOS同学确认好支持的域名即可）

打开方式openByUniversal?()?{??//?打开知乎问题页??window.location.href?=?'https://oia.zhihu.com/questions/64966868'??//?oia.zhihu.com},

适用性

相对URLScheme，universallinks有一个较大优点是它唤端时没有弹窗提示是否打开，提升用户体验，可以减少一部分用户流失；

无需关心用户是否安装对应的APP，对于没有安装的用户，点击链接就会直接打开对应的页面，因为它也是http协议的路径，这样也能一定程度解决URLScheme无法准确判断唤端失败的问题；

只能够在iOS上使用

只能由用户主动触发

AppLink、ChromeIntents（Android）AppLink

在2015年的GoogleI/O大会上，AndroidM宣布了一个新特性：AppLinks让用户在点击一个普通web链接的时候可以打开指定APP的指定页面，前提是这个APP已经安装并且经过了验证，否则会显示一个打开确认选项的弹出框，只支持AndroidM以上系统。

AppLinks的最大的作用，就是可以避免从页面唤醒App时出现的选择浏览器选项框;

前提是必须注册相应的Scheme，就可以实现直接打开关联的App。

Applinks在国内的支持还不够，部分安卓浏览器并不支持跳转至App，而是直接在浏览器上打开对应页面。

系统询问是否打开对应App时，假如用户选择“取消”并且选中了“记住此操作”，那么用户以后就无法再跳转App。

ChromeIntents

ChromeIntent是Android设备上Chrome浏览器中URI方案的深层链接替代品。

如果APP已安装，则通过配置的URISCHEME打开APP。

如果APP未安装，配置了fallbackurl的跳转fallbackurl，没有配置的则跳转应用市场。

这两种方案在国内的应用都比较少。

方案对比URLSchemeUniversalLinkAppLink<ios9支持不支持不支持>=ios9支持支持不支持<android6支持不支持不支持>=android6支持不支持支持是否需要HTTPS不需要需要需要是否需要客户端需要需要需要无对应APP时的现象报错/无反应跳到对应的页面跳到对应的页面

URIScheme

URIScheme的兼容性是最高，但使用体验相对较差:

当要被唤起的APP没有安装时，这个链接就会出错，页面无反应。

当注册有多个scheme相同的时候，没有办法区分。

不支持从其他app中的UIWebView中跳转到目标APP，所以ios和android都出现了自己的独有解决方案。

UniversalLink

已经安装APP，直接唤起APP；APP没有安装，就会跳去对应的weblink。

universalLink是从服务器上查询是哪个APP需要被打开，所以不会存在冲突问题

universalLink支持从其他app中的UIWebView中跳转到目标app

缺点在于会记住用户的选择：在用户点击了Universallink之后，iOS会去检测用户最近一次是选择了直接打开app还是打开网站。一旦用户点击了这个选项，他就会通过safiri打开你的网站。并且在之后的操作中，默认一直延续这个选择，除非用户从你的webpage上通过点击SmartAppBanner上的OPEN按钮来打开。

Applink

优点与universalLink类似

缺点在于国内的支持相对较差，在有的浏览器或者手机ROM中并不能链接至APP，而是在浏览器中打开了对应的链接。

在询问是否用APP打开对应的链接时，如果选择了“取消”并且“记住选择”被勾上，那么下次你再次想链接至APP时就不会有任何反应

推荐阅读

性能优化之html、css、js三者的加载顺序

Vue异步更新机制以及$nextTick原理

超全面总结Vue面试知识点，助力金三银四

【面试必备】前端常见的排序算法

CSS性能优化的几个技巧

前端常见的安全问题及防范措施

为什么大厂前端监控都在用GIF做埋点？

前端人员不要只知道KFC，你应该了解BFC、IFC、GFC和FFC

原文首发地址点这里，欢迎大家关注公众号「前端南玖」，如果你想进前端交流群一起学习，请点这里

我是南玖，我们下期见！！！

原文：https://juejin.cn/post/7097784616961966094

---

庆阳市13923576655： H5的页面中怎样调用APP功能 - ？
泷瑶孚来： H5的页面中调用APP功能代码如下:1234 const iframe = document.createElement('iframe'); iframe.src = 'URL scheme'; // URL scheme的方式跳转 iframe.style.display = 'none'; document.body.appendChild(iframe); 这时候如果在一切环境支持的情况下,就会唤醒APP了.1

庆阳市13923576655： h5怎么打开android app - ？
泷瑶孚来： 如果你是自己开发的app嵌套的webview打开的h5,h5和app交互一下,通过自己的app打开其他的app很简单,但是你要是从UC浏览器访问个自己的h5,再点击某个按钮打开手机上的app是做不到的.

庆阳市13923576655： 如何实现h5通过js调用原生app的功能 - ？
泷瑶孚来： 我写的一个Android的一个例子://后台 webview.addJavascriptInterface(this, ＂myscript＂);//Android的一个WebView注册脚本接口 @JavascriptInterface public void Login(String username, String msid) {//可以写调用扫描、定位......Intent ...

庆阳市13923576655： 如何实现在H5里调起高德地图APP - ？
泷瑶孚来： 亲,开发问题可以到这里创建工单哦:http://lbs.amap.com/dev/ticket#/faq

庆阳市13923576655： H5网页使用ApiCloud封装,返回按钮问题 - ？
泷瑶孚来： 1.使用apicloud开发工具,自己写一个框架,制作一个“原生标题栏”,把返回按钮写进原生标题栏里面;这块如果你得研究一下apicloud开发工具的写法;2.如果你不会开发,或者觉得自己写比较麻烦,可以使用一门APP打包,通过一门APP打包平台封装APP之后,在配置功能里面有现成的“原生标题栏”返回按钮的,可以直接使用,无需二次开发!并且开放了JS-SDK接口和URL级的快速调用方法!可以在任意页面唤起或者隐藏“原生标题栏”,即任意页面可以快速实现返回!比如:你从首页点击一个页面,跳转了其他网站,这是可以唤起原生标题栏,要返回直接点击“原生标题栏”上面的缓存即可!

庆阳市13923576655： APP内嵌H5页面传值方法 h5页面有个点击分享 要唤起app 的分享 要给他一个href,img,name 三个值 - ？
泷瑶孚来： 可以使用js进行交互,直接搜索Android WebView JS交互就可以了.本地方法带参数就行.

庆阳市13923576655： 怎么浏览h5做的手机app界面 - ？
泷瑶孚来： 比如用hybrid获取地理位置和短信信息,这当然需要框架封装好,比如利用框架的bridge.js(下一篇文章会详细讲这个内容) 场景2最简单的比如用H5调用App然后再判断是否有安装此应用,如果有则直接打开应用,则安装如果没有则去itunes或者google市场安装.比如淘宝上的立即打开功能首先场景2的功能,我们需要了解他的几个流程1.判断程序系统环境2.判断有应用开启应用3.判断无应用则跳到相应的链接区执行

庆阳市13923576655： h5唤醒app为什么在浏览器中打开了app - ？
泷瑶孚来： 这是因为启动了两个task,你将入口的Activity的launchMode 改为 singleTask 试一下

庆阳市13923576655： H5写的app在安卓终端机上如何自启动 - ？
泷瑶孚来： 360卫士有开机自启动管理,不过正常的自启动没什么,系统为加快下次启动速度,留有一部分进程,没必要关闭,

庆阳市13923576655： 跳转至指定app/h5使用什么意思 - ？
泷瑶孚来： 跳转至指定app/h5是指页面上触发一个链接,就会直接跳转到app的一个页面上,然后用户就可以在app上操作,或者直接内嵌一个html5页面,这些都可以互相跳转的. 例如镜头,点击镜头按钮,可以出现镜头的各种表现形式,点击了哪种形式,图片会自动出现该效果演示; 文字编辑; 单击文字框,就可以编辑文字内容了,长按文字框可以对文字的字体,颜色进行设置; 调整文字大小,点击文字框,会出现x和箭头标志,点击右下角拖动,可以将文字变大变小;按住箭头还可以上下左右360度旋转;