前端页面嵌入二维码，微信扫出现"请点击右上角，选择"在浏览器中打开"的解决方法

现在手机微信上扫码比较多，但是微信内置的浏览器相对而言会有拦截，会提醒用户 " “请点击右上角，选择"在浏览器中打开” "打开的字样，但具体怎么实现，之前查过网上给的代码，但基本给的不是很全，但是不知道怎么去实现这个效果，今天在这里给大家说明一下怎么实现，首先要在微信扫的时候出现字样，就得先判断是否是在微信内置浏览器，在进行下一步判断。我们先可以设计一下网页的样式，我参照了一个网页来做的，里面的内容基本和其他差不多，是那种比较简洁那种，直接看代码吧：
html代码：

 <div class="template-2  template-wrap">
        <div class="t-bg-2"></div>
        <div class="container">
            <div class="content">
                <div class="template-common">
                    <div class="t-icon">
                        <img src="这里面可填写相对路径，可填写服务器端路径">
                    </div>
                    <div class="t-name">
                        <div class="tit">这里填写apk的名字</div>
                        <div class="name-info pc-pwd">
                            <span>填写apk的版本号</span>
                            <span>填写apk的大小</span>
                        </div>
                    </div>
                    <div class="template-btn-wrap">
                        <a href="填写apk的下载链接地址"
                        link="填写apk的下载链接地址"
                        class="ms-btn template-btn clearfix pc-pwd down_load">
                            <span clsss="f1">下载安装</span>
                        </a>
                    </div>
                    <!-- <div class="t-name">
                        <div class="name-info pc-pwd">
                            <span>(微信扫码后，请点击右上角选择在浏览器中打开)</span>
                            <span></span>
                        </div>
                    </div> -->这一段可出现，可不出现，看个人习惯
                    <div class="t-icon1 t-icon-img">
                        <img src="这里面可填写相对路径，可填写服务器端路径">
                    </div>
                </div>
            </div>
        </div>
    </div>

css代码：

 *{margin: 0;padding: 0;}
        body,html{width: 100%;}
        a{text-decoration: none;}
        .t-bg-2{width: 100%;height: 130px;background: #2698ff;}
        @media (min-width: 1700px){
          .container {
            width: 1700px;
          }
        }   // 适应不同的页面
        @media (min-width: 1170px){
         .container {
            padding-left: 0;
            padding-right: 0;
          }
        }//适应不同的页面
        .template-2 .content {
            margin-top: -90px;
        }
        .content {
            padding-top: 40px;
            padding-bottom: 40px;
        }
        .template-common .t-icon {
            background-color: #fff;
            width: 170px;
            height: 170px;
            border-radius: 25px;
            box-shadow: 0 0 10px rgba(0,0,0,.2);
            display: flex;  //弹性和布局，适应手机端页面,同时适应pc端页面
            align-items: center;
            margin: 0 auto;
        }
        .template-common .t-icon img {
            width: 120px;
            height: 120px;
            border-radius: 30px;
            border: 1px solid #e5e5e5;
            margin: 0 auto;
        }
        .template-common .t-icon1{
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            margin: 0 auto;
        }
        .template-common .t-icon1 img{
            margin: 0 auto;
            width:140px;
            height: 140px;
            border: 1px solid #e5e5e5;
        }
        .template-common .t-name {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
            margin-top: 20px;
        }
        .template-common .t-name .tit {
            font-size: 20px;
            margin-bottom: 5px;
            margin-top: 10px;
        }
        .template-common .t-name .name-info{
          margin-bottom: 20px;
          margin-top: 10px;
        }
        .template-common .t-name .name-info span {
            margin-right: 10px;
            color: #666;
            font-size: 13px;
        }
        .template-common .template-btn-wrap {
            text-align: center;
            margin-bottom: 20px;
        }
        .template-common .template-btn {
            color: #fff;
            background-color: #157df1;
            height: 40px;
            padding: 0 38px;
            line-height: 40px;
            font-size: 18px;
            display: inline-block;
            border-radius: 30px;
        }
        .fl {
            float: left;
            _display: inline;
            *zoom: 1;
        }
        img{
	        max-width: 100%; 
	        height: auto;
        }

出现的效果如下：

上面的html,css代码可以做到手机，pc,等页面自适应，都是处于居中的状态，大家可去尝试一下。
接下来就是实现在微信扫描的时候出现一个弹窗，出现"请点击右上角，选择"在浏览器中打开" " 的字样，我所写的是纯jQuery来写的：
代码如下：

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
//引入jQuery版本
function is_weixin() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
    } else {
        return false;
    }
}// 这个实现是否是在微信打开的，如果是返回true，如果不是，返回false
$(function(){
    var isWeixin = is_weixin();//调用is_weixin函数；获取到值
    var winHeight = typeof window.innerHeight != 'undefined' ?
    window.innerHeight : document.documentElement.clientHeight;
    var weixinTip = $('<div id="weixinTip"><div class="test"><p>请点击右上角,选择"在浏览器中打开"</p><img src="这里可填写相对路径，可填写绝对路径"/></div></div>');
    if(isWeixin){
        $("body").append(weixinTip);
    }
    $("#weixinTip").css({
        "position":"fixed",
        "left":"0",
        "top":"0",
        "height":winHeight,
        "width":"100%",
        "z-index":"1000",
        "background-color":"rgba(0,0,0,0.8)",
        "filter":"alpha(opacity=80)",
        "float":"left"
    });
    $("#weixinTip div p").css({
        "text-align":"right",
        "width":"85%",
        "margin-top":"10%",
        "color":"#fff",
    });
    $("#weixinTip div").css({
        "display":"flex",
        "justify-content": "space-around",
        "align-items":"center",
        "padding-left":"4%",
        "padding-right":"4%"

    })
    $("#weixinTip div img").css({
        "text-align":"left",
        "width":"7%",
        "height":"7%",
        "margin-top":"7%",
        "padding-left":"4%",
        "padding-right":"4%"
    })
})

这样基本就可以实现微信扫的时候出现弹窗的问题，基本代码就是如此，有需要可以试试。