您的位置:首页 > 移动开发

wex5开发-文件下载(可实现app内下载更新apk)

2017-08-18 22:14 435 查看
html代码:

<div component="$UI/system/components/justep/popOver/popOver" class="x-popOver updateApp" direction="auto" xid="updateApp" position="left">
<div class="x-popOver-overlay" xid="div2"></div>
<div class="x-popOver-content" xid="div5" style='font-family:"微软雅黑";width:80%;left:10%;top:30%;border-radius:8px'>
<div xid="div15" style="background:white;padding:0.3rem 0.4rem">
<p xid="p3" style="text-align:center;font-size:0.36rem;margin-bottom:0.3rem">
<span xid="span5">发现新版本</span>
<span xid="span11" style="color:#7bc83e">v3.1.0</span></p>
<p xid="p4" style="line-height:0.5rem;word-break:break-all">1、新增e家生活活动入口</p>
<p xid="p5" style="line-height:0.5rem">2、新增e家生活活动入口</p>
<div xid="div16" style="text-align:center">
<a component="$UI/system/components/justep/button/button" class="btn" xid="downloadApkBtn" style="margin:0.5rem 0 0.2rem 0;width:80%;height:1rem;line-height:1rem;border-radius:0.5rem;background:#7bc83e;font-size:0.4rem;color:white;padding:0" label="立即更新" onClick="downloadApkBtnClick">
<i xid="i3"></i>
<span xid="span15">立即更新</span></a> </div>
<div class="progress " style="margin:0.5rem auto 0.2rem auto;height:0.88rem;border-radius:0.5rem;background:rgb(215,238,197);font-size:0.4rem;color:white;border:1px solid #7bc83e;width:86%;display:none;" xid="updateApkProgressBox">
<div class="progress-bar progress-bar-primary uploadProgress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" xid="updateApkProgressbar"></div></div>
<div xid="installAppBox" style="text-align:center;display:none;">
<a component="$UI/system/components/justep/button/button" class="btn" xid="installApp" style="margin:0.5rem 0 0.2rem 0;width:80%;height:1rem;line-height:1rem;border-radius:0.5rem;background:#7bc83e;font-size:0.4rem;color:white;padding:0;" label="马上安装" onClick="installAppClick">
<i xid="i1"></i>
<span xid="span4">马上安装</span></a> </div></div> </div> </div>


js代码:

//需要引用的插件
require("cordova!cordova-open");
require("cordova!cordova-plugin-file");

4000
require("cordova!cordova-plugin-file-transfer");
/**
* 下载更新apk文件---------------------------------------------------------------------------------------------------------
* @param {string}
*/
//打开已下载文件
var openFile = function(event){
var localUrl = "file:///storage/emulated/0/xmej/xmej.com.apk";//下载文件本地保存路径
var open = cordova.plugins.disusered.open;
function success() {
justep.Util.hint('准备安装……');

}
function error(code) {
if (code === 1) {
alert('文件未在本地保存,请点击下载!');
} else {
justep.Util.hint('未知错误,请联系管理员!');
}
}
open(localUrl, success, error);
};
//点击更新按钮开始下载
Model.prototype.downloadApkBtnClick = function(event){
//var divProgress = $(event.source.domNode.parentElement.parentElement).find("div[xid='progressbar1']"); //获取当前行的进度条XID
var downLoadBtn = $("[xid=downloadApkBtn]");//下载按钮
var updateApkProgressbar = $("[xid=updateApkProgressbar]");//进度条
downLoadBtn.hide();
$("[xid=updateApkProgressBox]").show();

//var row = event.bindingContext.$object;  //获取当前行的数据
var filePath = 'file:///storage/emulated/0/xmej/xmej.com.apk'; //下载存放路径,数据库保存文件名
var url = "http://pandaehome.com/data/apkdownload/pandaehome.apk"; //apk下载地址

var fileTransfer = new FileTransfer(); //创建文件传输对象
fileTransfer.onprogress = function(progressEvent) { //文件传输插件对象的进度方法调用
var percentProgress = parseInt((progressEvent.loaded / progressEvent.total) * 100)+ "%"; //获取已下载和总大小的百分比
if (progressEvent.lengthComputable)//获取浏览器返回HEAD信息包含CONTENT-LENGTH为TRUE 则执行下面
{
updateApkProgressbar.css("width",percentProgress); //设置进度条的样式
updateApkProgressbar.html(percentProgress);        //设置进度条里面的数字
}
};

fileTransfer.download( //调用对象的下载方法,开始下载
url,
filePath,
function(entry) {
console.log("download complete: " + entry.fullPath);//下载完成后调用方法
//这里下载完成后,将进度条隐藏或者写其他需要的代码

openFile();//下载完成进入安装页面
$("[xid=updateApkProgressBox]").hide();
$("[xid=installAppBox]").show();
}.bind(this),
function(error) {  //出错回调函数
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code " + error.code);
downLoadBtn.show();
$("[xid=updateApkProgressBox]").hide();

},
false,
{
headers: {
"Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
}
}
);
};
//用户取消安装后手动安装
Model.prototype.installAppClick = function(event){
openFile();
};

//下载更新apk文件结束分割线-----------------------------------------------------------------------------------------------------------------


css代码:

/* 下载+进度条 */
.x-popOver.updateApp{
display:block !important;
}
.uploadProgress{
line-height:0.88rem !important;
background:#7bc83e !important;

}




内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  app更新 文件下载
相关文章推荐