吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 1807|回复: 15
收起左侧

[其他原创] uni-app更新组件(支持整包,dwt包)更新进度条

  [复制链接]
hexiaoyi 发表于 2022-11-14 11:07
1、整包更新重新下载app安装
打包apk文件下载

2、热更新app内升级更新
制作wgt包

大体实现思路:客户端像服务端发送当前app的版本号,服务端接收到版本号判断是否需要升级;


说明:
热更新不支持的情况
sdk部分有调整,比如新增maps模块等,不可通过此方式,必须整包升级
原生插件的增改,同样不能使用此方式。


页面部分:
[HTML] 纯文本查看 复制代码
<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相关代码
[JavaScript] 纯文本查看 复制代码
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 = '立即安装'
			}
		}
	}
}


update.rar

2.28 KB, 下载次数: 4, 下载积分: 吾爱币 -1 CB

组件代码

免费评分

参与人数 3吾爱币 +8 热心值 +2 收起 理由
苏紫方璇 + 7 + 1 欢迎分析讨论交流,吾爱破解论坛有你更精彩!
lxyhslx + 1 我很赞同!
ARondMan + 1 热心回复!

查看全部评分

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

 楼主| hexiaoyi 发表于 2022-12-22 09:15
嬉皮笑脸 发表于 2022-12-17 15:58
我这里是运行不起来。

updatebg.png是背景图片 随便找一张就可以,comm.js是配置的接口地址IP等公共信息,这个可以根据自己实际项目配置,也可以不引用。
manwu 发表于 2022-11-14 19:20
koohik 发表于 2022-11-14 20:01
PLAQD 发表于 2022-11-15 07:43

谢谢楼主,已收藏
000932 发表于 2022-11-15 12:02
谢谢楼主分享
Wddxg 发表于 2022-11-15 13:08
谢谢楼主!!!
acexxx 发表于 2022-11-15 14:39
谢谢楼主!!!
jabir 发表于 2022-11-17 10:17
这是做什么的
 楼主| hexiaoyi 发表于 2022-11-17 15:09

app更新用的
zbzhangbao9001 发表于 2022-11-20 10:56
感谢分享
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则 警告:本版块禁止灌水或回复与主题无关内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-5-18 02:42

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表