构建APP下载的landpage-CSDN博客

本文链接：https://blog.csdn.net/jasonware/article/details/77359621

构建APP下载的landpage

Landpage页

前端二维码生成

采用二维码组件

jquery.qrcode.js,并使用utf.js增加其对中文的支持

<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/utf.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.js"></script>

生成二维码

$(document).ready(function() {  
    $("#qrcodeCanvas").qrcode({  
        render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好  
        text : "http://www.xxx.com/download.html",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接  
        width : "200",               //二维码的宽度 
        height : "200",              //二维码的高度 
        background : "#ffffff",       //二维码的后景色  
        foreground : "#000000",        //二维码的前景色  
        src: 'logo.jpg'             //二维码中间的图片  
    });  
});  
<body>  
    <center>  
      <div id="qrcodeCanvas"></div>  
    </center>  
</body>

下载页

构建识别设备方法

#识别是否为微信扫描
function is_weixin() {
    return /MicroMessenger/i.test(navigator.userAgent);
  }
#识别是否为Android
function is_android() {
  return /Android/i.test(navigator.userAgent);
}
#识别是否为IOS
function is_ios() {
  return /(iPhone|iPod|iPad|iOS)/i.test(navigator.userAgent);
}
#微信里展示android端遮罩
function weixin_info() {
  var info = document.getElementById('weixin_info');
  info.style.display = 'block';
  info.addEventListener('click',
          function() {
              info.style.display = 'none';
          },
          0)
}
#微信里展示IOS端遮罩
function weixin_info_ios() {
  var info = document.getElementById('weixin_info_ios');
  info.style.display = 'block';
  info.addEventListener('click',
          function() {
              info.style.display = 'none';
          },
          0)
}
#遮罩DIV
<div id='weixin_info'>
    <img src="img/weixin_info_android.png" alt="">
</div>
<div id='weixin_info_ios'>
    <img src="img/weixin_info_ios.png" alt="">
</div>

下载按钮事件

var itunesUrl='https://itunes.apple.com/us/app/xxx';
$(document).ready(function() {
    $('.btn-xz').on('click',function(){
    if (is_weixin()) {
        if (is_android()) {
            weixin_info();
        } else {
            weixin_info_ios();
        }
      } else {
          if (is_android()) {
              window.location.href = "http://www.xxx.com/download/xxxx.apk";
          } else {
              //alert("IOS版本近期上线")
              window.location.href =itunesUrl;
          }
      }
        return false;
    });
  });

<a href="#" class="btn-xz">立即下载</a>