轉載自（有改動）：https://segmentfault.com/a/1190000005967865
對于一個完備的互聯網產品而言需要有app端與web端兩個不同前端，對于產品而言很多都希望能夠將wap頁上的用戶引向native app上這就要求前端工程師們為網頁提供各種入口去打開app，今天我們就聊一聊app的打開方式（有錯誤的地方還請高手指正）。
對于app打開而言最常規的打開就是通過url scheme的方式去打開你的app，如下的
myapp://myapp://openmyapp://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，那么接下來我們要解決這些問題。
ios(9及以上) Universal Links (通用鏈接)
針對ios9及以上的打不開問題，實際上ios9提供了更好的解決方案————通用鏈接。
什么是Universal Links(通用鏈接)?
這是iOS9推出的一項功能，如果你的應用支持Universal Links(通用鏈接)，那么就能夠方便的通過傳統的HTTP鏈接來啟動APP(如果iOS設備上已經安裝了你的app，不需要額外做任何判斷等)，或者打開網頁(iOS設備上沒有安裝你的app)?；蛟S可以更簡單點來說明，在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端接入通用鏈接，注意拋出的鏈接不要跟主站同域即可，之后就是不斷的調試，自己去踩坑吧，記得綁定域名，這個對域名具有一定的依賴性。
安卓(6.0及以上) App Links
這部分內容來自：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0609/3022.html
谷歌2015年的I/O大會上宣布了一個新特性 ：允許開發者將app和他們的web域名關聯。這一舉措是為了最小化用戶遇到“打開方式”對話框的概率。比如，我們安裝了兩個Twitter應用 - 官方的和Falcon PRo。當你在某個地方點擊了Twitter URL的時候，你會看到如下的對話框：
但是在安卓M中，如果一個app明確的指定了App鏈接-這個對話框將不復存在。點擊一個鏈接將立即打開官方的app，沒有第三方app的機會，更不會打開一個瀏覽器。 在上圖的例子中，當你點擊了那個鏈接，安卓系統會檢查是否有一個app可以處理twitter.com URL，然后跟twitter.com核對哪個app（s）可以處理該域名的鏈接，這樣我們就能避免影響用戶。 注意安卓并不會在點擊鏈接的時候才核對這些鏈接，因此在安卓決定使用哪個app之前并不會有網絡阻塞。關于這點后面有更多討論。 雖然這會使安卓更方便 -- 多數情況下，你確實希望點擊一個鏈接打開的是最合適的那個app- 但是對于那些喜歡使用第三方app的人來說，似乎是一件壞事。不過這種行為可以在Android M的系統設置中關掉。
app開發者如何實現App Links
實現的細節可以在Android Developers' Preview 網站上找到。
如果你有一個需要處理鏈接（比如example.com）的app，你應該：
有上傳文件到example.com根路徑的權限，如果沒有，你無法讓你的app成為這些鏈接的默認打開方式。在build.gradle文件中設置compileSdkVersion 'android-MNC'。為每個這樣的<intent-filter>標簽<intent-filter> <data android:scheme="http" /> ...</intent-filter>添加屬性android:autoVerify="true"。http也可以是https。
注：這里對filter的寫法略去了很多，其實官網（上面的那個鏈接）有完整的示例：
<activity ...> <intent-filter android:autoVerify="true"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="http" android:host="www.android.com" /> <data android:scheme="https" android:host="www.android.com" /> </intent-filter></activity>認證是以主機名為單位的而不是以intent filter為單位的，因此從技術上講，并不需要為每個標簽都添加該屬性，但是添加了也不會出什么問題。
創建JSON文件
為了能讓安卓可以認證，你的app需要被允許使用app鏈接行為，為此，需要提供一個JSON文件，JSON文件中需要包含app的ID以及APK的公鑰證書。
這個文件必須包含一個JSON數組，數組中可以有一個或者多個對象，每個對象對應一個你想認證的app ID:
[ { "relation": ["delegate_permission/common.handle_all_urls"], "target": { "namespace": "android_app", "package_name": "com.example.myapp", "sha256_cert_fingerprints": ["6C:EC:C5:0E:34:AE....EB:0C:9B"] } }]比如，你現在有一個com.example.myapp的發行版app，同時還有一個叫com.example.myapp.beta的beta版app，你可以通過在數組中設置兩個對象來允許兩者都可以接受認證，每個對象帶有各自的app ID和公鑰值。
注意，這個文件的驗證是非常嚴格的：數組中的每個對象都必須和上面的那個一模一樣。在數組中添加了任意其他的對象，或者對象中有額外的屬性都會導致整個驗證失敗。- 即便這個app對象是有效的。
為了防止為同一個構建注冊了不同的key，貌似一個app可以指定多個SHA256指紋證書，不管怎樣，指紋證書可以通過如下方式獲得：
echo | keytool -list -v -keystore app.keystore 2> /dev/null | grep SHA256:上傳JSON文件
創建完文件之后，你需要上傳它同時保證它可以使用這個URL訪問http://example.com/.well-known/statements.json。
目前這個URL是http的，最終的M版本將只允許通過HTTPS訪問該URL。在第一個M預覽版中，重定向到HTTPS，或者任何其他重定向（301，302或者307）貌似都會被忽略并被視為失敗。
URL的scheme和<intent-filter>標簽中的android:scheme值是互不相干的，即使你有一個只接受HTTPS URLs的filter，認證URL仍然需要通過HTTP訪問。
微信中打開
至此只有微信是打不開的，實際上騰訊系的產品都是打不開的，包括QQ瀏覽器。
對于微信中有兩種方式：
一種簡單的方式就是彈窗告訴用戶讓他去瀏覽器中打開——在技術之外的辦法
還有一種方式就是應用寶
是的如果是微信就去打開你的app對應的應用寶，應用寶會去檢測你的app是否存在有則去打開，但只是去打開。
實際上騰訊的應用寶對于開發者在功能上做的比想象中的要強大，你在應用寶的微下載中配置AppLink，這個需要申請，不過貌似現在騰訊AppLink只能申請，不給通過了（需要S級應用才能用，也就是應用寶排名靠前的，客服這樣說的）。
申請了AppLink之后你只要在你的鏈接參數中帶上android_schema="myApp://"就在應用寶中打開app中的特定功能，可以參看"wifi萬能鑰匙"和"唱吧"分享出來的鏈接。比如下面的wifi萬能鑰匙的鏈接（從微信或者qq內置瀏覽器打開）：
http://a.app.qq.com/o/simple.jsp?pkgname=com.snda.wifilocating&android_schema=wkb://http://m.lifetimes.cn/wifi/doc_1_1_89824.html?newsId=7~2044111765258240%26from=singlemessage%26refer=applink_PV
簡而言之，騰訊的產品中都去借助應用寶這個平臺去執行你需要的操作。在此就不貼代碼了，只要判斷瀏覽器如果是微信或者是qq就去跳你的應用寶鏈接就行。
總結
實際上單純打開app非常簡單，目前無論安卓還是ios都能夠很好的支持scheme，當然騰訊系產品除外，實際上百度瀏覽器也會攔截scheme（我覺得真是奇了葩?。。∥⑿胚@種尚能理解，一個瀏覽器居然擅自去攔截scheme）目前對百度瀏覽器還沒有什么很好的辦法，可以嘗試是否能夠通過百度應用市場去解決。如果是希望打開app同時又要打開下載頁，那么ios9及以上就得用通用鏈接去解決，重點就是這個通用鏈接。
新聞熱點
疑難解答
