|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有账号?立即注册
x
微信内置浏览器内不允许直接下载文件。
如果是下载应用的话,可以上架到应用宝;不是应用的话 就需要做个提示,提示用户用浏览器打开。
代码如下:
- <!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>
复制代码
|
|