uniapp实现app热更新

开发app时,每次更新是很头疼的一件事,尤其是有些需要让到指定平台下载的,每次都还要审核好久,因此推荐一个无需更换apk/ipa的的热更新方式:wgt包热更新
使用wgt热更新首先要保证自己线上已经有个正式apk、ipa的下载地址,主要用于常规下载,且保证打包的wgt的manifest.json的配置和之前的一致(版本号除外,版本号每次要比之前的大)
制作wgt位置
新的wgt包的版本号要比之前的大

首先要获取当前的应用版本号,然后根据和后端的配合进行处理~
我这边是通过返回的版本号提交给后端,后端有记录最新的版本号进行区分,能够更新就返回给我新版本信息(包含wgt包的地址之类的信息)

//#ifdef APP-PLUS
	// 获取本地应用资源版本号
	uni.getSystemInfo({
		success: (res) => {
			that.post('/api/index/getAppVersion', {
				version: res.appWgtVersion
			}).then(res => {
				that.newVerisonInfo = res
			})
		}
	})
//#endif

根据返回信息有了新包的内容,就弹出更新的弹窗,这个根据自己的ui进行完善,最后执行的下载就不需要区分安卓或ios,因为这个wgt包都能够识别并下载~()


downLoadApp(){
	var that = this
	that.progress = true  // progress 进度条看ui实际情况选择加不加
	var downloadTask = uni.downloadFile({ //执行下载
		url: '更换自己的下载地址', // 下载地址
		success: downloadResult => {
			if (downloadResult.statusCode == 200) {
				plus.runtime.install(
					downloadResult.tempFilePath, {
						force: true //true表示强制安装,不进行版本号的校验;false则需要版本号校验(即wgt的版本号要大于当前app版本号即可)
					},
					function() {
						that.progress = false // 关闭下载进度弹窗
						uni.showModal({
							title: '下载成功',
							content: '更新成功,请重启应用',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									plus.cache.clear();
									plus.runtime.restart();
								}
							}
						})
					}
				);
			}
		},
		fail: (err) => {
			that.progress = false // 关闭下载进度弹窗
		},
		});
				// 监听下载进度
	downloadTask.onProgressUpdate((res) => {
		that.downLoadPercentage = res.progress
	});
}

如若wgt包的配置文件进行改变,则会出现可以下载没有安装的情况~(本人实测,apk包的配置没有包含share的配置,制作wgt包时添加了share的配置,导致安卓可以正常下载安装,但是ios只能下载,没有安装,后来取消share配置打包的wgt,ios就正常下载安装了)
添加新配置记得要打包apk、ipa进行上传之后,再用wgt包热更新哦~~

UniApp实现 App热更新功能,通常依赖于 H5 的特性以及原生 App热更新机制。热更新允许在不重新发布整个应用的情况下,更新部分资源文件,从而快速修复 bug 或更新界面内容。以下是实现热更新的几种方法: ### 1. 使用 H5 热更新机制 对于基于 H5 的 UniApp 应用,可以通过重新加载更新的资源文件来实现热更新- **步骤**: - 将需要更新的页面或组件打包成 `.wgt` 文件(即资源包)。 - 将该资源包上传到服务器,并提供一个更新接口。 -App 中请求该接口,获取最新的版本信息。 - 如果发现新版本,则下载 `.wgt` 文件并进行替换。 - 最后重新加载页面即可生效。 示例代码片段: ```javascript // 检查热更新 checkHotUpdate() { uni.request({ url: 'https://yourdomain.com/check-update', // 请求更新接口 success: (res) => { if (res.data.hasUpdate) { uni.downloadFile({ url: res.data.updateUrl, // 下载更新包 success: (downloadRes) => { if (downloadRes.statusCode === 200) { uni.saveFile({ tempFilePath: downloadRes.tempFilePath, success: (saveRes) => { uni.loadPages({ pages: saveRes.savedFilePath // 加载更新后的页面 }); } }); } } }); } } }); } ``` ### 2. 使用原生 App热更新机制 对于原生 App,可以通过 UniApp 提供的 `plus` API 实现热更新- **步骤**: - 通过 `plus.runtime.getProperty` 获取当前应用的版本信息。 - 向服务器发起请求,检查是否有新的 `.wgt` 文件。 - 如果存在更新,则下载 `.wgt` 文件。 - 使用 `plus.runtime.install` 方法安装更新包。 - 最后提示用户重启应用以应用更新。 示例代码片段: ```javascript // 检查并安装热更新 checkNativeHotUpdate() { plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => { uni.request({ url: 'https://yourdomain.com/check-native-update', success: (res) => { if (res.data.version > widgetInfo.version) { uni.downloadFile({ url: res.data.updateUrl, success: (downloadRes) => { if (downloadRes.statusCode === 200) { plus.runtime.install(downloadRes.tempFilePath, { force: false }, () => { uni.showToast({ title: '更新成功,请重启应用' }); }, (e) => { uni.showToast({ title: '安装失败', icon: 'none' }); }); } } }); } } }); }); } ``` ### 3. 整包更新与热更新的对比 - **整包更新**:需要用户重新下载整个 `.apk` 文件(适用于 Android),更新内容较大,但可以包含完整的资源和代码更新。 - **热更新**:仅更新部分资源文件(如 `.wgt` 文件),更新速度快,适合小范围的修复和优化。 根据需求选择合适的更新方式,例如,对于需要大规模改动的更新,建议使用整包更新;而对于小范围的 bug 修复或界面优化,推荐使用热更新 [^1]。 ### 4. 更新内容的版本管理 为了确保更新的顺利进行,应在服务器端维护版本号和更新内容。客户端在请求更新时,可以比较当前版本号与服务器上的版本号,判断是否需要更新。 - **版本号**:通常使用 `versionCode` 来标识应用的版本。 - **更新内容**:可以通过接口返回更新说明,让用户了解更新的细节。 示例接口返回数据: ```json { "hasUpdate": true, "version": "1.0.1", "updateUrl": "https://yourdomain.com/update.wgt", "updateContent": "修复了已知的 bug,优化了用户体验。" } ``` ### 5. 用户提示与更新流程 在热更新过程中,需要向用户展示清晰的提示信息,例如: - 是否有新的更新。 - 更新的内容说明。 - 下载进度。 - 安装完成后的提示。 通过合理的用户交互设计,可以提升用户的更新体验,并减少更新过程中的困惑。 ### 6. 热更新的限制与注意事项 - **兼容性问题**:热更新仅适用于资源文件的更新,不能更新原生代码。 - **安全性**:确保更新包的来源安全,防止恶意更新。 - **网络依赖**:热更新需要稳定的网络连接,下载更新包时可能会受到网络影响。 通过以上方法,可以在 UniApp实现高效的热更新功能,从而提升应用的维护效率和用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值