1、整包更新重新下载app安装 打包apk文件下载 2、热更新app内升级更新 制作wgt包 大体实现思路:客户端像服务端发送当前app的版本号,服务端接收到版本号判断是否需要升级; |
说明:
热更新不支持的情况
sdk部分有调整,比如新增maps模块等,不可通过此方式,必须整包升级
原生插件的增改,同样不能使用此方式。
热更新不支持的情况
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 = '立即安装'
}
}
}
}
完整代码
<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>
<script>
import { IP } from '@/utils/comm.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 = '立即安装'
}
}
}
}
</script>
<style lang="scss" scoped>
.uploadView {
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
position: fixed;
background: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
flex-direction: column;
.closeview {
display: flex;
margin-top: 30rpx;
align-items: center;
justify-content: center;
}
.contentView {
width: 515rpx;
height: 680rpx;
background: url('updatebg.png') no-repeat left top;
background-size: 100% 100%;
display: flex;
flex-direction: column;
border-radius: 24rpx;
box-sizing: border-box;
.poupleTitle {
padding: 40rpx 40rpx 20rpx;
text-align: center;
color: #fff;
font-size: 28rpx;
.ver {
font-size: 50rpx;
}
.ver-n {
font-size: 30rpx;
margin-top: 10rpx;
}
}
.contentContent {
padding: 40rpx 50rpx;
color: #fff;
min-height: 200rpx;
font-size: 24rpx;
}
.downNow {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 20rpx;
.bt {
margin-top: 20rpx;
background-color: #fff;
height: 96rpx;
line-height: 96rpx;
font-size: 28rpx;
color: #4263ee;
width: 80%;
box-shadow: 0px 40rpx 40rpx 0px rgba(34, 64, 189, 0.5);
text-align: center;
border-radius: 40rpx;
}
}
}
}
</style>
THE END
请登录后查看评论内容