一個比較完整的產品線，必定有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瀏覽器效果都還算理想。
歡迎討論，如果有更完美的方案可以告訴我以完善程式碼。