前几天需要写一个功能，安卓手机扫描二维码后，提示打开浏览器，用户打开浏览器后进行apk文件下载。
先是需要判断是否是移动端，再判断是浏览器扫描，还是微信、支付宝、QQ等的扫一扫。以下是判断方法：
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(/sQQ/i) == " qq", //是否QQ
alipay: u.match(/Alipayclient/i) == "Alipayclient" //是否支付宝
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
};
if(browser.versions.weixin || browser.versions.alipay){
}
// 判断是否为移动端，其他同理。
if (browser.versions.mobile || browser.versions.android || browser.versions.ios) {
console.info("移动端");
// window.location.href = "app/index.html";
} else {
console.info("非移动端");
// window.location.href = "index.html";
}
工作中要用vue实现，网上的例子不多。我的办法是先把app应用用下边的办法生成二维码。底下的代码包含了上文提到的打开浏览器的提示。（代码一份，自己给它加个参数传进来就行）。二维码放服务器里，再读取。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://xxx/vue.min.js"></script>
<script src="https://x/index.js"><xx/script>
<link rel="stylesheet" href="https://xxx/index.css">
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
max- 100%;
height: auto;
}
.drawDownAppText {
height: 100vh;
max- 100vw;
font-size: 32px;
text-align: center;
padding-top: 20%;
}
.drawDownAppText a {
text-decoration: none;
}
#weixin-tip {position: fixed; left:0; top:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80); 100%; height:100%; z-index: 100;}
#weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}
</style>
<body>
<div id="app">
<div class="drawDownAppText">
<span @click="download" style="font-size: 16px;cursor: pointer;text-align: center">若没有弹出下载，请点击此处...</span>
</div>
<div></div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
tip:false,
address:'',
name:''
}
},
watch:{
},
created(){
//格式：https://xxxx/QRcode.html?url=https://xxxx（app/文件地址)&name=xxx(参数）
var reg=/(?<==).+(?=&)/
let url=window.location.href.match(reg)[0]
let name=window.location.href.split('name=')
this.address=url
this.name=name[1]
//修改网页title
document.title =decodeURIComponent(this.name)
this.is_weixin(); /判断是不是微信扫码
},
mounted(){
},
updated(){
this.is_weixin();
},
methods: {
download(){
window.open(this.address)
},
is_weixin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger" || ua.match(/alipayclient/i) == "alipayclient" || ua.match(/sQQ/i) == " qq" ||ua.indexOf('iPad') > -1) { //这里判断了微信、支付宝、qq等，按需判断就行
this.loadHtml() //是，就加载提示
} else {
window.open(this.address) 不是即可直接下载。
}
},
loadHtml() {
var div = document.createElement('div');
div.id = 'weixin-tip';
div.innerHTML = '<p><img src="https://xxxx/live_weixin.png" alt="微信打开"/></p>'; //提示图片在最下方，忘了从哪里拿来的了。
document.body.appendChild(div);
}
}
})
</script>
</body>
</html>
