uni-app 自动检测更新-下载-安装
js
//store全局存储app信息
getAppInfo(state){
uni.getSystemInfo({
success:(res)=>{
//全局存入的app信息
state.appInfo = res
}
})
}
//app首页onLoad,根据接口获取app最新版本号
getAppVersion().then((res) => {
// #ifdef APP
const version = this.appInfo.appWgtVersion;
// #endif
// #ifdef H5
const version = this.appInfo.appVersion;
// #endif
if (res.data.clientVersion !== version) {//接口拿到的版本号与app启动时拿到的版本号对比,如果不同就需要更新
uni.showModal({
title: "版本更新提示",
content: "当前版本不是最新,点击更新最新版本!",
success: (result) => {
if (result.confirm) {
//打开下载进度弹窗,传入下载链接
this.$refs.downLoadAppModalRef.open(res.data.clientDownloadUrl);
} else if (result.cancel) {
if (res.data.requiredUpdate) {
//点取消,如果app需要强制更新,就退出.
uni.onBackPress(function () {
plus.runtime.quit();
});
}
}
},
});
}
});
进度条弹窗
html
<template>
<u-popup :show="show" mode="center" :closeOnClickOverlay="false" :round="10">
<view class="popup-content">
<u-line-progress
:percentage="progress"
activeColor="#faa63a"
height="24"
></u-line-progress>
<view class="popup-content-text"> 下载中,请稍后~ </view>
</view>
</u-popup>
</template>
<script>
export default {
data() {
return {
show: false,
progress: 0,
};
},
methods: {
open(url) {
this.show = true;
//下载安装包
let downloadTask = uni.downloadFile({
url: url,
success: (res) => {
//下载完成后关闭弹窗
this.show = false;
this.progress = 0;
if (res.statusCode === 200) {
//200后打开已下载的文件进行安装
uni.openDocument({
filePath: res.tempFilePath,
success() {},
});
}
},
});
downloadTask.onProgressUpdate((res) => {
//当前下载进度
this.progress = res.progress;
});
},
},
};
</script>
<style lang="scss" scoped>
.popup-content {
padding: 50rpx;
justify-content: center;
align-items: center;
width: 500rpx;
height: 100rpx;
&-text {
text-align: center;
margin-top: 20rpx;
font-size: 32rpx;
}
}
</style>