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

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");
    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;

}