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