HTML代码
<-- 进度条和进度展示 --> <view class="jdt"> {{texta}} <view class="color" :style="{width:width}"></view> </view> <-- 触发更新按钮 --> <view @click="clickDownLoad">点击更新应用</view>ps:进度条原理为 给外层盒子固定宽高,背景色。 给内部盒子100%的高 ,另外一种背景色, 然后 动态修改宽度,%类型。记得给高度
JS代码
clickDownLoad(){ var _that = this console.log('下载执行') let url='https......' // url 为安装包下载地址 // 开始下载 // 创建下载任务 plus.downloader.createDownload 参数为 下载路径 下载时配置 执行的回调(d为下载的对象,status为状态码) var dtask = plus.downloader.createDownload(url,{filename:"_downloads/"},function(d, status){ console.log(d) console.log(status) // 下载完成 if(status == 200){ // plus.runtime.install 安装应用代码 参数为 路径 安装参数 成功回调 失败回调 plus.runtime.install(d.filename,{ // 强制更新,不校对版本号 force: true }, function() { // 成功回调,进行重新启动; plus.runtime.restart(); }, (e) => { // 失败回调,给出提示 uni.showToast({ title: '安装升级包失败:'+JSON.stringify(e), icon: 'none' }) console.log('安装失败') }); } else { // this.tui.toast("下载升级包失败,请手动去站点下载安装,错误码: " + status); console.log('下载失败') } }); // 给对象添加监听事件, 参数为 触发类型 触发时执行的回调 dtask.addEventListener('statechanged',function(e,status){ if(e && e.downloadedSize>0){ // jindu 为下载的数值,保留到小数点后两位,可根据需求自己保留 let jindu=((e.downloadedSize/e.totalSize)*100).toFixed(2) // 给变量赋值,让下载进度条 和 文本 展示给用户 _that.width=jindu+'%' _that.texta='进度:'+jindu+'%' console.log( '进度:'+jindu+'%') } }); // 调用 dtask.start(); },