微信设置 在浏览器中打开 用于下载app单页

修改时间: 2019-02-14 0:21:00 AM

文章时间：2019年2月14日 00:18:24
解决问题：在微信内置浏览器中，点击下载，弹出提示框，提示在浏览器中打开

第一步 判断微信的ua

var ua = navigator.userAgent;
var isWeixin =  !!/MicroMessenger/i.test(ua);

第二步 引入默认的隐藏层

<a href="http://nooss.cn/test.apk" id="JdownApp">点击下载APP</a>
<a href="http://nooss.cn/test.apk" id="JdownApp2" class="btn-warn">点击下载APP2</a>
<div class="wxtip" id="JweixinTip">
<span class="wxtip-icon"></span>
<p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p>
</div>

第三步 添加css样式

.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;}
.wxtip-icon{width: 52px; height: 67px; background: url(weixin-tip.png) no-repeat; display: block; position: absolute; right: 20px; top: 20px;}
.wxtip-txt{margin-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}

第四步 点击按钮显示隐藏层，点击隐藏层关闭

function weixinTip(ele){
    var ua = navigator.userAgent;
    var isWeixin = !!/MicroMessenger/i.test(ua);
    if(isWeixin){
        ele.onclick=function(e){
            window.event? window.event.returnValue = false : e.preventDefault();
            document.getElementById('JweixinTip').style.display='block';
        }
        document.getElementById('JweixinTip').onclick=function(){
            this.style.display='none';
        }
    }
}
var btn1 = document.getElementById('JdownApp');//下载一
weixinTip(btn1);
var btn2 = document.getElementById('JdownApp2'); //下载二
weixinTip(btn2);

综合真实示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>吉士多商家平台</title>
        <style type="text/css">
            .wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;}
            .wxtip-icon{
            width: 220px; 
            height: 100%; 
            background: url(./weixin-tip.png) no-repeat; 
            background-size: 200px 200px;
            display: block; 
            position: absolute; 
            right: 40px; 
            top: 20px;
            }
            .wxtip-txt{margin-top: 150px; color: #fff; font-size: 60px; line-height: 1.5;}
        </style>
    </head>
    <body>

        <img src="./jsdsjpt.png" width="100%" border="0" usemap="#planetmap" >
        <map name="planetmap" id="planetmap">
          <area shape="rect" coords="190,1430,750,1530" alt="gisito" href="http://gisito.oss-cn-beijing.aliyuncs.com/jishiduov2.3.apk" alt="吉士多商家平台" id="JdownApp">
        </map>

        <div class="wxtip" id="JweixinTip">
        <span class="wxtip-icon"></span>
        <p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p>
        </div>

    <script type="text/javascript">
            function weixinTip(ele){
                var ua = navigator.userAgent;
                var isWeixin = !!/MicroMessenger/i.test(ua);
                if(isWeixin){
                    ele.onclick=function(e){
                        window.event? window.event.returnValue = false : e.preventDefault();
                        document.getElementById('JweixinTip').style.display='block';
                    }
                    document.getElementById('JweixinTip').onclick=function(){
                        this.style.display='none';
                    }
                }
            }
            var btn1 = document.getElementById('JdownApp');//下载一
            weixinTip(btn1);
    </script>
    </body>
</html>

添加新评论