wex5开发-文件下载(可实现app内下载更新apk)
2017-08-18 22:14
435 查看
html代码:
js代码:
css代码:
<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; }
相关文章推荐
- Android开发实践经验谈:如何让各式手机浏览器可以直接下载apk安装文件且实现自动安装APP
- 通过okhttp3下载文件实现APP版本更新
- 通过okhttp3下载文件实现APP版本更新
- 移动开发:H5+实现APP自动下载更新(HBuilder)
- Android插件化开发之用DexClassLoader加载未安装的APK资源文件来实现app切换背景皮肤
- android开发 更新下载apk部分机型文件写入失败(Permission denied)
- 安卓开发实战之app之版本更新(DownloadManager和http下载)完整实现
- 安卓开发实战之app之版本更新升级(DownloadManager和http下载)完整实现
- warensoft .NET快速开发系列--C#实现文件下载并(多线程+WebReqeust+进度条)
- iOS开发之结合asp.net webservice实现文件上传下载
- Android 中tomcat搭建本地服务器 实现apk更新下载
- iOS开发之结合asp.net webservice实现文件上传下载(转)
- Android 实现apk文件下载并自动安装
- C# 实现在线软件自动升级自动下载更新文件
- 【COCOS2DX-LUA 脚本开发之十二】Hybrid模式-利用AssetsManager实现在线更新脚本文件lua、js、图片等资源(免去平台审核周期)
- 函数项目【COCOS2DX-LUA 脚本开发之十二】Hybrid模式-利用AssetsManager实现在线更新脚本文件lua、js、图片等资源(免去平台审核周期)函数项目
- c#实现 ftp http共享方式下载文件 并对比本地文件和服务器文件的更新时间 判断性下载
- c#实现 ftp ;http;共享方式下载文件 并对比本地文件和服务器文件的更新时间 判断性下载
- iOS开发之结合asp.net webservice实现文件上传下载
- Android 实现apk文件下载并自动安装