怎麼在網頁中打開你的app

先聲明一下關於ios中9.0打開方式的文章來自博客：IOS9通用連接（universal link）

前言

對於一個完備的互聯網產品而言須要有app端與web端兩個不一樣前端，對於產品而言不少都但願可以將wap頁上的用戶引向native app上這就要求前端工程師們爲網頁提供各類入口去打開app，今天咱們就聊一聊app的打開方式（有錯誤的地方還請高手指正）。

常規打開

對於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端接入通用連接，注意拋出的連接不要跟主站同域便可，以後就是不斷的調試，本身去踩坑吧，記得綁定域名，這個對域名具備必定的依賴性。

微信中打開

至此只有微信是打不開的，實際上騰訊系的產品都是打不開的，包括qq瀏覽器。

對於微信中有兩種方式：

• 一種簡單的方式就是彈窗告訴用戶讓他去瀏覽器中打開——在技術以外的辦法

• 還有一種方式就是應用寶

是的若是是微信就去打開你的app對應的應用寶，應用寶會去檢測你的app是否存在有則去打開，但只是去打開。實際上騰訊的應用寶對於開發者在功能上作的比想象中的要強大，你在應用寶的微下載中配置申請你的applink與app store的連接,以後你只要在你的連接參數中帶上android_schema="myApp://"就在應用寶中打開app中的特定功能，若是忽略應用寶的頁面跟本身scheme打開沒有太大區別，具體的操做能夠查看應用寶的說明。簡而言之，騰訊的產品中都去借助應用寶這個平臺去執行你須要的操做。在此就不貼代碼了，只要判斷瀏覽器若是是微信或者是qq就去跳你的應用寶連接就行。

總結

實際上單純打開app很是簡單，目前不管安卓仍是ios都可以很好的支持scheme，固然騰訊系產品除外，實際上百度瀏覽器也會攔截scheme（我以爲真是奇了葩！！！微信這種尚能理解，一個瀏覽器竟然擅自去攔截scheme）目前對百度瀏覽器尚未什麼很好的辦法，能夠嘗試是否可以經過百度應用市場去解決。若是是但願打開app同時又要打開下載頁，那麼ios9及以上就得用通用連接去解決，重點就是這個通用連接。