js判断本地是否安装app

红太狼 2022-06-06 00:07 339阅读 0赞

JS判断手机端是否安装了某个客户端APP
    
    虽然在Js中可以启动某个app，但是并不能判断该app是否安装；
    但是，但是....还是有奇思淫巧滴，启动app需要的时间较长，js中断时间长，如果没安装，js瞬间就执行完毕。直接上代码吧！
    一、
    
    function testApp(url) {
        var timeout, t = 1000, hasApp = true;
        setTimeout(function () {
            if (hasApp) {
                alert('安装了app');
            } else {
                alert('未安装app');
            }
            document.body.removeChild(ifr);
        }, 2000)
    
        var t1 = Date.now();
        var ifr = document.createElement("iframe");
        ifr.setAttribute('src', url);
        ifr.setAttribute('style', 'display:none');
        document.body.appendChild(ifr);
        timeout = setTimeout(function () {
             var t2 = Date.now();
             if (!t1 || t2 - t1 < t + 100) {
                 hasApp = false;
             }
        }, t);
    }
    
    二、
    
        function isInstalled(){
            var the_href=$(".down_app").attr("href");//获得下载链接
            window.location="apps custom url schemes";//打开某手机上的某个app应用
            setTimeout(function(){
                window.location=the_href;//如果超时就跳转到app下载页
            },500);
        }
    
     
    apps custom url schemes是什么呢？
    其实就是你与app约定的一个协议URL，在IOS客户端或者Android客户端中可以设置一个URL Scheme。例如，设置URL Scheme：app，然后其他的程序就可以通过“ URLString=app://”调用该应用。还可以传参数，如：app://reaction/?uid=1
    以上介绍了怎么创建该本地协议及调用该本地协议的方法。但这里还有个关键就是怎么判断用户是否安装了该app呢？原理如下：
    在手机浏览器中用js代码请求该协议，如果在500ms内，如果有应用程序能解析这个协议，那么就能打开该应用；如果超过500ms就跳转到app下载页。

点击页面判断是否安装app并打开,否则跳转下载的方法

App产品在运营推广上有一个需求，就是要求可以让用户在访问我们的推广网页时，就可以判断出这个用户手机上是否安装了我们的App，如果安装了则可以直接在网页上打开，否则就引导用户前往下载。从而形成一个推广上的闭环。

解决办法

而对于点击链接后，能否直接打开，可以通过下面的代码来实现。前提条件：你得知道你的APP对应的打开协议，如贴吧APP，协议为：com.baidu.tieba:// ，微信的：weixin:// ，等等

1 
     2 <a href="javascript:;" id="openApp">贴吧客户端</a>
     3 <script type="text/javascript">
     4     document.getElementById('openApp').onclick = function(e){
     5         // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止js其他行为
     6         
     7         var ifr = document.createElement('iframe');
     8         ifr.src = 'com.baidu.tieba://';//打开app的协议，有app同事提供
     9         ifr.style.display = 'none';
    10         document.body.appendChild(ifr);
    11         window.setTimeout(function(){
    12             document.body.removeChild(ifr);
    13 　　　　　　　window.location.href = "https://itunes.apple.com/cn/app/id477927812";//打开app下载地址，有app同事提供
    14         },2000)
    15     };
    16 </script>

此方法有些浏览器不兼容iframe，可以window.location的方法解决

1 <a href="javascript:;" id="openApp">贴吧客户端</a>
    2 <script type="text/javascript">
    3     document.getElementById('openApp').onclick = function(e){
    4         window.location.href = "com.baidu.tieba://";
    5         window.setTimeout(function(){
    6             window.location.href = "https://itunes.apple.com/cn/app/id477927812";//打开app下载地址，有app同事提供
    7         },2000)
    8     };
    9 </script>

IOS上的Banner

参考网页：[developer.apple.com/library/ios…][developer.apple.com_library_ios]

应用场景：

1、用户第一次访问宣传页面

a、点击Banner，进入到APP Store中对应的APP下载页

b、APP下载页中提示：安装；用户点击安装

c、安装完成后，APP下载页中提示：打开；用户继续点击打开

d、用户正常使用APP

2、用户第二次访问宣传页面

a、点击Banner，进入到APP Store中对应的APP下载页

b、APP下载页中提示：打开；用户直接点击打开

c、用户正常使用APP

3、用户第三次、第四次、...、第N次访问，操作步骤同2

在iOS上，要增加一个APP的大Banner，其实只需要在<head>标签内增加一个<meta>标签即可，格式如：

百度贴吧的

1 <meta name='apple-itunes-app' content='app-id=477927812'>

测试Demo

1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     5 <title>this's a demo</title>
     6     <meta name='apple-itunes-app' content='app-id=477927812'>
     7 </head>
     8 <body>
     9     <a href="javascript:;" id="openApp">贴吧客户端</a>
    10 </body>
    11 </html>
    12 <script type="text/javascript">
    13     document.getElementById('openApp').onclick = function(e){
    14         
    15         if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
    16            {
    17             window.location.href = "com.baidu.tieba://";//ios app协议
    18             window.setTimeout(function() {
    19                 window.location.href = "https://itunes.apple.com/cn/app/id477927812";
    20             }, 2000)
    21            }
    22         if(navigator.userAgent.match(/android/i))
    23         {
    24             window.location.href = "com.baidu.tieba://app";//android app协议
    25             window.setTimeout(function() {
    26                 window.location.href = "https://****.apk";//android 下载地址
    27             }, 2000)    
    28         }
    29     };
    30 </script>

[developer.apple.com_library_ios]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.apple.com%2Flibrary%2Fios%2Fdocumentation%2FAppleApplications%2FReference%2FSafariWebContent%2FPromotingAppswithAppBanners%2FPromotingAppswithAppBanners.html