1.0石器版
代码如下:
<template>
</template>
<script>
export default{
//…… 省略vue模版中其他的代码
methods:{
join(){
let ua = navigator.userAgent.toLowerCase();
if ( ua.match(/MicroMessenger/i) == "micromessenger" || ua.match(/QQ/i) == "qq") {
this.isShow = true; // -----> 微信或者qq 打开该页面（h5）触发的弹框 提示用原生浏览器打开
} else{
// 跳转app 或者下载链接的处理逻辑
window.location.href = 'xxxxx' // ---> app跳转链接（和原生沟通好的跳转地址）
let oldTime = +Date.now();
window.setTimeout(function(){
if(+Date.now() - oldTime > 1000){
window.location.href = 'xxxxx' ;// -----> app 下载地址（苹果跳转appstore,安卓跳转应用市场）
}
},1500)
}
}
}
}
</script>
<style>
</style>
以上代码存在的问题:
有app
- 安卓 ：浏览器中提示用户是否允许打开app 用户点击允许 即可跳转app内部 （注意： 跳转app 内部后 不再跳转 到下载链接)
- 苹果 ：浏览器中直接唤起app （注意： 跳转app之后，还会再次跳转到下载链接）
我的理解： 按照js 的执行属性 下载链接只是延迟执行 无论是有app 还是没有app 都会执行定时器中js ， 也就是说苹果的现象是正确的但是为什么安卓没有执行 情况不得而知（可能安卓客户端做了特殊性处理 有待考究……）
无app - 安卓苹果都跳转到下载链接
2.0 青铜版
补充：
Ios唤起app 的两种方式（客户端设置）
-
URL scheme
是在app内配置的链接，比如：weixin://，superclass://。URL scheme的格是[scheme]://[host]/[path]?[query]。( 我们公司客户端用的就是scheme 方式) -
universal link：
是ios9之后出的功能。它是通过传统HTTP链接来启动App。它其实就是一个https开头的链接，还要满足一些特定的规则才能被识别为universal link，才能直接唤起app。
这个配置起来比较麻烦，主要是app那边配置。具体可以看看下面参考访问地址 中有详细介绍。
实现方式 参考访问地址 ：https://www.jianshu.com/p/475b398a117d 中的具体实现部分代码；
-为了解决Ios成功跳转app 再次跳转appstore 的情况 解决办法:
代码如下：
<template>
</template>
<script>
export default{
//…… 省略vue模版中其他的代码
methods:{
join(){
let ua = navigator.userAgent.toLowerCase();
if ( ua.match(/MicroMessenger/i) == "micromessenger" || ua.match(/QQ/i) == "qq") {
this.isShow = true; // -----> 微信或者qq 打开该页面（h5）触发的弹框 提示用原生浏览器打开
} else{
// 跳转app 或者下载链接的处理逻辑
this.openApp('xxxx',this.appLink) ;// this.openApp('app跳转链接'，Function)
}
},
appLink(){
window.location.href = 'https://xxxxxxx' ;// ----> app 下载链接
},
openApp(url, callback) {
let t = 1000,hasApp = true;
setTimeout(function() {
if (!hasApp) {
callback && callback(); // ---> 没有app执行回调函数
}
}, 3000);
/**3000 表示函数延迟执行的秒数 原文献中写的是 5000 在用户没有app 的时候 跳转appstore跳转时间过长用户体验不好 ；
* 1000-2000 时 在没有app的时候也不能都跳转appstore
*（js 中有多个定时器的时候 延迟的时间 要存在时间差 不然设置定时器的意义何在（我的局限性理解 不对望指正））
* 然后我设置3000 就刚刚好满足两种情况
*/
let oldTime = +Date.now();
setTimeout(function() {
let newTime = +Date.now();
if (newTime - oldTime < t + 100) {
hasApp = false;
}
}, t);
window.location.href= url ; // -------> 函数中的形参 app 跳转链接（原生定义的链接）
},
}
}
</script>
<style>
</style>
以上代码 没有详细介绍 对ios的系统版本进行详细区分（因为我们的客户端将app 的跳转地址 统一为一个地址 我们的原生小哥哥还是很优秀的 ） 不同的平台跳转不同的地址 以上参考文档中有详细介绍
文章的末尾奉上 iOS 唤起APP之Universal Link(通用链接)的介绍 https://www.jianshu.com/p/ab50bdaec65d
注意 Universal Link 的对于H5 来说要注意的地方
- 安卓 （应用宝）
- 苹果手机 ： 通用链接 原生定义（https://开头）
微信 : 可以直接唤起app (微信解除Universal Link 禁用)
qq : 通过URL scheme 浏览器唤起 （禁用Universal Link ）
对于H5 来说只要替换原生定义的通用链接 就好
share(){
this.baseUrl = "https://a.app.qq.com/o/simple.jsp?pkgname=com.wzf.fan"; //安卓定义应用宝官方链接
if (this.isAndroid) {
window.location.href =
this.baseUrl + `&android_schema=${appUrlAndroid("xxxx")}`; //原生安卓定义协议
} else if (this.isiOS) {
let ua = navigator.userAgent.toLowerCase();
if (ua.match(/QQ/i) == "qq") {
this.isAppopen = true; //ios 对qq 提示浏览器处理
} else {
window.location.href = appUrlIOS("xxxx"); // ios 原生定义协议
}
} else {
window.location.href = "http://share.mvoicer.com/#/open";
}
}
