二,H5 唤醒APP小记,produce101

作者:suan_suan

链接:https://segmentfault.com/a/1190000018661914

H5 唤醒APP功用

最近遇到一个需求,需求在从APP同享出去的H5页面中,带有一个当即翻开的按钮,假如本地装置了app,那么就直接引发本地的app,假如没有装置,则跳转到下载。这是一个很正常的推行和导流量的战略。前端小白从来没有做过这个需求,只能开端哼唧哼唧地敞开自己的度娘和谷歌之旅。

经过一段时刻的探索之旅发现箜篌里边的学识许多,要做一个兼容性很好的计划,就需求考虑各种状况,在不同的状况适配不同的计划,比方说用户是在手机浏览器翻开仍是微信中翻开,或许是在pc中翻开,universal腾讯运用宝直接翻开 APP link是否被封闭等,这就使代码完成变得复杂,且简略犯错,且还有安卓渠道机型很多、浏览器很多等导致的兼容问题。由于时刻有限,这次首要先介绍一个比较遍及的运用URL Scheme进行App跳转的办法。

URL Scheme —— 唤端前言

来历

一般来说,咱们运用的智能设备上有许多咱们的个人信息。比方:联系办法、银行卡/信用卡信息、付出宝/Paypal/各大商城的账户暗码、相片乃至行程与方位信息等。

假如说,你设备上的每一个运用,不管是官方的仍是你从任何商城装置的运用都能够随意地获取这些信息,那么你轻则收到打扰信息和邮件、重则后果不堪设想。怎样让这些信息不被其它运用随意运用,或许说,怎样让这些信息仅在设备全部者自己知情并答应的状况下被运用,是全部智能设备与操作系统所要在乎的中心安全问题。针对这个问题,苹果运用了名为「沙盒」的机制:运用只能拜访它声明或许拜访的资源。全部提交到 App Store 的运用都必须恪守这个机制。

在安全方面沙盒是个很好的处理办法,可是有些矫枉过正。灵敏的个人信息咱们不愿意泄漏,却不代表全部的信息咱们都不想与其它运用同享。因而,咱们急需求一个辅助东西来协助咱们完成运用通讯, URL Schemes 便是这个东西。

URL Schemes是什么

[scheme]://[host]/[path]?[query]


咱们拿 https://www.baidu.com 来举例,scheme 天然便是 https 了,后边拼接的是传递的参数。URL S二,H5 唤醒APP小记,produce101chemes 没有特别严厉的标准,所以后边参数的详细界说是app开发者去自界说。

就像给服务器资源分配一个 URL,以便咱们去拜访它相同,咱们相同也能够给手机APP分配一个特别格局的 URL,用来拜访这个APP或许这个APP中的某个功用(来完成通讯)。APP得有一个标识,好让咱们能够定位到它,它便是 URL 的 Scheme 部分。

可是,两者还有几个重要的差异:

  • 全部网页都一定有网址,不管是主页仍是子页。但未必全部的运用都有自己的 URL Schemes,更不是每个运用的每个功用都有相应的 URL Schemes。几乎没有全部功用都有对应 URL 的运用。一个 App 是否支撑 URL Schemes 要看那盐酸地芬尼多片个 App 的作者是否在自己的著作里增加了 URL Schemes 相关的代码。

  • 一个网址只对应一个网页,但并非每个 URL Schemes 都只对应一款运用。这点是由于苹果没有对 URL Schemes 有不答应重复的硬性要求,所以从前呈现过有 App 运用付出宝的 URL Schemes 阻拦付出帐号和暗码的事情。

  • 一般网页的 URL 比较好猜测,而URL Scheme 由于没有统一标准,所以十分难猜,经过猜来获取 运用的 URL Schemes 是不现实的。


前面遍及了一下URL Schemes的相关常识,作为个前端开发者,就不去深究其间的原理,都交给app开发者吧。接下来开端咱们的正题。首要当然是要客户端供给App的Url Schemes。

用浏览器去翻开scheme

在浏览器中翻开 scheme 就像翻开一个不同的http地址相同。能够在一个 a 标签中翻开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻开App</title>
</head>
<body&g南山t;
<a href="luwei://" id="open">翻开运用</a>
</body>
</html>

点击上面的H5页面中的链接将会测验唤醒对应app,二,H5 唤醒APP小记,produce101在一些浏览器中,或许会弹出一个提示框,问询用户是否答应翻开运用。

假如翻开的 schem抗日之铁苦战王e 在本地没有对应的 app,则点击不会反响。

当然还能够运用 JavaScript 代码翻开,只需求增加相应的事情触发和处理即可。

在JavaScript代码中翻开衔接有以下几种办法:

  • 新建一个躲藏的 iframe ,地址指向需求翻开的url

  • 运用 window.location 或许 window.location.href 改写当时页面

  • 新建一个躲藏的 a 标签,地址指向翻开的url,并触发翻开链接事情

  • 动态创立一个script脚本,在这个脚本中新建一个a标签并翻开


// 翻开url的办法
var urlOpen = {
  // 在ios支撑欠好
    'iframe' : function(url{
        var iframe = document.createElement('iframe');
       &n二,H5 唤醒APP小记,produce101bsp;iframe.style.display = 'none';
        iframe.src = url;
        document.body.appendChild(iframe);
    },
 &二,H5 唤醒APP小记,produce101nbsp;  'location' : function(url{
        window.location.href = url;
    },
    'href' : function(url{
        var a = document.createElement('a');
        a.style.display = 'none';
        鼻炎吃什么药a.href = url;
        document.body.appendChild(a);
   speak     a.click();
    },
    'script' : function(url{
        var&nb万里长城永不倒sp;script = document.createElement('sc云草稿ript');
        script.setAttribute('type''test/javascript');
        script.innerHTML = '(function(){' +
            'var a = document.createEle二,H5 唤醒APP小记,produce101ment("a");' +
  &n手机掉水里怎样处理bsp;         'a.style.display = "none";' +
            'a.href = "' + url.replace(/"/g'\\"') + '";' +
            'document.body.appendChild(a);' +
            'a.cl潢川气候ick();' +
            '})()';
        document.body.appendChild(script);
    },
&nb宝马2系敞篷sp;   'open' : function(url{
        window.open(url);
    }
};

以上办法是仅仅处理了在已装置App设备唤醒App的功用,并不能判别是否已装置App,没有装置即跳转至下载链接。

浏览器判别是否装置运用

在浏览器实际上是没有才能判别手机36岁杀人鲸逝世里是否装置了某个App的,所以只能够采纳一种投机取巧的办法。

在JavaScript中判别页面是否进入后台来判别翻开成功。Html5供给了下列事情和特点能够使用:

  • pagehide : 页面躲藏时触发

  • visibilitychange : 页面躲藏没有在当时显现时触发(切换tab也会触发该事情)

  • document.hidden :当页面躲藏时,该值为true,显现时为false


上面这些事情或许特点并不是全部浏览器都支撑。下面是一个给出为id为openBtn 的按钮增加翻开scheme或许下载事情的比如,但关于Android 4.4版别以下则不支撑

    var downloader, 
    scheme = 'luwei://',  // 需求翻开的app scheme 地址
 &qq宠物奇特之旅nbsp;  iosDownload='http://xxx.com';  // 假如翻开scheme失效的app下载地址
    andDownload = 'http://xxx.com';
    var u&n邮政快递包裹bsp;= navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1//g
    var isIOS = !!u.m兴辉圈atch(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

// 给 id&nb二,H5 唤醒APP小记,produce101sp;为 openBtn 的按钮增加点击事情处理函数
    document.getElementById('openBtn').onclick = function () {
        window.location.href = scheme;  // 测验翻开 scheme 

        // 设置3秒的守时下载使命,3秒之后下载app
        downloader = setTimeout(function(){
    &nb临海气候预报sp;      &n二,H5 唤醒APP小记,produce101bsp;if(isAndroid) {
                牛肉面;window.location.href = andDownload;
            }
            if(isIOS) {
                window.location.href = iosDownload;
            }

        }, 3000);
    };

    document.addEventListener('visibilitychange 55we;webkitvisibilitychange'function () {
        // 假如页面躲藏,估测翻开scheme成功,铲除下载使命
        if (document.hidden || document.webkitHidden) {
            clearTimeout(downloader);
        }
    });
    window.addEventListener('pagehide'function() {
        clearTimeout(downloader);
&n吕文鑫bsp;   });

没有完美的计划

  • 微信中无法唤醒App,需求“用浏览器翻开”是由于微信对全部的同享链接接做了scheme屏蔽,也便是说同享衔接中全部关于scheme的调用都被微信封掉了。有些app是能在微信翻开是由于微信有一个白名单(有联系便是不错),关于在白名单中的同享链接是不会屏蔽掉scheme调用的。

  • 本文仅仅小小地抛个砖,介绍了一种比较常用简略的办法去唤醒app,该计划兼容性不是特别好吧。要做出一个比较完美的计划还需求细细去研究,还需求不停地去搬砖~不说了,搬砖去了~



●编号933,输入编号直达本文

●输入m获取文章目录

引荐↓↓↓
 

Web开发

更多引荐25个技能类微信大众号

包括:程序人生、算法与数据结构、黑客技能与网络安全、大数据技能、前端开发、Java、Python、Web开发、安卓开发、iOS开发、C/C++、.NET、Linux、数据库、运维等。