liu__software
liu__software

H5唤起APP进行分享的尝试

H5唤起APP进行分享

最近很久没有写blog和note，倒是过家家的开发日志简单草草写了一点。这次记录下这个学习过程

由来

我们的 "通达有你"，web h5页面的分享功能体验太差了，我一直想改变提高体验度。

通常点分享然后跳转到另一个页面，比如QQ、空间、微博，还有微信。微信通常要扫二维码分享，（我们只有一个手机啊，还要再屏幕上扫二维码，通常要是我是尝试分享者，微信这么麻烦的分享我肯定是不会继续分享了）

所以刚有空我就想试试更好的方法

疑问？

然后我平时留意几大互联网的巨头的h5页面，他也是可以进行APP唤起的，这到底是怎么做到的？

不过这种情况分为两种：

  1. 唤起自己产品的APP

  2. 唤起第三方APP

    H5唤起APP进行分享的尝试_第1张图片

    image

H5唤起APP进行分享的尝试_第2张图片

image

而我的目的是第二种，我们是要唤起第三方APP进行分享

分析实现方式

经过我 面向搜索引擎 的一顿操作，了解到一些资料和方式，其中要实现在h5唤起APP的主要采用

  1. URL Scheme | Intent | Universal Link（也称：深度链接）
  2. 通过浏览器的内置native分享接口

URLScheme

URL Scheme 是什么

我们来看一下 URL 的组成：

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

我们拿 https://www.baidu.com 来举例，scheme 自然就是 https 了。

就像给服务器资源分配一个 URL，以便我们去访问它一样，我们同样也可以给手机APP分配一个特殊格式的 URL，用来访问这个APP或者这个APP中的某个功能(来实现通信)。APP得有一个标识，好让我们可以定位到它，它就是 URL 的 Scheme 部分。

常用APP的 URL Scheme

APP 微信 支付宝 淘宝 微博 QQ 知乎 短信
URL Scheme weixin:// alipay:// taobao:// sinaweibo:// mqq:// zhihu:// sms://

URL Scheme 语法

上面表格中都是最简单的用于打开 APP 的 URL Scheme，下面才是我们常用的 URL Scheme 格式：

     行为(应用的某个功能)    
            |
scheme://[path][?query]
   |               |
应用标识       功能需要的参数

搜集到的常用Scheme

应用名称 URL Scheme
微博 weibo://
QQ mqq://
QQ群组 mqqapi://card/show_pslcard?src_type=internal&version=1&card_type=group&uin={QQ群号}
QQ联系人 mqqapi://card/show_pslcard?src_type=internal&version=1&uin={QQ号码}
支付宝 alipay://
微信 weixin://
微信 wechat://
微信-扫一扫 weixin://dl/scan
微信-反馈 weixin://dl/feedback
微信-朋友圈 weixin://dl/moments
微信-设置 weixin://dl/settings
微信-消息通知设置 weixin://dl/notifications
微信-聊天设置 weixin://dl/chat
微信-通用设置 weixin://dl/general
微信-公众号 weixin://dl/officialaccounts
微信-游戏 weixin://dl/games
微信-帮助 weixin://dl/help
微信-反馈 weixin://dl/feedback
微信-个人信息 weixin://dl/profile
微信-功能插件 weixin://dl/features
虾米音乐 xiami://
chrome googlechrome://
微博国际版 weibointernational://
摩拜单车 mobike://
ofo ofoapp://
有道云笔记 youdaonote://
印象笔记 evernote://
今日头条 snssdk141://
网易新闻 newsapp://
网易云音乐 orpheuswidget://
QQ音乐 qqmusic://
QQ音乐最近播放 qqmusic://today?mid=31&k1=2&k4=0
美团外卖 meituanwaimai://
美团 imeituan://
Gmail googlegmail://
网易邮箱 neteasemail://
QQ邮箱 qqmail://
腾讯视频 tenvideo://
爱奇艺 iqiyi://
12306 cn.12306://
有道词典 yddict://
钉钉 dingtalk://

我进入深坑

看到上面这些资料的我，思考了很久如何去找具体的path和query部分。如果能找到这两块的详细参数，那么我们就可以在APP间相互调用和传参了，就和普通URL一样了

但是，我寻找了好久，或许是我不懂这里面的方式吧，或许是我也不太懂Android方面的知识，就是没人在网上提及到具体的path和query，

后来想想，也是挺正常的，大多网站和企业只是想唤起自己的APP，那如何使用这些URL Scheme呢

大坑

先预告一下还有比较大的坑就是，scheme的触发方式会被浏览器拦截，如果是QQ和微信自带的内置浏览器，使用Scheme是无效的，除非是自家人或者在它的白名单内（比如几大巨头），这就导致了如果你在QQ和微信内点击网页内的分享，不好意思，啥用没有。。。不过可以做个遮罩层用他们内置浏览器的右上角分享功能。

  • 微信、微博、手百、QQ浏览器等。

    这些应用能阻止唤端是因为它们直接屏蔽掉了 URL Scheme 。接下来可能就有看官疑惑了，微信中是可以打开大众点评的呀，微博里面可以打开优酷呀，那是如何实现的呢？

    它们都各自维护着一个白名单，如果你的域名在白名单内，那这个域名下所有的页面发起的 URL Scheme 就都会被允许。就像微信，如果你是腾讯的“家属”，你就可以加入白名单了，微信的白名单一般只包含着“家属”，除此外很难申请到白名单资质。但是微博之类的都是可以联系他们的渠道童鞋进行申请的，只是条件各不相同，比如微博的就是在你的 APP 中添加打开微博的入口，三个月内唤起超过 100w 次，就可以加入白名单了。

  • 腾讯应用宝直接打开 APP 的某个功能

    刚刚我们说到，如果你不是微信的家属，那你是很难进入白名单的，所以在安卓中我们一般都是直接打开腾讯应用宝，ios 中 直接打开 App Store。点击腾讯应用宝中的“打开”按钮，可以直接唤起我们的 APP，但是无法打开 APP 中的某个功能（就是无法打开指定页面）。

    腾讯应用宝对外开放了一个叫做 APP Link 的申请，只要你申请了 APP Link，就可以通过在打开应用宝的时候在应用宝地址后面添加上 &android_schema={your_scheme} ，来打开指定的页面了。

感觉腾讯应用宝是个做文章的很地方，没准之后会尝试下

浏览器的内置分享原生分享

浏览器自带有分享到微信和QQ的功能，但不是每个都提供接口来供网页调用。即使有提供，浏览器暴露的api不一样，各家有各家的规则和方式。

但好在网上找到了两个前辈造的轮子NativeShare和uc-qq-share-to-wechat ，也都是调用各个浏览器的原生分享功能，但前者里面我还看到了部分Scheme的方式。

主要的浏览器有：

  • QQ浏览器
  • UC浏览器
  • 微信自带浏览器
  • QQ自带浏览器
  • QQ空间APP
  • 百度浏览器
  • 百度APP自带浏览器
  • ios 搜狗浏览器
  • Safari浏览器
  • 其他

触发方式

现在来说说触发方式，大致上有三种：

iframe方案