手機瀏覽器通過Scheme跳轉APP，兼容各種手機瀏覽器

一個比較完整的產品線，必定有APP和網站，另外還有微信公眾號網頁和小程式。

那麼有一個比較常見的需求就是在手機瀏覽器內打開APP，實現起來也比較 ... 手機瀏覽器通過Scheme跳轉APP，兼容各種手機瀏覽器 2021年4月2日 筆記 Scheme,手機瀏覽器,網頁,跳轉APP 　　一個比較完整的產品線，必定有APP和網站，另外還有微信公眾號網頁和小程式。

那麼有一個比較常見的需求就是在手機瀏覽器內打開APP，實現起來也比較簡單，只要APP配置的有URLScheme即可。

但是因為無法判斷是否安裝APP，所有隻能嘗試去打開APP，如果打不開則跳轉到APP下載頁面。

另外手機瀏覽器的類型很多，各個瀏覽器顯示的效果也不一樣，一直無法找到一個完全兼容所有瀏覽器的方法，沒有完美的解決方案。

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

　　打開APP失敗時跳轉到下載，因為無法判斷打開是否成功，所以通過setTimeout兩秒後跳轉下載地址。

下載地址ios：//itunes.apple.com/cn/app/要跳轉的APP的appid，Android下載地址自定義即可，放到自己的伺服器地址上邊，瀏覽器打開.apk地址自動提示下載。

測試了流行的幾個手機瀏覽器，總結一下需要注意以下幾點： 　　1.微信公眾號網頁打開APP，微信已經開放了介面，在微信開放平台配置域名程式碼裡面添加按鈕後即可跳轉，小程式打開APP也有相關文檔說明。

//developers.weixin.qq.com/doc/oplatform/Mobile_App/Resource_Center_Homepage.html 　　2.Android下的Google瀏覽器無法通過iframe的方式打開，必需使用location.href。

　　3.手機百度瀏覽器不支援打開APP，這個是百度自己的問題，不允許打開APP。

另外百度瀏覽器中頁面的按鈕文字含有「下載」或「打開」的時候，按鈕會被百度給隱藏掉（好霸道），所以只能換下文字或者加空格「下載」「打開」。

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

最終實現的方式如下： 1.通過js判斷瀏覽器類型 　　varNavigator=navigator.userAgent; 　　varifChrome=Navigator.match(/Chrome/i)!=null&&Navigator.match(/Version\/\d+\.\d+(\.\d+)?\sChrome\//i)==null?true:false;//判斷是不是Google瀏覽器 　　varifAndroid=(Navigator.match(/(Android);?[\s\/]+([\d.]+)?/))?true:false;//判斷是不是Android 　　varifIos=/(iPhone|iPad|iPod|iOS)/i.test(Navigator);//判斷是不是ios 　　varifUCorBaidu=/(UCBrowser|baiduboxapp)/i.test(Navigator);//判斷是不是UC或百度瀏覽器 　　varopenUrl=“scheme://”; 　　varandroidDownUrl=“//xxx/1.0.0.apk”; 　　variosDownUrl=“//itunes.apple.com/cn/app/要跳轉的APP的appid”; 2.分別操作 {{text}} if(ifUCorBaidu){ 　　this.text=‘點擊下載APP’; }else{ 　　this.text=‘正在跳轉中’; 　　openApp(); }//這裡使用了vue，也可以用其他方式修改按鈕文字 functionopenApp(){ window.onblur=function(){ 　　if(myTimeout){　　　　clearTimeout(myTimeout);　　}};//onblur可以檢測到頁面消失，這時候一般已經打開了APP，就清除掉下載定時器，不跳出下載鏈接。

if(ifIos){　　if(ifUCorBaidu){　　　　window.location.href=iosDownUrl;//ios跳到AppStore也可以打開APP，所以直接打開就好了。

　　}else{　　　　window.location.href=openUrl;　　　　varmyTimeout=setTimeout(function(){　　　　　　window.location.href=iosDownUrl;　　　　},1000);　　} else{ 　　　　if(ifChrome&&ifAndroid){　　　　　　setTimeout(function(){　　　　　　　　window.location.href=openUrl;　　　　　　},50)　　　　}else{　　　　　　document.querySelector(“#myDown”).src=openUrl;　　　　}　　　　varloadDateTime=Date.now();　　　　setTimeout(function(){　　　　　　varmyTimeout=setTimeout(function(){　　　　　　vartimeOutDateTime=Date.now();　　　　　　if(loadDateTime&&(timeOutDateTime–loadDateTime)