关于手机端页面下载apk小知识点总结

需求描述：

我司现开发了一款手机端apk，在电视端弹出一个二维码，用户扫描后直接链接到一个手机页面，在手机页面上会有一个下载按钮，点击后自动跳转到下载页面；对apk进行下载；

思路：

前端编写一个下载页面，HTML代码如下:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="./js/vconsole.min.js"></script>
   <title>点击下载应用</title>
   <style type="text/css">
      *{margin:0; padding:0;}
      a{text-decoration: none;}
      img{max-width: 100%; height: auto;}
      .weixin-tip{display: none; position: fixed; left:0; top:0; bottom:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80);  height: 100%; width: 100%; z-index: 100;}
      .weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}
      #download_div{position: fixed;bottom: 0;left:0;height:60px;width: 100%;background-color: #ffffff
      }
      #download{width:80%;height:40px;background-color:rgba(68,207,251,100);
         color: #ffffff;margin:10px 10%;border-radius:30px;font-size:16px}
       #main{width:100%;height:auto;background: url("img/download_bg.png") no-repeat;background-size: 100%}
   </style>
</head>
<body>
<div class="weixin-tip">
   <p>
      <img src="img/live_weixin.png" alt="微信打开"/>
   </p>
</div>
<main id="main">
</main>
<div id="download_div">
   <input type="button"  id="download" value="下载apk" />
</div>
<script type="text/javascript">
    var winHeight = $(window).height();
    var ua = navigator.userAgent.toLowerCase();
    var downLoad_apk={
        init:function(){
            downLoad_apk.initPage();
            downLoad_apk.bindEvent();
      },
      initPage:function(){
            var isWeixin = downLoad_apk.is_weixin();
            if(isWeixin){       //如果是微信
                $(".weixin-tip").css("height",winHeight);
                $(".weixin-tip").show();
                $("#download").hide();  //隐藏下载按钮
                $("#main").hide();      //隐藏背景图
            }
            var winWidth=$(window).width();
            console.log("屏幕的宽度为："+winWidth);
            $("#main").css("height",winWidth*3.29);
            $("body").css("height",winWidth*3.29+60);    //下载按钮本身的高度为60，避免遮盖
      },
      is_weixin:function(){
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                return true;
            } else {
                return false;
            }
      },
      bindEvent:function(){
            var button=document.getElementById("download");
            var isAndroid = ua.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            button.addEventListener("click",function(){
                //在此处判断是苹果还是安卓手机，安卓下载
                if(isAndroid){
                    //普通浏览器可以打开，但是微信屏蔽了下载apk的链接，不能正常下载
                    location.href="http://20170504update/_APP_449_20170817_004.apk"
                }else{
                    //直接跳转到苹果appStore,携带上app的id
                    location.href="https://itunes.apple.com/cn/app/id529479190?mt=8&from=singlemessage"
                }
            });
      }
   };
    //当页面内容加载完全后，开始初始化页面
    $(window).on("load",function(){
        //引入微信小程序的是Vconsole移动端调试工具，查看页面错误,在执行自己写的代码之前实例Vconsole
        var vConsole = new VConsole();
        console.log('VConsole is cool');
        //开启页面下载程序
        downLoad_apk.init();
    });
</script>
</body>
</html>

将上述页面部署到服务器上，假设该链接的地址为 http://172.0.0.1:8080/download_apk.html
在电视端通过QRcode插件，将上一步的链接地址传入，产生二维码并将其显示在电视上，用户扫描后即可点击下载了
主要是判断是不是微信，是不是安卓或者苹果设备；

总结：

先将apk包传到服务器上；
移动端页面，为了调试方便，加入了微信的Vconsole移动端调试解决方案；非常方便，可以随时查看打印的信息和报错；
只需要引入vconsole.min.js且在执行自己编写的代码之前实例化 new VConsole()即可；
项目源码GitHub地址：点击下载源码

关于手机端页面下载apk小知识点总结

猜你喜欢