11.29更新项目中对微信内的处理方案及一些坑
12.3更新ios9后url scheme的坑及最终解决方案
最近遇到一个需求：如果用户安装了app，则跳app；如果用户没安装app，则跳app下载链接，这个在平常见的还蛮多的。查了一些资料，总结一下。
一、解决方案：URL scheme 或 universal link
a）URL scheme是在app内配置的链接，比如：weixin://，superclass://。
URL scheme的格式是[scheme]://[host]/[path]?[query]。
b）universal link是ios9之后出的功能。它是通过传统HTTP链接来启动App。它其实就是一个https开头的链接，还要满足一些特定的规则才能被识别为universal link，才能直接唤起app。
二、具体实现
分2种情况讨论：
1、ios8之前和android：使用scheme方案。
原理：不管是ios还是安卓，浏览器都不可能知道手机有没有装某个app，所以方法是首先通过URL scheme打开app，如果打不开，则跳转下载链接。
var timeout, t = 1000, hasApp = true;
var openScript = setTimeout(function () {
if (!hasApp) {
// 跳转下载链接
}
document.body.removeChild(ifr);
}, 2000)
var t1 = Date.now();
var ifr = document.createElement("iframe");
ifr.setAttribute('src', url);
ifr.setAttribute('style', 'display:none');
document.body.appendChild(ifr);
timeout = setTimeout(function () {
var t2 = Date.now();
if (t2 - t1 < t + 100) {
hasApp = false;
}
}, t);
之所以要用iframe打开，而不是直接跳链接，是因为如果APP唤醒失败，或者APP未安装的话，很多时候都会跳到错误页，影响用户体验。而iframe方法不会引起页面可见的变化（例如页面内容变成一个新页面），不会导致浏览器历史记录的变化。
2、ios9之后：可以使用scheme方案，也可以使用ios9的universal link方案
（1）先说scheme方案，ios9把iframe封了，所以用的是直接跳转链接
location.href = url;
setTimeout(function() {
// 跳转下载链接
}, 250);
setTimeout(function() {
location.reload();
}, 1000);
这个方案在用户安装了app的时候还没什么问题，但是如果没装app，跳转失败会先弹出错误弹窗，再弹出是否在「app store」中打开链接，见下图。
失败弹窗
如果产品能接受这种弹窗，其实也行。。下面的是封装了2个函数，实现h5跳app。
通用的URL scheme方案代码：
<script>
function detectVersion() {
let isAndroid,isIOS,isIOS9,version,
u = navigator.userAgent,
ua = u.toLowerCase();
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //android终端或者uc浏览器
//Android系统
isAndroid = true
}
if(ua.indexOf("like mac os x") > 0){
//ios
var regStr_saf = /os [\d._]*/gi ;
var verinfo = ua.match(regStr_saf) ;
version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
}
var version_str = version+"";
if(version_str != "undefined" && version_str.length >0){
version = parseInt(version)
if(version>=8){
// ios9以上
isIOS9 = true
}
else{
isIOS = true
}
}
return {isAndroid,isIOS,isIOS9}
}
// 判断手机上是否安装了app，如果安装直接打开url，如果没安装，执行callback
function openApp(url,callback) {
let {isAndroid,isIOS,isIOS9} = detectVersion()
if(isAndroid || isIOS){
var timeout, t = 4000, hasApp = true;
var openScript = setTimeout(function () {
if (!hasApp) {
callback && callback()
}
document.body.removeChild(ifr);
}, 5000)
var t1 = Date.now();
var ifr = document.createElement("iframe");
ifr.setAttribute('src', url);
ifr.setAttribute('style', 'display:none');
document.body.appendChild(ifr);
timeout = setTimeout(function () {
var t2 = Date.now();
if (t2 - t1 < t + 100) {
hasApp = false;
}
}, t);
}
if(isIOS9){
location.href = url;
setTimeout(function() {
callback && callback()
}, 250);
setTimeout(function() {
location.reload();
}, 1000);
}
}
//跳h5
function goConfirmAddr(){
window.location.href = 'http://m.gaotu100.com'
}
window.onload = function(){
openApp("superclass://home",goConfirmAddr)
}
</script>
（2）universal link
这个配置起来比较麻烦，主要是app那边配置。具体可以看看最下面的参考博客。
看了下百度知乎的方法，都是用universal link
h5的知乎有个【app打开】按钮，这个按钮就是跳转universal link链接。
a)若此时安装了app，就提示是否在app打开。可以直接跳到app
image
b)若未装app或未唤起app，跳到下载页。
image
注意看域名：oia.zhihu.com，这个就是知乎的universal link，之所以是oia开头，是因为universal link必须跨域。
参考
https://www.cnblogs.com/shadajin/p/5724117.html
http://www.cocoachina.com/ios/20170904/20463.html
https://www.jianshu.com/p/03e6b7828307
11.29更新
以上只是Demo阶段的总结，在项目过程遇到了2个问题：
一、微信内的处理方案
由于公司的app达不到微信的一些要求，所以微信浏览器内用universal link直接调起app这个方案行不通。
微信内的方案是：点击「打开app」时，弹窗一个遮罩层，提示让用户点开右上角选择在浏览器内打开。之后就简单了。
遇到的问题：ios微信浏览器内url不变化
解决方案戳ios微信浏览器内vue项目url不改变
二、一些安卓手机自带浏览器不能唤起app
原因：经反复测试之后发现，在手机自带浏览器内，某个网址第一次尝试打开app时，会有个是否打开某app的选择弹窗，浏览器会记住用户的选择。如用户选择「打开」，之后每次都不出现选择弹窗，每次直接跳转app；如果用户选择「取消」，之后该网站就再也不出现是否打开某app的选择弹窗，所以就调不起app，除非用户在设置内清除浏览器的数据。
暂时只在小米手机浏览器内发现这个问题，qq浏览器都好使，暂时没找到好的解决办法。
12.3更新
测试阶段自己点出了一个bug，ios9后用url scheme会出现一个偶发bug。
bug具体描述：前面我们知道，当用户没装app时，尝试打开app时会出现一个错误弹窗【safari打不开该网页，因为网址无效】。理论上说，点击「好」确认弹窗后，应该弹出【是否在app store打开】弹窗。（是否在app store中打开是因为配置了''window.location.href = 'https://itunes.apple.com/cn/app/id**********' "）
但是！！！！！！！！！！！！！！！！！！！！
当快速点击确认错误弹窗时，页面并不会弹出【是否在app store打开】弹窗，此时地址栏闪一下itunes的地址，之后尝试打开app，都是错误弹窗，再也调不起【是否在app store打开】弹窗。
然后看了下同样是使用url scheme方案的淘宝，他们的方案是错误弹窗后，跳转到自己内部的下载页，然后一进入下载页时就会弹出【是否在app store打开】弹窗，这样就不会出现上面的问题。
最后和产品商量，解决方案是跳到内部下载页，和淘宝一样。
12.7更新
看头条的这个功能时，发现了ios里一个好玩的东西Smart App Banners
网友评论