手機瀏覽器經過Scheme跳轉APP，兼容各類手機瀏覽器

　　一個比較完整的產品線，一定有APP和網站，另外還有微信公衆號網頁和小程序。那麼有一個比較常見的需求就是在手機瀏覽器內打開APP，實現起來也比較簡單，只要APP配置的有URLScheme便可。可是由於沒法判斷是否安裝APP，全部只能嘗試去打開APP，若是打不開則跳轉到APP下載頁面。另外手機瀏覽器的類型不少，各個瀏覽器顯示的效果也不同，一直沒法找到一個徹底兼容全部瀏覽器的方法，沒有完美的解決方案。

　　打開APP的操做就是連接打開 location.href = "scheme://"，APP未安裝的時候連接打開有的時候會跳轉到錯誤頁面，因此可使用iframe來跳轉，保證瀏覽器連接一直在當前頁面 document.querySelector("#iframeId").src = "scheme://"，打開APP大部分手機瀏覽器會彈窗是否容許跳轉打開。

　　打開APP失敗時跳轉到下載，由於沒法判斷打開是否成功，因此經過setTimeout兩秒後跳轉下載地址。下載地址ios：https://itunes.apple.com/cn/app/要跳轉的APP的appid，安卓下載地址自定義便可，放到本身的服務器地址上邊，瀏覽器打開.apk地址自動提示下載。

測試了流行的幾個手機瀏覽器，總結一下須要注意如下幾點：

　　1. 微信公衆號網頁打開APP，微信已經開放了接口，在微信開放平臺配置域名代碼裏面添加按鈕後便可跳轉，小程序打開APP也有相關文檔說明。https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Resource_Center_Homepage.html

　　2. 安卓下的谷歌瀏覽器沒法經過iframe的方式打開，必需使用location.href。

　　3. 手機百度瀏覽器不支持打開APP，這個是百度本身的問題，不容許打開APP。另外百度瀏覽器中頁面的按鈕文字含有「下載」或「打開」的時候，按鈕會被百度給隱藏掉（好霸道），因此只能換下文字或者加空格「下 載」「打 開」。

　　4. UC瀏覽器頁面初始化後直接經過js打開APP打開不了，須要點擊實際的按鈕觸發打開。

最終實現的方式以下：

1. 經過js判斷瀏覽器類型

　　var Navigator = navigator.userAgent;

　　var ifChrome = Navigator.match(/Chrome/i) != null && Navigator.match(/Version\/\d+\.\d+(\.\d+)?\sChrome\//i) == null ? true : false; //判斷是否是谷歌瀏覽器

　　var ifAndroid = (Navigator.match(/(Android);?[\s\/]+([\d.]+)?/)) ? true : false; //判斷是否是安卓

　　var ifIos = /(iPhone|iPad|iPod|iOS)/i.test(Navigator); //判斷是否是ios

　　var ifUCorBaidu = /(UCBrowser|baiduboxapp)/i.test(Navigator); //判斷是否是UC或百度瀏覽器

　　var openUrl = "scheme://";

　　var androidDownUrl = "https://xxx/1.0.0.apk";

　　var iosDownUrl = "https://itunes.apple.com/cn/app/要跳轉的APP的appid";

2. 分別操做

<div class="buttons" @click="openApp">{{text}}</div>

<iframe id="myDown" style="width: 1px;height: 1px;position: absolute;z-index: -1;top:10px"></iframe>

if(ifUCorBaidu) {

　　this.text = '點 擊 下 載 APP';

} else {

　　this.text = '正在跳轉中';

　　openApp();

} //這裏使用了vue，也能夠用其餘方式修改按鈕文字

function openApp() {

window.onblur = function() {

　　if(myTimeout) {
　　　　clearTimeout(myTimeout);
　　}
}; //onblur能夠檢測到頁面消失，這時候通常已經打開了APP，就清除掉下載定時器，不跳出下載連接。

if (ifIos) {
　　if(ifUCorBaidu) {
　　　　window.location.href = iosDownUrl; //ios跳到App Store也能夠打開APP，因此直接打開就行了。
　　} else {
　　　　window.location.href = openUrl;
　　　　var myTimeout = setTimeout(function () {
　　　　　　window.location.href = iosDownUrl;
　　　　}, 1000);
　　} else{

　　　　if(ifChrome && ifAndroid) {
　　　　　　setTimeout(function() {
　　　　　　　　window.location.href = openUrl;
　　　　　　}, 50)
　　　　} else {
　　　　　　document.querySelector("#myDown").src = openUrl;
　　　　}
　　　　var loadDateTime = Date.now();
　　　　setTimeout(function() {
　　　　　　var myTimeout = setTimeout(function() {
　　　　　　var timeOutDateTime = Date.now();
　　　　　　if (loadDateTime && (timeOutDateTime - loadDateTime) < (1500 + 200)) {
　　　　　　　　　　window.location.href = androidDownUrl
　　　　　　　　} //這裏的操做跟直接setTimeout是同樣的
　　　　　　}, 1500);
　　　　}, 100)
　　}

}

}

通過測試 百度瀏覽器，QQ瀏覽器，UC瀏覽器，360瀏覽器，搜狗瀏覽器，夸克瀏覽器，Safari瀏覽器效果都還算理想。

歡迎討論，若是有更完美的方案能夠告訴我以完善代碼。