uni-app更新组件（支持整包，dwt包）更新进度条
1、整包更新重新下载app安装打包apk文件下载
2、热更新app内升级更新
制作wgt包
大体实现思路：客户端像服务端发送当前app的版本号，服务端接收到版本号判断是否需要升级；
说明：
热更新不支持的情况
sdk部分有调整，比如新增maps模块等，不可通过此方式，必须整包升级
原生插件的增改，同样不能使用此方式。
页面部分：
<template>
<view v-if="showUpdate" class="uploadView">
<view class="dis-c contentView">
<view class="poupleTitle">
<view class="ver">新版本升级</view>
<view class="ver-n">V{{ list.version }}</view>
</view>
<view class="contentContent">
<text space="ensp">{{ list.description }}</text>
</view>
<view class="downNow">
<u-line-progress
v-if="isDownload"
style="width: 80%;"
:height="16"
:percentage="progress"
activeColor="#2979ff"
></u-line-progress>
<view class="bt" v-if="status == 0" @click="handleDownload(list)">{{ btTxt }}</view>
<view class="bt" v-else @click="handleUndown">取消下载</view>
</view>
</view>
<view class="closeview">
<u-icon
@click="closePouple"
style="border-radius: 50%;border: 1px #fff solid;padding: 6rpx;font-weight: bold;"
name="close"
color="#fff"
size="24"
></u-icon>
</view>
</view>
</template>
组件js相关代码
export default {
name: 'update',
props: {
list: {
type: Object
}
},
data() {
return {
isDownload: false, //是否下载
progress: 30, //下载进度
showUpdate: false,
status: 0, //0为下载1 下载中2已完成,
tempSuccessFileUrl: '', //下载的apk临时目录
dowmTask: null, //下载任务
desc: '版本描述。', //下载任务
btTxt: '开始下载',
version: '1.0.0',
type: null, //区分整包还是wgt包1：整包 2：wgt热更新
downTaskUrl: null
}
},
methods: {
//显示更新
update(e) {
console.log('==>', e)
this.type = e
this.status = 0
this.progress = 0
this.isDownload = true
this.showUpdate = true
},
//关闭弹窗
closePouple() {
this.showUpdate = false
},
handleDownload(item) {
/******************************* 更新逻辑 **********************************/
// this.type:1 整包
// this.type:2 dwt包
// this.status: 0, //0为下载1 下载中2已完成,
this.isDownload = true
this.progress = 1
if (this.status == 0) {
if (this.type == 1) {
this.downTaskUrl = IP + item.pkgUrl
} else if (this.type == 2) {
this.downTaskUrl = IP + item.wgtUrl
}
this.dowmTask = uni.downloadFile({
url: this.downTaskUrl,
// header: {
// Authorization: 'Bearer ' + Utils.getToken()
// },
success: res => {
//下载完的临时文件url
console.log(res)
uni.hideLoading()
// #ifdef APP-PLUS
if (res.statusCode == 200) {
this.tempSuccessFileUrl = res.tempFilePath
console.log('进来了===' + this.tempSuccessFileUrl)
if (this.type == 1) {
//整包
plus.runtime.install(this.tempSuccessFileUrl)
} else if (this.type == 2) {
//热更新
plus.runtime.install(
this.tempSuccessFileUrl,
{
force: true
},
function() {
console.log('install success...')
plus.runtime.restart()
},
function(e) {
console.error('install fail...')
}
)
}
}
// #endif
},
fail: err => {
console.log(err)
uni.hideLoading()
}
})
this.dowmTask.onProgressUpdate(res => {
//console.log('下载进度', res)
if (res.progress > 0 && res.progress < 100 && this.status != 1) {
this.status = 1
}
if (res.progress == 100 && this.status != 2) {
this.status = 2
}
//console.log('下载进度' + res.progress)
this.progress = res.progress
//console.log('已经下载的数据长度' + res.totalBytesWritten)
//console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite)
})
} else if (this.status == 2) {
//下载完成
// #ifdef APP-PLUS
//if (this.tempSuccessFileUrl) plus.runtime.install(this.tempSuccessFileUrl)
if (this.tempSuccessFileUrl) {
if (this.type == 1) {
//整包
plus.runtime.install(this.tempSuccessFileUrl)
} else if (this.type == 2) {
//热更新
plus.runtime.install(
this.tempSuccessFileUrl,
{
force: true
},
function() {
console.log('install success...')
plus.runtime.restart()
},
function(e) {
console.error('install fail...')
}
)
}
}
// #endif
}
},
//取消下载
handleUndown() {
if (this.dowmTask) {
this.dowmTask.abort()
this.status == 0
uni.$u.toast('下载已取消')
this.closePouple()
}
}
},
watch: {
status: function(newV, oldV) {
if (newV == 0) {
this.btTxt = '开始下载'
} else if ((newV = 1)) {
this.btTxt = '下载中'
} else if (newV == 2) {
this.btTxt = '立即安装'
}
}
}
}
嬉皮笑脸 发表于 2022-12-17 15:58
我这里是运行不起来。
updatebg.png是背景图片 随便找一张就可以，comm.js是配置的接口地址IP等公共信息，这个可以根据自己实际项目配置，也可以不引用。 谢谢楼主，已收藏 谢谢楼主分享
谢谢楼主，已收藏 谢谢楼主分享 谢谢楼主！！！ 谢谢楼主！！！ 这是做什么的 jabir 发表于 2022-11-17 10:17
这是做什么的
app更新用的 感谢分享
页:
[1]
2