MUI:app在线更新功能实现

mui是一个非常接近于原生APP的前端开发框架，很多朋友通过该框架开发了很多手机app，这个框架，目前菠菜园也处于一个学习阶段，所以很多关于MUI的分享更多的是来源于网络。

当然不是为了装逼才写在这里，更多的是自己在用到相关功能的时候可以很方便的找到，所以菠菜园与其说是给大家分享内容的博客，倒不如说是波波在IT行业的成长历程。

参考资料：http://ask.dcloud.net.cn/article/182

HTML部分代码：

<div class="mui-content">
<div class="mui-scroll">
<div class="login-img">
<img src="images/icon.png" width="20%" />
<p id="version">当前版本:</p>
</div>
</div>
<ul class="mui-table-view check" id="check">
<li class="mui-table-view-cell">
<div class="updateProDiv">更新进度：
<progress value="" max="" id="proDownFile"></progress>
<span class="present"></span>
</div>
<a href="#" id="update" class="mui-nacigate-right">检查更新</a>
</li>
</ul>
</div>

JS部分代码：

<script src="js/jquery-1.8.3.min.js"></script>
<script>
var wgtVer=null;
function plusReady(){ // 获取本地应用资源版本号
plus.runtime.getProperty(plus.runtime.appid,function(inf){
wgtVer=inf.version;
version.innerHTML = '当前应用版本：'+wgtVer;
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready',plusReady,false);
}
var ver;
//休眠方法
function sleep(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}
mui('.mui-table-view-cell').on('click', '#update', function() {
plus.runtime.getProperty(plus.runtime.appid, function(inf) {
ver = inf.version;
console.log("当前应用版本：" + ver);
var url= app.baseurl+'index.php/api/other/version';
var client;
if(mui.os.ios) {client='ios';}
else{client='android';}
mui.ajax(url,{
data:{
version: ver,
client:client
},
dataType:'json',
type:'POST',
timeout:10000,
success:function(data){
if(data.status==1){
var btnArray = ['是', '否'];
mui.confirm('最新version是：' + data.version+',是否更新', '发现最新版本', btnArray, function(z) {
if (z.index == 0) {
console.log('确定');
$('.updateProDiv').css('display', 'block');
$('#update').css('display', 'none');
var dtask = plus.downloader.createDownload(data.url, {}, function(d, status) {
if (status == 200) {
clearInterval(i);
$('.persent').html("100%");
plus.nativeUI.toast("正在准备环境，请稍后！");
sleep(1000);
var path = d.filename;//_downloads yijietong.apk
console.log(d.filename);
$('#update').css('display', 'block');
$('.updateProDiv').css('display', 'none');
plus.runtime.install(path); // 安装下载的apk文件
} else {
alert('Download failed:' + status);
}
});
dtask.start();
var i = setInterval(function() {
var totalSize = dtask.totalSize;
var downloadedSize = dtask.downloadedSize;
$('#proDownFile').attr('value', downloadedSize);
$('#proDownFile').attr('max', totalSize);
console.log(dtask.downloadedSize);
console.log(dtask.totalSize);
}, 100); //1000为1秒钟
} else {
console.log('不确定');
return;
}
});
}
else{
alert(data.message);
}
},
error: function(xhr, type, errerThrown) {
mui.toast('网络异常,请稍候再试');
}
});
});
});
</script>