web頁面打開本地app（判斷是否安裝）

在應用寶中有APP申請鏈接：

//是否可以打開App不可以跳則到下載頁
$(".downNow button").on("click",function(){
	if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
    {
	    var loadDateTime = new Date().getTime();
	    window.setTimeout(function() {
		    var timeOutDateTime = new Date().getTime();
		    // alert("loadDateTime:"+loadDateTime+"--"+"timeOutDateTime"+timeOutDateTime)
	        if (timeOutDateTime - loadDateTime < 3000) {
	            window.location.href = "http:";//下載鏈接
		    } else {
		        window.close();
		    }
	 	},1500);
	    window.location.href = "baoxianquan://";//ios app協議
    }
	if(navigator.userAgent.match(/android/i))
	{
		var loadDateTime = new Date().getTime();
	    window.setTimeout(function() {
		    var timeOutDateTime = new Date().getTime();
		     // alert("loadDateTime:"+loadDateTime+"--"+"timeOutDateTime"+timeOutDateTime)
	        if (timeOutDateTime - loadDateTime < 3000) {
	            window.location.href = "http:";//下載鏈接
		    } else {
		        window.close();
		    }
	 	},1500);
	    window.location.href = "bxq://com.tou360.insurcircle";//android app協議
	    //jxapi://com.tou360.bida/
	    // window.setTimeout(function() {
	    // 	var timeOutDateTime = new Date();
	    // 	if((timeOutDateTime-loadDateTime)<3000){
	    // 		window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.tou360.bidaagent";//android 下載地址
	    // 	}  
	    // }, 2000)    
	}
});

　　對於app打開而言最常規的打開就是通過url scheme的方式去打開你的app，如下的：

myapp://
myapp://open
myapp://type=1&id=2sdeo223lwe

　　

這些拋出都是以url的方式進行拋出，app捕捉到這些拋出去做相應的處理，本文對app的處理不做詳細描述，app開發請自行谷歌百度。對於前端而言拋出的方式也有很多，而最理想的方式是通過iframe的src對其進行鏈拋出，來！說的在多都沒有代碼來的清晰，請看下面。

首先我們需要有一個iframe：

//實際上就是新建一個iframe的生成器
var  createIframe=(function(){
  var iframe;
    return function(){
        if(iframe){
            return iframe;
        }else{
            iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
            return iframe;      
        }
    }
})()

　　之后我們還需要一個url scheme:

//生成一個url scheme,假設我們約定的scheme是myApp://type=1&id=iewo212j32這種形式的

var baseScheme = "myApp://"
var createScheme=function(options){
    var urlScheme=baseScheme;
    for(var item in options){
        urlScheme=urlScheme+item + '=' + encodeURIComponent(options[item]) + "&";
    }
    urlScheme = urlScheme.substring(0, urlScheme.length - 1);
    return encodeURIComponent(urlScheme);
}

　　

這種scheme形式的其實不是最好的,根據我們踩過的坑，覺得約定為與http協議相近可能更好一些，具體的協議需要前端人員自己去和app端人員約定。

ok萬事具備，iframe有了，urlScheme也有了，該去打開app了

var openApp=function(){
    var localUrl=createScheme();
    var openIframe=createIframe();
    if(isIos()){
        //判斷是否是ios,具體的判斷函數自行百度
        window.location.href = localUrl;
        var loadDateTime = Date.now();
        setTimeout(function () {
            var timeOutDateTime = Date.now();
            if (timeOutDateTime - loadDateTime < 1000) {
                window.location.href = "你的下載頁面";
            }
        }, 25);
    }else if(isAndroid()){
        //判斷是否是android，具體的判斷函數自行百度
        if (isChrome()) {
            //chrome瀏覽器用iframe打不開得直接去打開，算一個坑
            window.location.href = localUrl;
        } else {
            //拋出你的scheme
            openIframe.src = localUrl;
        }
        setTimeout(function () {
            window.location.href = "你的下載頁面";
        }, 500);
    }else{
        //主要是給winphone的用戶准備的,實際都沒測過，現在winphone不好找啊
        openIframe.src = localUrl;
        setTimeout(function () {
            window.location.href = "你的下載頁面";
        }, 500);
    }
}

　　以上就是你要打開scheme的主要代碼了，好吧，實際上不只是打開app，還要實現未打開的時候跳到下載頁去。其中安卓實際上無論有沒有打開都會跳到下載頁去，而ios........好吧!按照網上的說法是瀏覽器失焦后會掛起腳本，呵呵，這是多老的ios版本的表現了，實際上現在的ios已經沒有這么做，有些版本會跟安卓的表現一樣，而有些則是直接跳轉根本不會去打開，還有打開的時候那個惡心的系統彈窗是什么鬼。好吧，實際上至此你會發現，ios9.0以上的有些打不開直接跳，有些打得開還會有允許彈窗，而微信則是無論如何都打不開，實際上微信會在他的瀏覽器里攔截掉所有未經其允許的scheme包括app store，那么接下來我們要解決這些問題。

通用鏈接

針對ios9及以上的打不開問題，實際上ios9提供了更好的解決方案————通用鏈接。

什么是Universal Links(通用鏈接)?

這是iOS9推出的一項功能，如果你的應用支持Universal Links(通用鏈接)，那么就能夠方便的通過傳統的HTTP鏈接來啟動APP(如果iOS設備上已經安裝了你的app，不需要額外做任何判斷等)，或者打開網頁(iOS設備上沒有安裝你的app)。或許可以更簡單點來說明，在iOS9之前，對於從各種從瀏覽器，Safari、UIWebView或者 WKWebView中喚醒APP的需求，我們通常只能使用scheme。

以上來自網上關於通用鏈接的介紹，對於前端簡單點講就是你訪問一個http的url，如果這個url帶有你提交給開發平台的配置文件中匹配規則的內容，ios系統會去嘗試打開你的app，如果打不開，系統就會在瀏覽器中轉向你要訪問的鏈接。很好的一個屬性，因為通過這個屬性在ios9上我們能夠繞過微信的攔截從而打開app。

以下是ios開發人員要做的百度搜索結果第一條ios中實現通用鏈接：

而我們要做的真的很簡單，實際上我們只需要拋出鏈接就好了（實際上博主只是來騙經驗的）。在此之前請准備好與主站不同的域名，比如主站www.xxxx.com，你們可以准備好open.xxxx.com的域名作為重定向用。好吧！實際上通用鏈接有一個很坑的屬性，必須是異域打開，而且如果你提交的是你主站的鏈接，你打開你的主站你會發現網站上方會掛着一個難看的灰條轉向appstore中你們的app，沒錯，就是ios系統干的這個事，具體的其他注意事項可以參考這篇文章IOS9通用鏈接（universal link）。

那么接下來我們的代碼得做好更改

//增加通用鏈接的生成,
var baseScheme = "myApp://",
    baseLink="http://m.xxxx.com?";
var createScheme=function(options,isLink){
    var urlScheme=isLink?baseLink:baseScheme;
    for(var item in options){
        urlScheme=urlScheme+item + '=' + encodeURIComponent(options[item]) + "&";
    }
    urlScheme = urlScheme.substring(0, urlScheme.length - 1);
    return isLink?urlScheme:encodeURIComponent(urlScheme);
}

　　然后對拋出做

var openApp=function(){
    //生成你的scheme你也可以選擇外部傳入
    var localUrl=createScheme({type:1,id:"sdsdewe2122"});
    var openIframe=createIframe();
    if(isIos()){
        //判斷是否是ios,具體的判斷函數自行百度
        if(isGreaterThan9()){
            //判斷是否為ios9以上的版本,跟其他判斷一樣navigator.userAgent判斷,ios會有帶版本號
            localUrl=createScheme({type:1,id:"sdsdewe2122"},true);//代碼還可以優化一下
            location.href = localUrl;//實際上不少產品會選擇一開始將鏈接寫入到用戶需要點擊的a標簽里
            return;
        }
        window.location.href = localUrl;
        var loadDateTime = Date.now();
        setTimeout(function () {
            var timeOutDateTime = Date.now();
            if (timeOutDateTime - loadDateTime < 1000) {
                window.location.href = "你的下載頁面";
            }
        }, 25);
    }else if(isAndroid()){
        //判斷是否是android，具體的判斷函數自行百度
        if (isChrome()) {
            //chrome瀏覽器用iframe打不開得直接去打開，算一個坑
            window.location.href = localUrl;
        } else {
            //拋出你的scheme
            openIframe.src = localUrl;
        }
        setTimeout(function () {
            window.location.href = "你的下載頁面";
        }, 500);
    }else{
        //主要是給winphone的用戶准備的,實際都沒測過，現在winphone不好找啊
        openIframe.src = localUrl;
        setTimeout(function () {
            window.location.href = "你的下載頁面";
        }, 500);
    }
}

　　實際上就只需要更改這么點，最重要的是app端接入通用鏈接，注意拋出的鏈接不要跟主站同域即可，之后就是不斷的調試，自己去踩坑吧，記得綁定域名，這個對域名具有一定的依賴性。

 

原文