admin 发表于 2018-1-30 13:11:18

微信下载引导

微信内置浏览器内不允许直接下载文件。
如果是下载应用的话,可以上架到应用宝;不是应用的话 就需要做个提示,提示用户用浏览器打开。
代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>微信下载引导</title>
<style type="text/css">
/*演示用,请勿引入项目中*/
*{margin:0; padding: 0;}
body{font:normal 14px/1.5 Arial,Microsoft Yahei; color:#333;}
.example{padding: 20px;}
.example p{margin: 20px 0;}
a{display: inline-block; background: #61B3E6; color:#fff; padding: 0 10px; border-radius: 4px; text-align: center; margin: 0 5px; line-height: 22px; font-size: 14px; text-decoration: none;}
a.btn-warn{background: #F0AD4E;}
a:hover{opacity: 0.8;}
/*核心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('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAABDCAYAAADTXyaSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABGFJREFUeNrcmmdoFEEUxyd69kSIgomxoUbsUSPWIGrUiJEQRRFBI9jFIDZsEcsH4wchoKKoEQ1YQYxixYIV/WCJiiKKCnbFErHGWC7xP+R/cC53l9292UtmH/yyl53Zvf3v23nvzexFlZeXCxdYS/AKlNVwgZhJ4IgUI/+J0txD9UAxtzXd4KG9FCOtnfyjs6BpYLTf/0k6C2oDthv2ddZZ0NEA+zrqKmiDzxsGS9Ixyg0Hp4K0eUGCTh7qYhDzw9Auw3YXXQTJi80Eu0E2SAbRIBUU/DeO5COnATVALcO+BaAxP2eAMnBZFw/JsuaPYV9/0I+fj4Hu4ILKoBAFWoEPAZ5vJ8bTM/Dd2KDCQ0vBeiDvzHHQFYwClymyJ2iqWFAemB+oIRxBMlMPBi/BO+7LArfAE5BPQdtAmmJBM8CWgC02BmgsiAZbwVAT/ZuAuqAQbFEQIM6BxcHaPTbC5xWQA2aZPOY9twfATxALSvnZjsnHuyRoq43wmQaahnGH74Fsm8fmgdRQfayMoYXgNDgD3oYRCeeBQpvH1/IVoSo81BxMUJQoc0GBhf4eMAvEVdbXrIf6gHTOEFXY4yBTgGD2F4wHAyrtafIOjQKnOIZUlTO9wGgT/WLACFDbzHmrcvqwi3d+SiX92oOzLEg/VjpITQraxPnG3AiLjgcNGfq/+paqQpnZMXQI7FN8sXKV5i5oHaLPElYEn82IseKhZvziKwoFNWawuRAgycoE3oMJuJSllCkz6yFZo21U7KFPHEONguSrwxT2xMpJzXrI4xc+VVlDemcZk7XPhvBGP+BU5JcTggSnBrfBCocDQSEfwYl2DrZSnMpEeEPxJG0zGMfpRxZnnRPMBoBw50P5XJhYrUjQI1bg8qbW41iKZxD4bfekVqcPHYgKa08PzaZXUpSsA9isFFaBRD4mdu06aAIG8iadViHIY/O4h0x2vcFYRiqvhfUAefG5TK7PiRoLs8BMB9dY3u/m+lgDbn3rZW1BCihi2x5wFaxzYg0v3FWfk8z2f5kz3nG9bK3fpFC+w3nDKuMPw3EqU4Byc6La9r1Rk7mkNiNpqV+7DACdwHInBHkcOKd/XRYo/HoZnh2xSC8FrwEvwFS3CErkcrFj5omQkJnMNeOd/qJIeEhOAeoTx81pD61kJTAkUs+0U4IWgQacchRFcpB6FJ9rv6h4Sy1DdwK4GemlpHAExTCnDOJiRiZnl/W5SlQlZqdSqMML38FqWZb/I0XF+yKvqGKzI+ggeM3lpThwSVQjsyJoK6fgT+mJaiXEyhjqwW0Jp+DnRTU2Mx6Sq6ay0xihgYXy0DCKmF4dBrsKQTIsy7dlxUIjC1bLnQBfWLYINwi6A74JDc34yGVwEtZNaGpGD91lQenRVZD/hc8RFb/JyREam7+Hngq9f/b8X2KdLCp+1JCvuyCfR2TiTBYuMOmhtti2ABfdIEh6qC/YKVxi0kMxFPbFLR66r2OJE0qQXGp66BZB/wQYADkBmnEvOp6EAAAAAElFTkSuQmCC') no-repeat; display: block; position: absolute; right: 30px; top: 20px;}
.wxtip-txt{padding-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}
</style>
</head>
<body>
<div class="example">
    <a id="New">点击下载APP</a>
    <div class="wxtip" id="JweixinTip">
      <span class="wxtip-icon"></span>
      <p class="wxtip-txt">首次注册请点击右上角<br/>选择在浏览器中打开<br/>然后进行注册操作</p>
    </div>
</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('New');
weixinTip(btn1);
</script>

</body>
</html>
页: [1]
查看完整版本: 微信下载引导