PHPIN.NET

 找回密码
 立即注册
查看: 5200|回复: 0

[模板] 微信下载引导

[复制链接]

469

主题

31

回帖

5507

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5507
发表于 2018-1-30 13:11:18 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
微信内置浏览器内不允许直接下载文件。
如果是下载应用的话,可以上架到应用宝;不是应用的话 就需要做个提示,提示用户用浏览器打开。
代码如下:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6. <title>微信下载引导</title>
  7. <style type="text/css">
  8. /*演示用,请勿引入项目中*/
  9. *{margin:0; padding: 0;}
  10. body{font:normal 14px/1.5 Arial,Microsoft Yahei; color:#333;}
  11. .example{padding: 20px;}
  12. .example p{margin: 20px 0;}
  13. 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;}
  14. a.btn-warn{background: #F0AD4E;}
  15. a:hover{opacity: 0.8;}
  16. /*核心css*/
  17. .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;}
  18. .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;}
  19. .wxtip-txt{padding-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}
  20. </style>
  21. </head>
  22. <body>
  23. <div class="example">
  24.     <a id="New">点击下载APP</a>
  25.     <div class="wxtip" id="JweixinTip">
  26.         <span class="wxtip-icon"></span>
  27.         <p class="wxtip-txt">首次注册请点击右上角<br/>选择在浏览器中打开<br/>然后进行注册操作</p>
  28.     </div>
  29. </div>
  30. <script type="text/javascript">
  31. function weixinTip(ele){
  32. var ua = navigator.userAgent;
  33. var isWeixin = !!/MicroMessenger/i.test(ua);
  34. if(!isWeixin){
  35.     ele.onclick=function(e){
  36.         window.event? window.event.returnValue = false : e.preventDefault();
  37.         document.getElementById('JweixinTip').style.display='block';
  38.     }
  39.     document.getElementById('JweixinTip').onclick=function(){
  40.         this.style.display='none';
  41.     }
  42. }
  43. }
  44. var btn1 = document.getElementById('New');
  45. weixinTip(btn1);
  46. </script>

  47. </body>
  48. </html>
复制代码

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-4-16 19:41

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表