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

2024-03-27 09:05| 来源: 网络整理| 查看: 265

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

这里填写apk的名字填写apk的版本号填写apk的大小下载安装这一段可出现，可不出现，看个人习惯

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来写的：代码如下：

//引入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 = $('

请点击右上角,选择"在浏览器中打开"

'); 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%" }) })

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

【本文地址】

公司简介

联系我们