uniapp之app在线升级

wangming
uniapp
2025-06-13
23热度

整体逻辑：
一、要知道什么情况下会更新
二、更新之后从哪去下载更新资源
三、选择哪一种更新方式

1、需要在后台定义一个接口，将版本返回到app，每次更新的时候需要设置版本（务必要大于前一版本

2、app接收到数据之后做处理，选择哪种更新方式，以及对应的处理逻辑
热更新(type=0)

整包更新(type=1)

3、app两种更新方式对应的打包操作

3.1、热更新–将最新的程序打包成wgt文件
首先需要在manifest.json文件中修改版本号，修改的版本号必须大于上一个版本

3.1.1、在发行中选择原生app-制作应用wgt包，如下图所示

3.1.2、生成的资源包在项目中的位置如下图所示

3.1.3、将资源包上传到服务其中（要有一个能在线的下载的链接）
ps：我所做的项目中有个文件上传功能，就使用了这个方法，将链接作为1.1中的url参数返回给前端

3.2、整包更新，将项目打包成.apk文件
3.2.1、在发行中选择原生app-云打包，如下图所示

3.2.2、文件位置如图所示，资源上传方式同上

ps：
1、首次安装需要通过这种方式安装到手机
2、如果想卸载之前更新的内容，则通过手机中的设置，找到我们的软件清除全部数据即可

附源码：
uniapp：

<script>
	import config from './config'
	import store from '@/store'
	import {
		getToken
	} from '@/utils/auth'
	import {
		checkUpdate
	} from './api'
	export default {
		onLaunch: function() {
			this.initApp()
			this.updateApp()
		},
		methods: {
			// 更新app
			updateApp() {
				// console.log(uni.getSystemInfoSync(),'版本信息');
				checkUpdate().then(res => {
					console.log(res.data, '更新接口')
					let updateData = res.data
					if (updateData.type == 0) {

						plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
							console.log(widgetInfo, '获取的信息')
							if (widgetInfo.version != updateData.version && widgetInfo.versionCode != updateData.versionCode) {
								uni.showModal({
									title: '发现新版本！！',
									content: '确认下载更新',
									success(res) {
										if (res.confirm == true) {
											console.log('进入方法')
											plus.nativeUI.showWaiting('资源下载中...');
											uni.downloadFile({
												url: updateData.url,
												success: (downloadResult) => {
													console.log(downloadResult, '下载数据')
													if (downloadResult.statusCode === 200) {
														plus.nativeUI.showWaiting('系统更新中...');
														console.log('调用a')
														plus.runtime.install(downloadResult.tempFilePath, {
															force: false
														}, function() {
															plus.nativeUI.closeWaiting();
															console.log('调用b')
															console.log('install sucess....')
															plus.runtime.restart();
															return;
														}, function() {
															console.log('install fail....')
															plus.nativeUI.closeWaiting();
														})
													}
											
												}
											})
										
										} else {
											console.log('取消下载')
											return false;
										}
									}
								})								
							}
						})
					} else {
						// 下载更新的数据  整包更新
					plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
						if (widgetInfo.version != updateData.version && widgetInfo.versionCode != updateData.versionCode) {
							uni.showModal({
								title:'发现新版本！！',
								content:'确认下载更新',
								success(res) {
									if(res.confirm == true) {
									   plus.runtime.openURL(updateData.url);
									} else {
										console.log('取消下载')
										return false;
									}
								}
							})
						} else {
							console.log('已是最新版本！')
						}
					})		
					}
				})
			},
			// 初始化应用
			initApp() {
				// 初始化应用配置
				this.initConfig()
				// 检查用户登录状态
				this.checkLogin()
				//#ifdef H5
				//#endif
			},
			initConfig() {
				this.globalData.config = config
			},
			checkLogin() {
				if (!getToken()) {
					if (config.userFlag) {
						//重定向身份选择页面
						uni.reLaunch({
							url: '/pages/role'
						})
					} else {
						//重定向登录页面
						uni.reLaunch({
							url: '/pages/login'
						})
					}
				}

				// if (!getToken()) {
				//   this.$tab.reLaunch('/pages/role') 
				// }
			}
		}
	}
</script>

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
	@import '@/static/scss/index.scss';
	@import "@/static/font/iconfont2.css";
</style>

<script>
	import config from './config'
	import store from '@/store'
	import {
		getToken
	} from '@/utils/auth'
	import {
		checkUpdate
	} from './api'
	export default {
		onLaunch: function() {
			this.initApp()
			this.updateApp()
		},
		methods: {
			// 更新app
			updateApp() {
				// console.log(uni.getSystemInfoSync(),'版本信息');
				checkUpdate().then(res => {
					console.log(res.data, '更新接口')
					let updateData = res.data
					if (updateData.type == 0) {

						plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
							console.log(widgetInfo, '获取的信息')
							if (widgetInfo.version != updateData.version && widgetInfo.versionCode != updateData.versionCode) {
								uni.showModal({
									title: '发现新版本！！',
									content: '确认下载更新',
									success(res) {
										if (res.confirm == true) {
											console.log('进入方法')
											plus.nativeUI.showWaiting('资源下载中...');
											uni.downloadFile({
												url: updateData.url,
												success: (downloadResult) => {
													console.log(downloadResult, '下载数据')
													if (downloadResult.statusCode === 200) {
														plus.nativeUI.showWaiting('系统更新中...');
														console.log('调用a')
														plus.runtime.install(downloadResult.tempFilePath, {
															force: false
														}, function() {
															plus.nativeUI.closeWaiting();
															console.log('调用b')
															console.log('install sucess....')
															plus.runtime.restart();
															return;
														}, function() {
															console.log('install fail....')
															plus.nativeUI.closeWaiting();
														})
													}
											
												}
											})
										
										} else {
											console.log('取消下载')
											return false;
										}
									}
								})								
							}
						})
					} else {
						// 下载更新的数据  整包更新
					plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
						if (widgetInfo.version != updateData.version && widgetInfo.versionCode != updateData.versionCode) {
							uni.showModal({
								title:'发现新版本！！',
								content:'确认下载更新',
								success(res) {
									if(res.confirm == true) {
									   plus.runtime.openURL(updateData.url);
									} else {
										console.log('取消下载')
										return false;
									}
								}
							})
						} else {
							console.log('已是最新版本！')
						}
					})		
					}
				})
			},
			// 初始化应用
			initApp() {
				// 初始化应用配置
				this.initConfig()
				// 检查用户登录状态
				this.checkLogin()
				//#ifdef H5
				//#endif
			},
			initConfig() {
				this.globalData.config = config
			},
			checkLogin() {
				if (!getToken()) {
					if (config.userFlag) {
						//重定向身份选择页面
						uni.reLaunch({
							url: '/pages/role'
						})
					} else {
						//重定向登录页面
						uni.reLaunch({
							url: '/pages/login'
						})
					}
				}

				// if (!getToken()) {
				//   this.$tab.reLaunch('/pages/role') 
				// }
			}
		}
	}
</script>

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
	@import '@/static/scss/index.scss';
	@import "@/static/font/iconfont2.css";
</style>

后台：

@PostMapping("/checkUpdate")
public AjaxResult checkUpdate(){
    /**
     * type: 更新类型，0：热更新，1：下载apk
     * version/versionCode： 版本名称/版本号，手动设置，需要比正在使用的软件版本高
     * url: 下载地址，分为apk和wgt两种更新包的地址
     */
    String configByKey = sysConfigService.selectConfigByKey("app.update");
    JSONObject configObj = new JSONObject(configByKey);
    System.out.println(configObj.get("version"));

    JSONObject data = new JSONObject();

    data.put("type", configObj.get("type"));
    data.put("version",configObj.get("version").toString());
    data.put("versionCode",configObj.get("versionCode").toString());
    data.put("url",configObj.get("url").toString());

// data.put("url","https://s.qiantongkeji.com/2024/08/08/b99c6d58a67b7e71ae090ee6399837c3.apk");
return AjaxResult.success(data);
}