1.界面效果

一、版本信息配置在服务端#xff0c…关于app更新uni-app官方推荐的是

uni-upgrade-center看了下比较繁琐因此这里自己实现检查更新并下载安装的逻辑。

1.界面效果

二、点击下载按钮则开始下载App安装包并监听下载进度实时更新下载进度条

注意下载App如果是在浏览器测试可能会有跨域的问题需要后端服务允许跨域。

uni-installApk

srchttps://beilizhengxuan.oss-cn-hangzhou.aliyuncs.com/huayu/update.png/view

classbox-a5text发现新版本V{{version}},升级后体验更顺畅/text/viewview

classrow-b0

clickcancelv-ifforceUpdata0暂不更新/view/viewview

v-ifstartDownload

classte-j0下载进度/viewu-line-progress

:percentagepercent

height24activeColor#3c9cff/u-line-progress/view/view/u-modal

/template

default{props:{},data(){return{startDownload:

false,

,}},created(){this.handleToUpgrade()},computed:{showUpdate(){console.log(this.$stroe.state.user,this.$stroe.state.user)return

this.$stroe.state.user.showUpdate}},methods:{async

handleToUpgrade()

sysInfo.appVersionconsole.log(appVersion,

appVersion)//请求服务端检查更新接口判断是否需要更新const

res

res.data.newVersionif(appVersion

newVersion){this.showToast(当前已是最新版本)this.cancel()}

res.data.apkDownloadUrlthis.show

trueconsole.log(需要更新)this.version

res.data.forceUpdata}}}},installApp(){uni.installApk({filePath

res);},fail

res);}})},downLoadApp(){this.startDownload

trueconst

res.tempFilePathconsole.log(下载成功);this.cancel()this.installApp()}},complete:

(res)

res)},});downloadTask.onProgressUpdate((res)

{//console.log(下载进度

res.progress);//console.log(已经下载的数据长度

res.totalBytesWritten);//console.log(预期需要下载的数据总长度

res.totalBytesExpectedToWrite);this.percent

res.progressif

res.progress);//downloadTask.abort();}});},cancel(){this.$emit(cancel)this.show

false},showToast(message){uni.showToast({title:

message,icon:

flex-start;}.box-a5{flex:1;text-align:

center;font-size:

0;}.row-b0{display:flex;flex-direction:

row;justify-content:

50rpx;margin-top:60rpx;margin-bottom:60rpx;}.row-b0

.btn0{width:

center;background:#3c9cff;}.row-b0

0.7;}.row-b0

.btn0.white{background:#fff;color:

#666;border:1px

上面将检查更新的逻辑封装在了update.vue中使用时只需引入该组件在父页面点击检查更新按钮时只需将

checkUpdate

方法并调用检查更新的相关逻辑有新版本则弹框提示更新无新版本则将

checkUpdate重置为

{console.log(--禁用返回)if(this.checkUpdate){return

true;//