H5頁面調起第三方App

在H5頁面或許app的webview中調起第三方app

調起app是操縱體系(iOS、Android)的機制，在h5頁面，我們能夠做的不多。

在調起之前，h5頁面沒法推斷當前手機是不是裝置了對應的app，我們只能去嘗試調起，而且用一些要領來處置懲罰沒有調起的狀況。

調起的道理就不引見了，網上一搜一大堆。直接上中心代碼。

if(iOS9) {
window.location.href = ${universalLink};
}
else {
var ifr = document.createElement('iframe');
ifr.src = ${scheme};
ifr.style.display = 'none';
document.body.appendChild(ifr);
window.setTimeout(function () {
document.body.removeChild(ifr);
}, 300);
}
舉個栗子：
${universalLink} = 'http://myapp.com'
${scheme} = 'myapp://index'

解釋一下上面的代碼，假如是iOS9及以上的iOS體系，直接跳轉到調起app的universal link。假如是安卓或許iOS9一下的iOS體系，就新建一個iframe，把這個iframe的src弄成調起app的scheme，然後把這個iframe直接塞到頁面的DOM樹上，然後『聽其天然』就行。

iOS是運用universalLink(下面簡稱ulink)的體式格局來舉行調起。詳細體系內部的機制就不說了，網上一堆文章，隨意搜一下就行。

universalLink實在就是一個平常的http請求的url。我們在h5頁面運用 location.href=XX舉行調起的時刻，假如說調起勝利了，那末實在這個url是不會被接見的，抓包也抓不到。換句話說，假如我們接見到這個url了，申明我們的調起失利了。

iOS怎樣完成【裝置了調起，沒有裝置跳下載頁】

上面說了，iOS下調起失利后，會接見到一個url。要完成沒有安轉跳下載頁，那末就直接把ulink對應的鏈接做成下載頁就好了。依據需求，我們還能夠將ulink對應的url做成任何頁面。然則，假如我們不想要跳轉到這個頁面，照樣想停留在之前的頁面呢？很簡單，叫RD哥哥在通鏈誰人url的效勞端加一個302重定向效勞就行。

舉個栗子，我們運用下面的ulink來調起App。

http://myapp.com/index?target=encodeURIComponent('http://www.baidu.com');

調起失利后，上面誰人ulink會被閱讀器接見到，我們在效勞端加了重定向效勞，我們最終會接見到target對應的地點，即 http://www.baidu.com 。如許，我們就完成了【調起失利時，跳轉到本身想要的頁面】。

iOS怎樣完成【裝置了調起，沒有裝置時，在當前頁面繼續舉行其他操縱】

兩種要領：

一、須要後端重定向效勞，我們只須要把上面重定向的鏈接換成一個scheme就好了。這類要領適用於頁面必需要用戶點擊才觸發的交互，比方視頻、音頻的播放等。（另：微信下能夠經由過程監聽jsbridge ready的事宜，自動播放視頻、音頻）

這個scheme須要滿足以下的請求：

• 能夠被當前閱讀器辨認
• 閱讀器辨認了這個scheme，然則不會舉行任何其他操縱。

假如這個scheme同時滿足了上述兩個前提，那末體驗就是最好的。不然，能夠就會湧現閱讀器彈框等題目。

舉幾個scheme的例子

...
facetime:// （iOS11以下體驗圓滿，以後的版本會直接拉起facetime--）
ucbrowser://
...

二、須要後端重定向效勞，我們須要把重定向鏈接換成【當前鏈接后加一個特別參數】的鏈接。如許在前端代碼里就可以夠推斷url內里的特別參數，從而得知當前頁面是拉起app失利時進入的。

iOS調起的注意事項

• 2018年終，iOS微信下周全封禁了universalLink，所以在微信下是調不起app的，臨時是沒有什麼方法。這類時刻，平常能夠提醒用戶，從閱讀器翻開。固然，也能夠找微信開白名單，直接用微信的才能去拉起。
• 實在iOS下用scheme也是能夠調起的，比方
  window.location.href = scheme
  然則如許有個題目，假如說沒有裝置對應的app，在safari下會彈窗：沒法辨認該鏈接，而且就算裝置了該app，也會彈一個窗讓你確認是不是調起 。
• 雖然說iOS的通鏈是一個url，然則也不是直接粘貼到safari等閱讀器下接見就可以直接調起app。因為iOS的通鏈調起必需請求有用戶操縱，比方點擊等行動。能夠將鏈接粘貼到iOS的備忘錄上，點擊這個鏈接就可以夠直接調起了。

安卓的調起是用iframe的體式格局(實在如今的高版本安卓也能夠直接window.location.href=scheme)。

安卓調起的最大的特性就是，安卓沒法曉得是不是勝利調起了app。安卓下的調起平常都邑有自帶的兜底戰略，比方下載。代碼也很簡單

var ifr = document.createElement('iframe');
ifr.src = ${scheme};
ifr.style.display = 'none';
document.body.appendChild(ifr);
window.setTimeout(function () {
document.body.removeChild(ifr);
// 這裏寫兜底戰略的邏輯，比方下載。
// 固然，也能夠不加任何的兜底戰略，調不起就算了。
window.location.href = ${下載地點}
}, 300);

假如想要完成【裝置了app調起，沒有裝置app下載】的功用，那末肯定會調起和下載的邏輯同時實行，因為安卓沒法曉得是不是勝利調起app。

安卓的調起是很天真的，你能夠恣意掌握兜底戰略的邏輯，想幹嗎幹嗎。只是說，兜底戰略是險些肯定會實行的，不論你調起勝利照樣失利。

Android調起注意事項

種種閱讀器的屏障

許多閱讀器都對scheme做了屏障。所以安卓下調不起app是一件非常平常的事變。

微信下調起

微信太關閉了，天然屏障了非自家app的調起。只新建一個iframe的體式格局在微信下是不能調起的。微信針對webview調起app的戰略也一直在修正。最新(2018年3月19日)的想要在微信的webview下調起app的體式格局是：

• 手機上必需裝置運用寶
• 運用下面的體式格局，跳轉到運用寶頁面舉行調起。

window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=${pkgname}&android_scheme= encodeURIComponent(${scheme})' ${pkgname}示意app的包名，比方 'com.myapp'，${scheme}示意調起的scheme

安卓下推斷是不是調起勝利

實在有一種要領能夠推斷安卓下是不是調起勝利。實行調起邏輯后，設肯定的延時推斷當前頁面是不是可見，若不可見了，險些就可以夠肯定是調起勝利了。然則只對小部分閱讀器有用(比方安卓下的chrome)。對大多數閱讀器而言，調起勝利后，會有一個彈框，須要用戶點擊肯定后，才喚起app。因為這個彈框的存在，就沒法經由過程頁面是不是可見的要領來推斷調起勝利與否了。而chrome下，調起勝利直接喚起app，是不會彈窗的，所以chrome下能夠用延時+頁面是不是可見的體式格局來推斷調起勝利與否。

迎接關注我的民眾號，這裏只要幹活，相符預期