H5唤起APP进行分享的尝试

作者: 二歪求知iSk2y | 来源:发表于2019-01-04 16:22 被阅读0次

H5唤起APP进行分享

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

由来

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

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

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

疑问？

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

不过这种情况分为两种：

唤起自己产品的APP
唤起第三方APP
image

image

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

分析实现方式

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

URL Scheme | Intent | Universal Link（也称：深度链接）
通过浏览器的内置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方案

<iframe src="sinaweibo://qrcode">

在未安装 app 的情况下，不会去跳转错误页面。但是 iframe 在各个系统以及各个应用中的兼容问题还是挺多的，我自己并没有使用这种。

var last = Date.now(),
    doc = window.document,
    ifr = doc.createElement('iframe');

//创建一个隐藏的iframe
ifr.src = nativeUrl;
ifr.style.cssText = 'display:none;border:0;width:0;height:0;';
doc.body.appendChild(ifr);

setTimeout(function() {
    doc.body.removeChild(ifr);
    //setTimeout回小于2000一般为唤起失败 
    if (Date.now() - last < 2000) {
        if (typeof onFail == 'function') {
            onFail();
        } else {
            //弹窗提示或下载处理等
        }
    } else {
        if (typeof onSuccess == 'function') {
            onSuccess();
        }
    }
}, 1000);

iframe方案的唤起原理是: 程序切换到后台时，计时器会被推迟(计时器不准的又一种情况)。如果app被唤醒那么网页必然就进入了后台，如果用户从app切回来，那么时间一般会超过2s;若app没有被唤起，那么网页不会进入后台，setTimeout基本准时触发，那么时间不会超过2s。

a标签唤起

<a href="mqqapi://card/show_pslcard?src_type=internal&version=1&uin=123456">QQ临时交流</a>

上面这个a标签你可以自己尝试一下，是可以直接唤起的，a标签如果目标scheme错误，即应用不存在也不会报错。

location.href跳转

window.location.href = 'sinaweibo://qrcode';

我自己大多使用click的方式配合location来进行跳转，自己没有在各大平台和各个浏览器版本上做太多实验，在一个博文中看到

URL Scheme 在 ios 9+ 上诸如 safari、UC、QQ浏览器中， iframe 均无法成功唤起 APP，只能通过 window.location 才能成功唤端。

某篇博文中对三种唤起方式进行了测试

。X表示唤起失败，√表示唤起成功
。红色标记表示进入页面直接唤起，绿色表示人工事件操作后唤起
。ios测试机:iphone 6p;android测试机:小米1s

iframe唤起app测试结果

图片显示

window.location.href唤起app测试结果

图片显示

a标签唤起app测试结果

图片显示

iframe和window.location.href唤起对比

图片显示

iframe、window.location.href和a标签唤起三者对比

图片显示

对比iframe唤起和location.href，我们可以发现：

对于ios来说，location.href跳转更合适，因为这种方式可以在Safari中成功唤起app。Safari作为iphone默认浏览器其重要性就不用多说了，而对于微信和qq客户端，ios中这两种方式都没有什么卵用==
对于Android来说，在进入页面直接唤起的情况下，iframe和location.href是一样的，但是如果是事件驱动的唤起，iframe唤起的表现比location.href要更好一点。
通过测试可以发现，进入页面直接唤起和事件驱动的唤起，对于很多浏览器，两者的表现是不同的，简单来说，直接唤起的失败更多。

以上测试可能随时间已经有出入和变化，仅供参考

选择

看了这些资料后，开始动手对网站的分享功能再次二开，目前都是采用a标签进行一个简单的跳转，去对应社交平台的分享url的api接口提交各个参数。

image

尝试

准备先引入大佬的NativeShare轮子，因为我在他的在线demo尝试了，我手机自带浏览器、模拟器的自带浏览器、模拟器的QQ浏览器，都可以很好的分享出来，于是首先引入他的方式。

思路

$(document).ready(function () {
    $(".social-share-icon ").on("click",function (e) {
        e.preventDefault();
        shareHref = $(this).attr("href");

        if ($(this).hasClass("icon-qq")){

            call('qqFriend',shareHref);

        }

    })
})

对目前的各个a标签，在dom加载完成时添加一个click事件，阻止a标签的触发，然后把href地址记录下来。然后再去触发相应的NativeShare中的call方法。

但是我发现在原生的浏览器里面竟然没触发。。那就做个降级处理吧。

function call(command) {
            try {
                nativeShare.call(command)
            } catch (err) {
                // 在这里写降级处理的内容
                alert(err.message)
            }
        }

在catch到抛出到异常后，自己在用原生的URL scheme 尝试触发，如果还是不能触发，那就没办法咯~~

var url_scheme = '//share/to_fri?src_type=web&version=1&file_type=news&title=' + Base64.encode(shareData.title) + '&thirdAppDisplayName=5o6M5LiK55CG5bel5aSn&url=' + Base64.encode(shareData.link) + '&description=' + Base64.encode(shareData.desc);
            location.assign('mqqapi:' + url_scheme)
            setTimeout(function () {
                location.assign('timapi:' + url_scheme)
            }, 2000)

这个是我在网上找到的一个qq 分享的URL scheme，记得要base64处理下各个内容，还有个缺陷就是没有icon了，图片显示不了了。

细节处理

刚刚都是说手机移动端访问，如果要是电脑端访问的话，还是触发这个肯定不成功。所以在最开始要先判断下ua。根据ua来做出下一步动作。简单的放下ua判断代码

var browser = {
    versions: function() {
        var u = navigator.userAgent, app = navigator.appVersion;
        return {     //移动终端浏览器版本信息
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
            qq: u.indexOf('MQQBrowser') > -1,//QQ浏览器
            uc: u.indexOf('UCBrowser') > -1// UC浏览器

        };
    } (),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

// 先判断是否是PC，如果是PC端 就直接使用链接来分享
        if (browser.versions.mobile || browser.versions.android || browser.versions.ios){
            // if (browser.versions.qq && command==='qqFriend' || command==='qZone'){
            //     throw new Error;
            // }
            nativeShare.call(command)
        }else{
            // 使用原链接分享
            location.assign(e)
        }

效果

最后测试了几个浏览器分享效果

浏览器	华为自带	X浏览器	模拟器自带	模拟中QQ浏览器	APK内置
QQ好友	N	Y	Y	Y	Y
QQ空间	N	Y	Y	Y	Y
微信朋友圈	Y	N	N	Y	N

image

看来QQ浏览器果然通过原生的内置分享api都能达到分享唤起，但是在其他浏览器就有部分不兼容了。后面有需要在继续调整优化吧，

Reference

H5唤起APP指南 https://suanmei.github.io/2018/08/23/h5_call_app/

h5唤起app http://echozq.github.io/echo-blog/2015/11/13/callapp.html

H5唤起APP进行分享的尝试

H5唤起APP进行分享

由来

分析实现方式

URLScheme

URL Scheme 是什么

常用APP的 URL Scheme

URL Scheme 语法

搜集到的常用Scheme

我进入深坑

大坑

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

触发方式

iframe方案

a标签唤起

location.href跳转

选择

尝试

思路

细节处理

效果

Reference

兼容是重点

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Ionic