手机浏览器经过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浏览器效果都还算理想。

欢迎讨论，若是有更完美的方案能够告诉我以完善代码。