H5唤起APP进行分享的尝试

最新推荐文章于 2024-06-12 14:11:59 发布
最新推荐文章于 2024-06-12 14:11:59 发布
阅读量3.2k 收藏 9
点赞数
分类专栏： web前端 JS插件 文章标签： javascript
原文链接：https://www.jianshu.com/p/500f4be528e3
版权

H5唤起APP进行分享

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

由来

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

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

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

疑问？

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

不过这种情况分为两种：

  1. 唤起自己产品的APP

  2. 唤起第三方APP

    image

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 Schemeweixin://alipay://taobao://sinaweibo://mqq://zhihu://sms://

URL Scheme 语法

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

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

搜集到的常用Scheme

应用名称URL Scheme
微博weibo://
QQmqq://
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://
chromegooglechrome://
微博国际版weibointernational://
摩拜单车mobike://
ofoofoapp://
有道云笔记youdaonote://
印象笔记evernote://
今日头条snssdk141://
网易新闻newsapp://
网易云音乐orpheuswidget://
QQ音乐qqmusic://
QQ音乐最近播放qqmusic://today?mid=31&k1=2&k4=0
美团外卖meituanwaimai://
美团imeituan://
Gmailgooglegmail://
网易邮箱neteasemail://
QQ邮箱qqmail://
腾讯视频tenvideo://
爱奇艺iqiyi://
12306cn.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，我们可以发现：

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

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

选择

看了这些资料后，开始动手对网站的分享功能再次二开，目前都是采用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好友NYYYY
QQ空间NYYYY
微信朋友圈YNNYN

image

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

兼容是重点


作者：二歪求知iSk2y
链接：https://www.jianshu.com/p/500f4be528e3
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

liu__software
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5网页实现微信分享，分享朋友圈功能（分享带图片，附源码
2401_83739472的博客
04-03 4121
面试题文档来啦，内容很多，485页！由于笔记的内容太多，没办法全部展示出来，下面只截取部分内容展示。
android 使用qq第三方登录接口回调无反应
qq_34568169的博客
06-20 2527
现在基本上是个app都可以第三方登录，比如qq,微信。通过第三方登录一方面可以优化用户的登录体验，另一方面给自己的app带来了庞大的用户基础，可见app接入第三方登录的重要性。2018-6-20日，尝试在android 中接入qq登陆，官方文档给的很详细（but,it's wrong wrong wrong!!!）一步步照着官方文档搞，经测试发现回调无反应最后在下载的sdk中找到了demo源码，兴...
【HarmonyOS NEXT】如何通过h5拉起应用（在华为浏览器中拉起应用）
最新发布
wu1004019946的博客
06-12 622
网页需要给自己的应用拉活，因此在网页中添加按钮引导用户拉应用。url=XXX)>,点击该按钮，打开网页web端收到的url为iyingyong://www.yingyong.com?另外浏览器不会对deeplink链接做任何解析或处理，只会原封不动的传递给拉起的应用。因此第三方应用只需要自己的网页端和应用端协商好url规则，自己去做解析打开对应页面即可。浏览器访问网页经常会遇到deeplink的场景。需要注意deeplink链接的scheme协议头必须网页拉起的链接的应用配置的保持一致。
iOS QQ 扫一扫 捷径URL
04-24 1万+
自取 QQ扫一扫捷径 打开扫一扫 mqqopensdkapi://bizAgent/qm/qr?url=wtf 或者 (Google后发现这个也行_(:з」∠)_, 不过上面的更短∠( ᐛ 」∠)＿) mqqapi://qrcode/scan_qrcode?version=1&src_type=app url值随意, 但不能为空 根据群号打...
autojs调用原生方法触发QQ,mqqapi大全
weixin_45564955的博客
01-25 2613
autojs调用原生方法触发QQ,mqqapi大全
android调起QQ聊天,QQ个人资料,QQ群资料
u013171292的专栏
05-27 5282
android调起QQ聊天,QQ个人资料,QQ群资料都是网上到处找的资源，自己做个整理备份。准备目标QQ账号（你希望聊天的账号），这个账号必须是纯数字、这个账号必须在QQ推广上面开通了服务（未开通的在这个网站登陆账号就提示）。 1、不是纯数字，如邮箱账号消息会发送不出去，也看不到资料。 2、没开通服务，发送消息会要求加对方为好友，也就是所谓的不能和陌生人聊天（这里的陌生人指从来没聊过天的两个QQ
手机端唤醒APP 、js 微信分享
齐枫的博客
05-16 6782
最简单的方法 &amp;lt;a href=&quot;javascript:window.location.href='weixin://'&quot;&amp;gt;javascript:window.location.href='weixin://' &amp;lt;/a&amp;gt; &amp;lt;a href=&quot;weixin://&quot;&amp;gt;weixin:// &amp;lt
H5唤起手机本地app
12-29
H5可以通过JavaScript模拟发送一个Intent来尝试唤起app。 7. **WebView桥接**：为了在H5和原生app之间进行通信，通常需要建立一个WebView桥接，使得JavaScript可以调用原生的代码。 8. **检查app是否已安装**：在...
h5页面唤起app如果没安装就跳转下载(iOS和Android)
11-20
因此只能是h5去尝试唤起app，若不能唤起，引导用户去下载我们的app。 微信里屏蔽了 schema 协议,如果在微信中打开h5，则会提示用户在浏览器中打开。<!doctype html> <html> <head> <title>&lt...
详解如何通过H5（浏览器/WebView/其他）唤起本地app
09-27
【H5唤起本地app原理】 H5（HTML5）唤起本地应用的主要机制是通过自定义的URI Scheme，这是一种标识符系统，允许不同应用之间进行通信。当H5页面中的链接被点击时，浏览器会尝试寻找与该URI Scheme相匹配的本地应用...
H5唤起原生APP
08-10
"H5唤起原生APP"这一主题，主要探讨的就是如何利用JavaScript在浏览器环境中通过特定的URL链接启动已安装在设备上的原生应用程序。这种技术在营销推广、社交分享、个性化服务等方面有着广泛的应用。 首先，我们需要...
html5调用app分享功能示例（WebViewJavascriptBridge）
12-14
小编接到领导任务，写h5移动端活动页面，点击页面内容调取ios和Android开发自己写的分享功能（包括微信、微信朋友圈、QQ、QQ空间等），包括用户未登录，让其登录后才能分享，分享成功后发起请求给予优惠券功能，下面是所得到的经验，仅供参考。 建议不要使用ShareSDK 直接上干货：不用引用其他库 var u = navigator.userAgent;//判断手机类型 //---------------------------------------安卓手机-------------------------------------------------------//
callapplib是一个H5唤起APP的解决方案能够满足大部分唤端场景
08-10
callapp-lib是一个专门设计用于解决H5唤起APP问题的开源解决方案，它旨在为开发者提供一种灵活、高效的方法来处理各种唤端场景。 callapp-lib的核心功能在于，它能够帮助H5页面通过JavaScript代码调用唤起已经安装...
h5唤醒android app传参数,H5网页实现唤醒app，并传递参数
weixin_28994935的博客
05-26 603
转载请注明出处// 项目代码为uniapp编写// fingerScheme 为app的scheme，如微信的为`weixin://`let url = this.fingerScheme; // codingapi://fingervar timeout, t = 1000, hasApp = true;setTimeout(function () {if (!hasApp) {var u = ...
vuejs构建的单页面应用history模式子页面微信分享在iOS中遇到的问题
weixin_33898233的博客
02-08 598
问题描述 在用vuejs做的SPA单页面应用，router模式为history模式，应用是个商城，在进入商品详情页时，第一次进入页面提示签名无效，手动刷新一下就ok，很是烦躁，经过不懈努力，终于解决。 问题分析 微信官方js-sdk文档上是这么写的 然而并没有提到iOS，通过在真机上测试，问题应该是iOS和安卓处理URL的方式不同，安卓...
H5唤起APP客户端
马优晨
05-09 2860
唤起APP的方案 当前主要有三种打开APP的渠道：流量APP封装渠道，原生的打开渠道以及一些奇技淫巧。 流量APP封装渠道 微信、手Q和微博等流量入口为了保证流量不流失，对iOS和Android原生的唤起方案做了屏蔽和封装。在这些APP中，使用原生唤起APP方案是无效的，只能用他们的方案或者位于白名单中的APP才能通过H5的唤起APP。 如果是腾讯系APP，或者在白名单中肯定是可以的！微博，手机百度等APP也是白名单的打开方式，平常用的不多，这里不做赘述。 原生渠道 1、 Schema
H5如何实现唤起APP
热门推荐
qq_41960279的博客
05-17 1万+
前言 写过hybrid的同学，想必都会遇到这样的需求，如果用户安装了自己的APP，就打开APP或跳转到APP内某个页面，如果没安装则引导用户到对应页面或应用商店下载。这里就涉及到了H5与Native之间的交互，为什么H5能够唤起APP并且跳转到对应的页面？ 就算你没写过想必也体验过，最常见的就是抖音里面的一些广告，如果你点击了广告，他判断你手机装了对应APP，那他就会去打开那个APP，如果没安装，他会帮你跳转到应用商店去下载，这个还算人性化一点的，有些直接后台给你去下载，你完全无感知。 哈哈，是不是觉得这种
h5唤起APP并检查是否成功
06-10
3. 使用Universal Links或者Android App Links唤起APP，这种方式需要在APP和h5网站中都进行一定的配置，优点是可以提高唤起成功率和用户体验。 4. 在APP中注册一个JavaScriptInterface，允许h5页面调用APP中的方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值