需求描述:
我司现开发了一款手机端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地址:点击下载源码