uniapp实现APP的版本更新（整包更新）及热更新

最新推荐文章于 2025-03-12 15:42:30 发布
最新推荐文章于 2025-03-12 15:42:30 发布
阅读量1.8k 收藏 16
点赞数 6
文章标签： uni-app javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51403535/article/details/144685848
版权

目录

一.关于版本更新和热更新

二.实现逻辑

1.打包

2.上传最新的包文件

3.uniapp内的实现逻辑

4.代码部分 

一.关于版本更新和热更新

版本更新也称为整包更新，是指下载并安装最新的apk文件，实现app的整包更新

热更新是指将包打为wgt文件，不进行整包安装并实现app更新

效果图

二.实现逻辑

1.打包

配置 manifest.json 文件，修改版本号和版本名称

2.上传最新的包文件

整包更新：最新的apk文件需要上传至web端并维护版本信息

热更新：生成的wgt文件需要上传至web端并维护版本信息

注：需前后端联调

3.uniapp内的实现逻辑

1.版本更新样式弹窗（可手写也可网上复制，我是手写的因为灵活性好一些）

2.调用接口检查是否需要更新（时机：登录后、我的页面手动点击检查更新）

3.若需要更新，弹出弹窗并展示更新内容，若无更新可弹出 ‘已是最新版本’ 弹窗也可无弹窗操作

4.需要更新的情况下，后端返回更新文件的路径，uni.downloadFile下载最新的包文件并重启或者安装最新的app

5.uploadTask.onProgressUpdate可监听下载进度，用于弹窗展示

4.代码部分 

DOM部分（弹窗）

<!-- 版本信息弹窗 -->
		<u-popup mode="center" round='15' :show="show">
			<view v-if="versionsFlag === 1">
				<view>
					<image src="../../../static/update2.png" mode="aspectFill" style="width: 100%;height: 100%;">
					</image>
				</view>
				<view>
					{{updateType === 1?'最新资源包':'发现新版本'}} V{{version}}
				</view>
				<view>
					<view>更新内容</view>
					<view>
						<u-textarea disabled v-model="apkUpdateContent" style="background-color: transparent;"
							border="none"></u-textarea>
					</view>
				</view>
				<view>
					<view @click="updateNow">立即更新</view>
					<view @click="show = false">暂不更新</view>
				</view>
			</view>
			<view v-if="versionsFlag === 2">
				<view>
					<image src="../../../static/update2.png" mode="aspectFill" style="width: 100%;height: 100%;">
					</image>
				</view>
				<view>已是最新版本</view>
				<view>
					<view>版本信息</view>
					<view>{{latestVersionInfo}}</view>
				</view>
				<view>
					<view @click="show = false">关闭</view>
				</view>
			</view>
			<view v-if="versionsFlag === 3">
				<view>
					<image src="../../../static/update2.png" mode="aspectFill" style="width: 100%;height: 100%;">
					</image>
				</view>
				<view>正在下载,请稍后	</view>
				<view>
					<u-line-progress height="50rpx" :percentage="updateProgress"
						activeColor="#409eff"></u-line-progress>
				</view>
				<view v-if="restartFlag">重启APP,请稍后</view>
			</view>
		</u-popup>

data部分

// 版本更新相关
				version: '', //版本名称
				versionCode: '', //版本号
				apkUpdateContent: '', //更新内容说明

				updateType: '', //1资源包更新2版本更新
				versionsFlag: 1, //1需要更新弹窗2已是最新版本弹窗3正在下载
				latestVersionInfo: '', //已是最新版本弹窗内容
				updateAPKPath: '', //下载文件路径
				updateProgress: '', //下载进度
				restartFlag: false,
				show: false

js部分（需前后端联调）

update() {
			let _this = this
			let platform = uni.getSystemInfoSync().platform
			let server = '***********************'
			let signServer = '***********************'

			// 当前版本信息
			plus.runtime.getProperty(plus.runtime.appid, (info) => {
				let version = info.version; //版本名称
				let versionCode = info.versionCode; //版本号
				uni.request({
					url: signServer,
					method: 'POST',
					data: {
						apkVersionName: version, //版本名称
						apkVersion: versionCode, //版本号
					},
					success: (res) => {
						let sign = res.data.result
						uni.request({
							url: server,
							method: 'POST',
							data: {
								// appId: appid, // 应用AppID（唯一标识）
								apkVersionName: version, //版本名称
								apkVersion: versionCode, //版本号
								sign: sign // 签名
							},
							success: (res) => {
								if (res.statusCode == 200) {
									if (res.data.code == 200) {
										// 最新版本
									_this.version = res.data.result.apkVersionName
										// 版本更新内容
									_this.apkUpdateContent = res.data.result.apkUpdateContent

									let path = process.uniEnv.FILE_PREVIEW_URL +'/' + res.data.result.bucket + '/' + res.data.result.apkPath
										// 更新文件路径
										_this.updateAPKPath = path
										// 资源包更新
										if (res.data.result.hotUpdate === 1) {
											// 打开更新弹框
											_this.versionsFlag = 1
											_this.updateType = 1
											_this.show = true
											// 整包更新
										} else if (res.data.result.hotUpdate === 0 &&
											res.data.result.apkPath) {
											// 打开更新弹框
											_this.versionsFlag = 1
											_this.updateType = 2
											_this.show = true
										} else{
											_this.versionsFlag = 2
											_this.show = true
										}
									} else if (res.data.code == 500) {
										// uni.showToast({
										// 	title: res.data.message,
										// 	icon: 'none'
										// })
										_this.latestVersionInfo = res.data.message
										_this.versionsFlag = 2
										// _this.show = true
										// plus.nativeUI.toast(res.data.message)
									}
								} else {
									uni.showToast({
										title: '更新失败(获取签名失败)',
										icon: 'none'
									})
								}
							},
							fail: (res) => {
								console.log('fail', res);
							}
						})
					},
					fail: (res) => {
						console.log('fail', res);
					}
				})
			})
		},



//弹窗点击确认更新以后
updateNow() {
			let _this = this
			_this.versionsFlag = 3
			const uploadTask = uni.downloadFile({ // 下载apk/资源包
				url: _this.updateAPKPath,
				success: (downloadResult) => {
					console.log(downloadResult);
					if (downloadResult.statusCode === 200) {
						uni.clearStorage()
						plus.runtime.install(downloadResult.tempFilePath, {
								force: true
							},
							function() {
								plus.runtime.restart(); // 重启APP  
							},
							function(e) {
								_this.show = false
								uni.showToast({
									title: e.message,
									icon: 'none'
								})
							});
					} else {
						_this.show = false
						if (_this.updateType === 1) {
							uni.showToast({
								title: '资源包下载失败',
								duration: 2000,
								icon: 'error'
							})
						} else {
							uni.showToast({
								title: 'APK下载失败',
								duration: 2000,
								icon: 'error'
							})
						}
					}
				}
			});
            //监听下载进度 
			uploadTask.onProgressUpdate((res) => {
				_this.updateProgress = res.progress
				if (_this.updateType === 1) {
					if (res.progress > 95) {
						_this.restartFlag = true
					}
				}
			});
		},

感叹号7
关注
uniapp 实现 App 资源热更新的完整教程
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
11-26 1010
在日常开发中，我们经常会遇到应用需要更新的场景。如果每次更新都需要用户重新下载安装整个应用，不仅麻烦，还可能导致用户流失。这样不仅提升了用户体验，也减少了更新带来的额外麻烦。如果你对界面设计有更高要求，还可以自定义更美观的更新弹窗，给用户带来耳目一新的感受。如果有新版本，则展示弹窗提示用户更新。，即在不重新安装应用的前提下，更新部分资源或代码。如果用户中途取消更新，我们需要清理任务并关闭弹窗。），则需要重新打包整包，热更新将无效。当用户确认更新时，客户端会下载。包，并自动安装和重启应用。
uniapp版本更新
m0_51431448的博客
04-23 3788
app往往在关于我们的页面会有版本更新操作，还有一种情况是，我们要不要强制更新，一般后端都要去加个字段，就是标识着要不要强制更新，如果是强制更新这种，那还得在刚进入到app的时候就进行版本的检测对比，如果版本和最大版本不一致，就必须更新，不更新的话就用不了该app，如果版本一致就不需要做提示了，其实逻辑基本一样，就是在刚进入页面检测版本的时候，如果版本一直就不需要更新了。uniapp每次修改了代码，或是增加了功能都得重新打包，显得尤为麻烦，所以做了个自动更新的功能。下面说下app端实现自动更新的功能。
uniapp实现应用wgt资源热更新
imsopoor的博客
06-16 1万+
APP更新一般有两种形式1、整包更新，通过hbuliderx提供的在线云打包就属于整包更新，属于全量更新，缺点就是打包时间长、要重新走市场审核。费时2、wgt资源包热更新，通过hbuliderx打wgt包 ，速度快，能在应用打开就更新，跳过市场审核更新，很方便，但仅更新js代码，无法改变原生配置项。
uni-app uView2 实现app自动更新升级版本
weixin_45658815的博客
03-07 281
用户登录前检测是否是最新版本，若不是，提醒用户更新用户在设置模块下可以手动检测版本并升级。
uniApp实现APP整包版本更新——从检查更新到自动安装的完整指南
2301_77529176的博客
02-13 300
【代码】uniApp实现APP整包版本更新——从检查更新到自动安装的完整指南。
uniapp 打包app wgt热更新和整包更新以及更新弹窗动画
AKindofo的博客
06-05 2317
【代码】uniapp 打包app wgt热更新和整包更新以及更新弹窗动画。
**uniapp实现app版本更新：整包更新与热更新**
weixin_64648211的博客
08-27 2351
本博客将详细介绍如何通过后台接口获取最新的版本信息，检测更新并执行相应的更新操作。
uniapp之app版本更新，整体更新和热更新
Jocelyn_书
08-26 8029
工作中遇到一个需求，app上架各个市场后，用户 需要版本更新检验，下载最新的版本。每次升级之前，不管是热更新还是整体更新，都需要去更新。
uniapp 版本检查更新
carbonzhao的专栏
05-10 2973
总体来说uniapp的跨平台还是很不错的，虽然里面各种坑要去踩，但是踩坑也是开发人员的必修课和成长路。这不，今天就来研究了一下版本检查更新就踩到坑了。先来看看检查更新及下载、安装的实现。从左到右依次为检查到版本更新，下载安装过程，下载完成提示安装。我使用的是这个UI，你可以用也可以换掉！
uniapp-app自动提示版本更新
m0_65720832的博客
01-19 2814
uniapp 中实现 App 自动检测版本升级 - 掘金 (juejin.cn)【Uniapp】Uniapp 实现 App 版本自动升级_uniapp app更新服务端实现java-CSDN博客HTML5+ API Reference (html5plus.org)
uni-app之APP版本更新
XiaoHuiwei的博客
03-03 1002
uni-app APP版本更新。
uniapp热更新详细流程（App端）
二锅头
06-12 5413
将你写的云函数上传部署，如图右键，上传所有云函数（不然打包成app后，app无法使用该云函数，也就监测不到版本是否更新）最后，要更新版本时，在数据库中改新包的链接和版本号，再次登录app，即可监测到版本更新。当然，你也可自行创作开发个版本管理平台。祝，顺利。
uniapp [安卓苹果App端] - 最新实现“热更新“在线版本升级详细教程，支持后端服务器、云开发2种后台热更新版本控制逻辑，提供制作wgt包、精美更新提示弹框、资源在线更新、wgt静默更新无感知
王二红
09-01 1万+
uni-app，安卓Android，苹果ios，安卓app端，苹果App端，uniapp苹果安卓app，热更新，wgt，在线升级，整包更新，app升级，UniApp热更新，详细教程，wgt静默更新怎么做，后台无感知悄悄升级版本，热更新弹框，如何覆盖底部tabbar不被点击，云空间，云开发，云函数，服务器，版本号控制，热更新报错，显示下载进度，下载后无法安装，中途卡住不动，如何解决更新失败，强制更新，ios跳转更新，vue，跳转appStore，资源热更新组件，完整流程，前端后端都做什么，热更新详细流程(Ap
uniapp热更新（wgt）
热门推荐
qq_37049128的博客
08-12 2万+
uniapp分两种更新机制： 一、整包更新(这种方式比较繁琐，即每次更新之后就要打云包，更新整包，用户体验也不好) 二、资源包更新，即wgt（因第一种方法想到利用资源更新，用户体验大大提升，用户更新之后无需跳转到应用市场或者浏览器去重新更包，俗一点就是无感更新） wgt热更新的注意点 一、必须要获取appid 二、配置需要的版本名称和版本号 三、判断平台，区分安卓ios获取相对应的下载连接（第一次整包需要，之后全部是wgt资源包的下载地址） 四、在本地打包时和热更新时，App版本和wgt.
uniapp 制作 wgt 包（用于 app 的热更新）
朝阳39的博客
01-12 4415
修改 manifest.json 的配置，应用版本名称和应用版本号必须高于上一版的值。
uniapp 整包更新及定时自动更新
最新发布
supermanwdp的博客
03-12 263
在原来组件的基础上做二次开发。前提需要后端提供获取app更新接口 用于更新app包。项目需要用于后期自动更新app资源、提升用户体验。3、 添加公共自动更新方法类文件。
uni-app app版本更新,android、ios都可以更新（热/静默更新、整包更新）
qq_39532984的博客
07-06 2074
uni-app app版本更新需要后端储存版本号，格式（X.Y.Z）,更新规则为：X与Y的增加为整包更新，Z的增加为热更新，当然你也可以自己定义更新规则。前端引入appUpdate.js，修改获取后台接口部分内容后，直接执行packageUpdate方法即可。然后需要后端撰写一个接口，返回对象为。
通过脚本打包uniapp热更新wgt文件
JoveTAT的博客
07-31 1710
uniapp打包wgt文件
uni-app 整包更新
weixin_46166771的博客
09-27 695
在移动应用开发中，确保用户能够及时更新到最新版本是非常重要的。本文将介绍如何在 uni-app 中实现 App 整包更新功能，并提供相关代码示例以帮助理解。代码实现// 获取应用的版本信息try {// 调用接口检查更新url: myApi.appUpdate, //引入接口文件data: {},});// 如果返回结果为200，说明有新版本platform: 'android', // 更新平台updateContent: '更新提示，检测到最新版本', // 更新提示内容。
uniapp中app版本更新
09-27
在uniapp中，可以通过以下步骤实现app版本更新功能： 1. 在关于我们的页面中添加版本更新操作，并在后端添加一个字段来标识是否需要强制更新。 2. 当用户进入app时，进行版本检测对比。如果当前版本和最新版本不一致，根据是否需要强制更新来决定是否提示用户进行更新。如果版本一致，则无需进行更新提示。 3. 在打包应用时，需要注意修改应用版本名称和版本号，确保新版本高于上一次设置的版本号。 4. 对于uniapp的自动更新功能，可以在web端生成二维码供用户扫码下载app软件。具体实现方式如下： - 实现文件上传功能，将打包后的apk上传至服务器。 - 后端将apk包的路径返回给前端。 - 前端使用第三方插件生成二维码，用户扫码即可实现下载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值