Open zhangzheng-zz opened 3 years ago
App
H5
webview
参考: https://suanmei.github.io/2018/08/23/h5_call_app/ http://szuwest.github.io/tan-tao-cong-h5ye-mian-la-qi-appde-ji-zhu-fang-an-he-wen-ti.html
需求背景:
我们会经常遇到这样的需求,在 App 的 H5 页面中通过某种方式唤端第三方 App,如果用户手机没有安装相应的 App,通常会跳转至 App 下载页面。下面分析 H5 拉起第三方 App 的方案。
两种技术方案:
首先必须明确,技术方案不是绝对完美的。这两个技术适用不同的场景,也有不同的局限性。
一种通过HTTP链接(iOS叫 Universal Link,安卓叫APP Links技术)拉起技术;
iOS
Universal Link
APP Links
一种是通过自定义scheme拉起技术(也有叫深度链接deeplink的)。
scheme
deeplink
HTTP链接方案:
由于该方案安卓手机需要通过谷歌服务器验证(国内访问不了谷歌),所以这里不做介绍。 参考:http://szuwest.github.io/tan-tao-cong-h5ye-mian-la-qi-appde-ji-zhu-fang-an-he-wen-ti.html
自定义scheme拉起技术:
先看一下 URL 格式
[scheme:][//host][path][?query][#fragment]
host是可选的,path是必须的。一般都是通过path来定义指定打开APP特定的页面,同时通过query来携带参数。HTTP链接其实就是一种特殊的scheme
host
path
APP
query
HTTP
这种方式的做法是每个APP都自定义一个唯一的scheme,通过这个scheme来拉起APP。由于每个APP都会定义自己独有的scheme,所以一般还通过scheme来判断某个应用是否已安装在手机上。
H5中的做法可以是 a 标签跳转,window.location.href, iframe ,后续介绍。 APP 端则需要相应的配置。
自定义scheme拉起技术的问题:
如果是自己开发的不同App相互跳转问题好解决,而如果像微信、微博等自带浏览器的超级App,会对deeplink技术做出限制,这种情况通常的做法是引导用户通过第三方浏览器跳转至第三方App,各式各样的浏览器也有着不同的限制,例如需要用户手动同意打开第三方App的操作等,所以也不是绝对完美的方案。
浏览器限制问题举例:
Intent 安卓的原生谷歌浏览器自从 chrome25 版本开始对于唤端功能做了一些变化,URL Scheme 无法再启动Android应用。 例如,通过 iframe 指向 weixin://,即使用户安装了微信也无法打开。所以,APP需要实现谷歌官方提供的 intent: 语法,或者实现让用户通过自定义手势来打开APP,当然这就是题外话了。
三种唤端媒介:
无论是 URL Scheme 还是 Intent ,他们都算是 URL ,只是 URL Scheme 和 Intent 算是特殊的 URL。所以我们可以拿使用 URL 的方法来使用它们。
iframe
<iframe src="sinaweibo://qrcode">
在只有 URL Scheme 的日子里,iframe 是使用最多的了。因为在未安装 app 的情况下,不会去跳转错误页面。但是 iframe 在各个系统以及各个应用中的兼容问题还是挺多的,不能全部使用 URL Scheme。
a 标签
<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;end"">扫一扫</a>
window.location
window.location.href = 'sinaweibo://qrcode';
以上三个媒介在不同设备都有可能唤端失败。
开箱即用的callapp-lib
callapp-lib 是一个 H5唤起 APP的解决方案,能够满足大部分唤起客户端的场景,也预留了扩展口,帮你实现一些定制化的功能。 地址:https://github.com/suanmei/callapp-lib
callapp-lib
在公司中目前阶段接触的是
App
中的H5
页面开发,H5
页面开发之后通过webview
嵌入到App
中,由于H5
的活动主要依赖于App
,所以经常会有H5
和App
的交互,此篇主要记录App
与H5
交互相关内容。H5 拉起第三方 App 的方案
参考: https://suanmei.github.io/2018/08/23/h5_call_app/ http://szuwest.github.io/tan-tao-cong-h5ye-mian-la-qi-appde-ji-zhu-fang-an-he-wen-ti.html
需求背景:
我们会经常遇到这样的需求,在 App 的 H5 页面中通过某种方式唤端第三方 App,如果用户手机没有安装相应的 App,通常会跳转至 App 下载页面。下面分析 H5 拉起第三方 App 的方案。
两种技术方案:
首先必须明确,技术方案不是绝对完美的。这两个技术适用不同的场景,也有不同的局限性。
一种通过HTTP链接(
iOS
叫Universal Link
,安卓叫APP Links
技术)拉起技术;一种是通过自定义
scheme
拉起技术(也有叫深度链接deeplink
的)。HTTP链接方案:
由于该方案安卓手机需要通过谷歌服务器验证(国内访问不了谷歌),所以这里不做介绍。 参考:http://szuwest.github.io/tan-tao-cong-h5ye-mian-la-qi-appde-ji-zhu-fang-an-he-wen-ti.html
自定义
scheme
拉起技术:先看一下 URL 格式
host
是可选的,path
是必须的。一般都是通过path
来定义指定打开APP
特定的页面,同时通过query
来携带参数。HTTP
链接其实就是一种特殊的scheme
这种方式的做法是每个
APP
都自定义一个唯一的scheme
,通过这个scheme
来拉起APP
。由于每个APP
都会定义自己独有的scheme
,所以一般还通过scheme
来判断某个应用是否已安装在手机上。H5中的做法可以是 a 标签跳转,window.location.href, iframe ,后续介绍。 APP 端则需要相应的配置。
自定义
scheme
拉起技术的问题:如果是自己开发的不同
App
相互跳转问题好解决,而如果像微信、微博等自带浏览器的超级App
,会对deeplink
技术做出限制,这种情况通常的做法是引导用户通过第三方浏览器跳转至第三方App
,各式各样的浏览器也有着不同的限制,例如需要用户手动同意打开第三方App
的操作等,所以也不是绝对完美的方案。浏览器限制问题举例:
Intent 安卓的原生谷歌浏览器自从 chrome25 版本开始对于唤端功能做了一些变化,URL Scheme 无法再启动Android应用。 例如,通过 iframe 指向 weixin://,即使用户安装了微信也无法打开。所以,APP需要实现谷歌官方提供的 intent: 语法,或者实现让用户通过自定义手势来打开APP,当然这就是题外话了。
三种唤端媒介:
无论是 URL Scheme 还是 Intent ,他们都算是 URL ,只是 URL Scheme 和 Intent 算是特殊的 URL。所以我们可以拿使用 URL 的方法来使用它们。
iframe
在只有 URL Scheme 的日子里,iframe 是使用最多的了。因为在未安装 app 的情况下,不会去跳转错误页面。但是 iframe 在各个系统以及各个应用中的兼容问题还是挺多的,不能全部使用 URL Scheme。
a 标签
window.location
以上三个媒介在不同设备都有可能唤端失败。
开箱即用的callapp-lib
callapp-lib
是一个H5
唤起APP
的解决方案,能够满足大部分唤起客户端的场景,也预留了扩展口,帮你实现一些定制化的功能。 地址:https://github.com/suanmei/callapp-lib