1:使用html PLUS实现:地址HTML5+ API Reference (html5plus.org),效果图
2:在app.vue的onLaunch生命周期中,代码如下:
javascript
onLaunch: function() {
let a = 0
let view = new plus.nativeObj.View('maskView', {
backgroundColor: "rgba(0,0,0,.6)",
left: ((plus.screen.resolutionWidth / 2) - 150) + "px",
bottom: ((plus.screen.resolutionHeight / 2) - 100) + "px",
width: "300px",
height: "200px",
radius: "15px"
})
view.drawText('APP新版本更新', {
top: '-80px',
left: '0px'
}, {
size: '26px',
color: '#FFFFFF'
});
//更新消息格式化
var richText =
'<font color = "#FF0000" style = "font-size:20px;"> 1:更新了11111。</font><br/><font color = "#FF0000" style = "font-size:20px;"> 2:更新了222。</font>';
// let richText1 = richText.replace(/。/g, '。<br/>')
view.drawRichText(richText, {
top: '40px',
left: '50px',
width: '100%',
height: 'wrap_content',
})
view.drawText('下载进度:0%', {
top: '40px',
left: '0px'
}, {
size: '18px',
color: '#FFFFFF'
}, 'xzjd');
view.drawRect({
color: '#6a8aff',
radius: '10px'
}, {
bottom: '30px',
width: '100%',
height: '20px',
});
view.drawRect({
radius: '10px',
color: '#55ff00'
}, {
bottom: '30px',
width: 0 + '%',
height: '20px',
}, 'jdt');
view.show()
let b = setInterval(() => {//根据自己需要,把这个定时器更换为监听下载进度的方法,以下代码介绍
a++
view.drawRect({
color: '#55ff00',
radius: '10px'
}, {
bottom: '30px',
width: a + '%',
height: '20px',
}, 'jdt');
view.drawText('下载进度:' + a + '%', {
top: '40px',
left: '0px'
}, {
size: '18px',
color: '#FFFFFF'
}, 'xzjd');
if (a >= 100) {
clearInterval(b)
view.drawText('已完成', {
top: '40px',
left: '0px'
}, {
size: '20px',
color: '#FFFFFF'
}, 'xzjd');
}
}, 300)
console.log('App Launch')
}
3:这只是样式,需要把定时器更换为监听下载进度的方法
javascript
var dtask = plus.downloader.createDownload(//下载事件,有一个返回值
downUrl, {
filename: "_downloads/"
},
function(d, status) {
// 下载完成
if (status == 200) {
plus.runtime.install(d.filename, {
force: true
}, function() {
//进行重新启动;
plus.runtime.restart();
}, (e) => {
uni.showToast({
title: '安装升级包失败:' +JSON.stringify(e),icon: 'none'
})
});
} else {
http.hint("下载升级包失败,请联系管理员,错误码: " +status)
}
});
dtask.addEventListener("statechanged", (e) => {
if (e && e.downloadedSize > 0) {
let jindu = ((e.downloadedSize / e.totalSize) * 100).toFixed(2)
///把上面定时器的代码放进来,a替换成jindu变量
}
}, false);
dtask.start();