先附上源码
修改完善后的js代码
优点:可以禁用tabbar导航栏,并且实时显示下载进度
缺点:非可视化进度条显示(感兴趣的可以直接赋值,稍作修改即可)
method:{
// 检测版本更新
checkVersionToLoadUpdate: function(server_version, curr_version) {
const that = this
if (server_version != curr_version) {
//TODO 此处判断是否为 WIFI连接状态
uni.showModal({
title: "版本更新",
content: '有新的版本发布,检测到您当前为Wifi连接,是否立即进行新版本下载?',
confirmText: '立即更新',
cancelText: '稍后进行',
success: function(res) {
if (res.confirm) {
//设置 最新版本apk的下载链接
var downloadApkUrl = that.verison.updatepath;
var dtask = plus.downloader.createDownload(downloadApkUrl, {},
function(d, status) {
// 下载完成
if (status == 200) {
plus.runtime.install(plus.io.convertLocalFileSystemURL(
d.filename), {}, {}, function(error) {
uni.showToast({
title: '安装失败',
duration: 1500
});
})
} else {
uni.showToast({
title: '更新失败',
duration: 1500
});
}
});
try {
dtask.start(); // 开启下载的任务
var prg = 0;
var showLoading = plus.nativeUI.showWaiting(
"正在下载"); //创建一个showWaiting对象
dtask.addEventListener('statechanged', function(
task,
status
) {
// 给下载任务设置一个监听 并根据状态 做操作
switch (task.state) {
case 1:
showLoading.setTitle("正在下载");
break;
case 2:
showLoading.setTitle("已连接到服务器");
break;
case 3:
prg = parseInt(
(parseFloat(task.downloadedSize) /
parseFloat(task.totalSize)) *
100
);
showLoading.setTitle(" 正在下载" + prg + "% ");
break;
case 4:
plus.nativeUI.closeWaiting();
//下载完成
break;
}
});
} catch (err) {
plus.nativeUI.closeWaiting();
uni.showToast({
title: '更新失败-03',
mask: false,
duration: 1500
});
}
} else if (res.cancel) {
}
}
});
}
}
}
遇到问题
1,将数据下载和数据总大小放在监听的状态200执行,无法同步更新渲染到页面,当进度条进展到一半的时候就会跳转到安装(附上问题代码块)解决:应该放入监听状态码为3的情况进行数据实时更新
method内问题代码块
function onStateChanged(download, status) {
if (status == 200) {
const totalSize=download.totalSize
let nowSize=download.downloadedSize
that.process=nowSize / totalSize * 100
if(that.process==100){
that.$refs.popup_process.close()
}
}
}
附上整个问题代码
写在method内部方法
// 检测版本更新
checkVersionToLoadUpdate: function(server_version, curr_version) {
const that = this
if (server_version != curr_version) {
//TODO 此处判断是否为 WIFI连接状态
uni.showModal({
title: "版本更新",
content: '有新的版本发布,检测到您当前为Wifi连接,是否立即进行新版本下载?',
confirmText: '立即更新',
cancelText: '稍后进行',
success: function(res) {
if (res.confirm) {
// uni.showToast({
// icon: "none",
// mask: true,
// title: '有新的版本发布,检测到您目前为Wifi连接,程序已启动自动更新。新版本下载完成后将自动弹出安装程序',
// duration: 5000,
// });
that.$refs.popup_process.open()
//设置 最新版本apk的下载链接
var downloadApkUrl = that.verison.updatepath;
var dtask = plus.downloader.createDownload(downloadApkUrl, {},
function(d, status) {
// 下载完成
if (status == 200) {
plus.runtime.install(plus.io.convertLocalFileSystemURL(
d.filename), {}, {}, function(error) {
uni.showToast({
title: '安装失败',
duration: 1500
});
})
} else {
uni.showToast({
title: '更新失败',
duration: 1500
});
}
});
function onStateChanged(download, status) {
if (status == 200) {
const totalSize=download.totalSize
let nowSize=download.downloadedSize
that.process=nowSize / totalSize * 100
if(that.process==100){
that.$refs.popup_process.close()
}
}
}
dtask.addEventListener("statechanged", onStateChanged, false);
dtask.start();
} else if (res.cancel) {
}
}
});
}
}
以下为方法调用区域
在onshow内调用的
//版更新调用
this.checkVersionToLoadUpdate(this.verison.num, this.server_version)
以下为初步思路设置一个进度条的html弹框代码(问题:无法禁用tabbar导航)
需要在扩展组件库中安装upop
<!-- 下载更新进度条 -->
<uni-popup ref="popup_process" @touchmove.stop.prevent="moveHandle" :mask-click="false">
<view class="process">
<view class="download">
正在下载中
</view>
<view class="process_box">
<view class="process_inner" :style="{width:process+'%'}">
</view>
</view>
</view>
</uni-popup>
以上仅为个人笔记