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 = '立即安装'
            }
        }
    }
}

完整代码

<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