废话不多,直接上代码;
需要注意的是 进度条满值是100,100,100,重要的事情说3遍。。。
<body>
<div class="mui-content">
<div class="box">
<img src="../../images/update1.png"/>
</div>
<div class="up hide">
<h4>正在下载</h4>
<p class="mui-progressbar mui-progressbar-danger"><span></span></p>
</div>
</div>
<script src="../../js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
var url;
var gobuy = null;
var container;
mui.plusReady(function(){
var ww = plus.webview.currentWebview();
url = ww.url;
console.log(url)
//点击开始下载
mui('.mui-content').on('tap','img',function(){
mui('.mui-content .box')[0].classList.add('hide');
mui('.mui-content .up')[0].classList.remove('hide');
downWgt(); // 下载升级包
container = mui(".mui-content p");
container.progressbar({
progress: 0
}).show(); //显示进度条
})
//重写返回
mui.back = function(){
mui.confirm('确定要取消更新么?','温馨提示',['取消','退出'],function(e){
console.log(e)
if(e.index == 1){
ww.hide("auto", 300);
plus.downloader.clear();
}else{
return
}
})
}
复制代码 })
// 下载文件
var dtask;
function downWgt(){
dtask = plus.downloader.createDownload( url, {filename:"_doc/update/"}, function(d,status){
if ( status == 200 ) {
mui.toast('下载完成');
console.log("下载成功:"+d.filename);
installWgt(d.filename); // 安装
mui.later(function(){
mui.back();
},500)
} else {
console.log("下载失败!");
plus.nativeUI.alert("下载更新包失败!");
}
plus.nativeUI.closeWaiting();
});
dtask.addEventListener( "statechanged", onStateChanged, false );
dtask.start();
}
// 监听下载任务状态
function onStateChanged(){
mui.later(function(){
var num = dtask.downloadedSize / dtask.totalSize * 100;
if(num < 100){
mui(container).progressbar().setProgress(num);
}else{
mui(container).progressbar().hide();
}
},200)
}
// 更新应用资源
function installWgt(path){
plus.nativeUI.showWaiting("安装wgt文件...");
plus.runtime.install(path,{},function(){
plus.nativeUI.closeWaiting();
console.log("应用资源更新完成!")
},function(e){
plus.nativeUI.closeWaiting();
console.log("安装文件失败["+e.code+"]:"+e.message);
plus.nativeUI.alert("安装文件失败["+e.code+"]:"+e.message);
});
}
</script>
</body>
