js判斷本地是否安裝app

舞動乾坤發表於2017-10-21
JSAPP
var ua = navigator.userAgent.toLowerCase();

1.判斷是否是微信
 
function isWeixinBrowser() {
        return (/micromessenger/.test(ua)) ? true : false;
    }
 
 
2.判斷是否是android
 
var isAndroid = ua.indexOf('android') > -1 || ua.indexOf('linux') > -1;

3.具體過程
 
scheme是客戶端定義的url-scheme
 
$("a[href^='scheme://']").on('click',function(e){
        e.preventDefault();//阻止預設行為
        if(isWeixinBrowser()){
            $('.layer').show();//遮罩層（使用外部瀏覽器開啟，此處樣式自行設定）
        }else{
            if(isAndroid){
                //android
                $('body').append("<iframe src="" style='display:none' target='' ></iframe>");//target為空防止在當前頁面重新整理
                setTimeout(function(){window.location = 'http://www.510wifi.com/weixin_download_client.html'},600);
            }else{
                //ios
                window.location = 'scheme://openapp';
                setTimeout(function(){window.location = 'itms-apps://itunes.apple.com/app/id123456789'},25);
            }
        }
    })

附：判斷手機端各種瀏覽器
 
if (ua.match(/WeiBo/i) == "weibo") {
                //在新浪微部落格戶端開啟
        }
        if (ua.match(/QQ/i) == "qq") {
                //在QQ空間開啟
        }
        if (browser.versions.ios) {
                //是否在IOS瀏覽器開啟
        } 
        if(browser.versions.android){
                //是否在安卓瀏覽器開啟
        }
 
var u = navigator.userAgent, app = navigator.appVersion;
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應該程式，沒有頭部與底部
複製程式碼
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 <!-- a標籤點選開啟的動作，在click事件中註冊 -->
 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…

　　應用場景：

　　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>標籤即可，格式如：

　　　　<meta name='apple-itunes-app' content='app-id=你的APP-ID'>

　　百度貼吧的

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>複製程式碼


相關文章