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

  • 2019 年 11 月 8 日
  • 笔记

文章时间：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>

VirMach 便宜 VPS

QNews

QNews