现在好多的app应用都有对应的h5页面，那么h5和app直接是如何交互的呢？ 这里使用的是Scheme协议。
什么是URL Scheme？
android中的scheme是一种页面内跳转协议，是一种非常好的实现机制，通过定义自己的scheme协议，可以非常方便跳转app中的各个页面。
Scheme链接格式样式？
样式：[scheme]：//[host]/[path]?[query]
URL Scheme使用场景介绍
URL Scheme使用场景，目前1，2，5使用场景很广，有没有一种熟悉的感觉？
1.通过小程序，利用Scheme协议打开原生app
2.H5页面点击锚点，根据锚点具体跳转路径APP端跳转具体的页面
3.APP端收到服务器端下发的PUSH通知栏消息，根据消息的点击跳转路径跳转相关页面
4.APP根据URL跳转到另外一个APP指定页面
5.通过短信息中的url打开原生app
业务逻辑：点击按钮，当已经安装了app则调起，否则跳转到安卓下载或者App store下载页面（普通浏览器兼容，微信有限制，只能每次跳转下载页）
1.实现步骤一
先通过浏览器的User-Agent来判断是否为微信或则其它APP浏览器，如果是则引导外置浏览器打开：
相关代码：
/**
* 判断浏览器是否为头部APP
*/
isBlackApp() {
var u = navigator.userAgent.toLowerCase();
return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf('mqqbrowser') > -1;
}
上面的函数判断了几种浏览器，微信、微博、QQ、QQ浏览器。如果点击打开或则下载按钮时就判断是否为头部APP，如果是则提示在浏览器打开否则直接打开自己的APP即可，代码如下：
openTuer() {
if (isBlackApp()) {
// 头部APP让网页显示提示在浏览器中打开
} else {
// 不是头部APP就直接打开
openApp();
}
}
唤醒app的方法：
openApp() {
//这里需要有个安卓和ios平台的判断分别取不同的SchemeURL
jumpApp("你的Scheme地址"); //此函数负责打开APP的,scheme协议地址由安卓端跟ios端提供
noApp();//此函数负责如果没有打开APP或没有安装APP时跳转的地址处理
}
jumpApp的实现
这个函数的实现要注意iOS8之前是可以使用iframe来实现的，但是之后的就不行了，被苹果屏蔽了，所以只能通过页面跳转了，具体代码如下：
jumpApp(t) {
try {
var e = navigator.userAgent.toLowerCase(),
n = e.match(/cpu iphone os (.*?) like mac os/);
if (((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)) {
window.location.href = t;
} else {
var r = document.createElement("iframe");
(r.src = t), (r.style.display = "none"), document.body.appendChild(r);
}
} catch (e) {
window.location.href = t;
}
}
noApp的实现
noApp的实现也很简单就是定义一个定时器，如果在某个时间段内没啥反应就跳转到指定的下载页面即可。具体代码如下：
var timer = null;
noApp() {
//这里需要有个安卓和ios平台的判断分别取不同的下载地址
var t = Date.now(),r = "你的app下载地址";
timer = setTimeout(function() {
return Date.now() - t > 2200
? (clearTimeout(timer), !1)
: !document.webkitHidden && !document.hidden && void (location.href = r);
}, 2000);
}
源代码：
<script>
export default {
name: "sharePage",
data() {
return {
isIos: false,
isAndroid: false,
schemeUrl:'',
downloadUrl:'',
};
},
created() {
var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isAndroid) {
this.isAndroid = true;
this.schemeUrl= '你的androidSchemeUrl';
this.downloadUrl = '你的安卓app下载地址';
}
if (isIOS) {
this.isIos = true;
this.schemeUrl= '你的iosSchemeUrl';
this.downloadUrl = '你的iosapp下载地址';
}
},
mounted() {
if (!this.isBlackApp()) {
this.openTuer();
} else {
//显示手动打开外置浏览器提示
}
},
methods: {
isBlackApp() {
var u = navigator.userAgent.toLowerCase();
return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 ||u.indexOf('mqqbrowser') > -1;
},
// 点击打开app
openTuer() {
if (JSON.parse(sessionStorage.getItem("vuex"))) {
this.$options.methods.jumpApp(this.SchemeUrl+'拼接参数');
this.$options.methods.noApp();
} else {
this.$options.methods.jumpApp(this.SchemeUrl);
this.$options.methods.noApp();
}
},
// 跳转打开app
jumpApp(t) {
try {
var e = navigator.userAgent.toLowerCase(),
n = e.match(/cpu iphone os (.*?) like mac os/);
if (
((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)
) {
window.location.href = t;
} else {
var r = document.createElement("iframe");
(r.src = t), (r.style.display = "none"), document.body.appendChild(r);
}
} catch (e) {
window.location.href = t;
}
},
// 无响应或者没安装跳转下载
noApp() {
var t = Date.now(),
r = this.downloadUrl;
this.timer = setTimeout(function() {
return Date.now() - t > 2200
? (clearTimeout(this.timer), !1)
: !document.webkitHidden &&
!document.hidden &&
void (location.href = r);
}, 2000);
},
}
};
</script>