前几天需要写一个功能,安卓手机扫描二维码后,提示打开浏览器,用户打开浏览器后进行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-width: 100%;
        height: auto;
    }
    .drawDownAppText {
        height: 100vh;
        max-width: 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); width: 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>