【HTML】- 微信扫描打开app下载提示用户打开浏览器进行下载

1.介绍

       将打包好的apk文件部署到服务器，把下载页面的URL通过草料二维码或根据url代码生成一个二维码，由于微信对apk文件经行了屏蔽，所以需要提示用户微信内无法下载，请点击左上角按钮，选择在浏览器中打开进行下载等提示。那么该如何判断用户是否是用微信浏览器呢？

       我们知道 js 可以通过 window.navigator.userAgent 来获取浏览器的相关信息，比如：Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36，那么我们也可以通过该方法来获取微信内置浏览器的相关信息：Mozilla/5.0 (iPhone; CPU iPhone
OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11d201 MicroMessenger/5.3。根据关键字 MicroMessenger 来判断是否是微信内置的浏览器。

       如果是微信中打开，遮罩显示，并提示用户在浏览器中打开进行下载，若是在浏览器中打开，不显示遮罩。

2.实现

2.1 html

<div id="box">
        <div id="pic">
            <img src="image/qr.png" alt="qr">
            <div id="title">
                <h2>魔镜趣游</h2>
                <h3>v1.0.0</h3>
            </div>
            <div id="introduce">
                <p>手机自助旅游导航软件</p>
                <p>以手绘的形式，展现旅游地图</p>
                <p>通过App了解景区，使旅游变得更加简单快乐</p>
            </div>
        </div>
        <div id="loading">
            <a id='load_android' href="http://zphxl.tunnel.qydev.com/app/app-release.apk">Android 下载</a>
            <a id='load_ios' href="javascript:;">ios 立即下载</a>
        </div>
        <div id="shade" style="display: none">
            <p>在微信中无法下载app,<br>请打开左上角按钮选择<span>【在浏览器打开】</span>进行下载</p>
            <img id='img' src="image/3.png" alt="pic">
        </div>
</div>

2.2 css

<style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #222222;
        }
        html , body{
            height: 100%;
            width: 100%;
            /*只显示一屏页面*/
            /*overflow: hidden;*/
        }
        #box{
            position: relative;
            height: 100%;
            width: 100%;
        }
        #loading{
            text-align: center;
            position: absolute;
            bottom: 120px;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
        }
        #loading a{
            color: #444444;
            display: inline-block;
            border: 1px solid #cccccc;
            width: 500px;
            height: 70px;
            line-height: 70px;
            padding: 20px 20px 20px 50px;
            border-radius: 15px;
            font-size: 40px;
            text-decoration: none;
            box-shadow: 1px 1px 1px #ccc;
        }
        #loading #load_android{
            background: url("image/android.png") no-repeat #5FD6FF 50px 15px;
        }
        #loading #load_ios{
            margin-top: 70px;
            background: url("image/ios.png") no-repeat #5FD6FF 50px 15px;
        }
        #pic{
            text-align: center;
            position: absolute;
            width: 100%;
        }
        #pic img{
            width: 400px;
            height: 400px;
            margin-top: 100px;
            padding: 10px 10px 10px 10px;
            border: 1px solid #444444;
            border-radius: 15px;
        }
        #shade{
            position: relative;
            /*水平居中*/
            text-align: center;
            width: 100%;
            height: 100%;
            background-color:rgba(0,0,0,0.5);
        }
        #shade p{
            position: absolute;
            color: white;
            font-size: 40px;
            text-align: center;
            top:50%;
            width: 100%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
        }
        #shade p span{
            color:#5FD6FF;
        }
        #title{
            width: 100%;
            margin-top: 15px;
        }
        #title h2,h3{
            text-align: center;
            width: 100%;
            font-family: "Adobe 楷体 Std R";
        }
        #title h2{
            font-size: 40px;
        }
        #title h3{
            font-size: 35px;
        }
        #img{
            position: absolute;
            display: block;
            right: 0;
            top:0;
        }
        #introduce{
            margin-top: 60px;
        }
        #introduce p{
            margin-bottom: 15px;
            font-size: 32px;
            color: #1c0c0f;
        }
    </style>

2.3 javascript

<script type="text/javascript">
    window.onload = function(){
        if(isWeiXin()){
            var shade = document.getElementById('shade')
            shade.style.display = 'block'
        }
    }
    function isWeiXin(){
        var ua = window.navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
        }else{
            return false;
        }
    }
</script>

3.效果

效果显示