UNIAPP实现APP自动更新

整体思路和API使用

工作流程

• 
  
• App 启动时检查更新
  
• 发现新版本时显示更新提示
  
• 如果是强制更新，用户必须更新
  
• 下载完成后自动安装
  

API

• 
  
• getVersion：自己服务器API，返回版本号、下载地址等信息
  
• plus.runtime.getProperty：获取APP当前版本号
  
• uni.downloadFile：下载文件
  
• plus.runtime.install：安装软件
  
• downloadTask.onProgressUpdate：监听下载进度
  

具体实现

后端getVersionAPI代码

// Version.java
@Data
public class Version {
private String version;      // 版本号
private String downloadUrl;  // 下载地址
private String description; // 更新说明
private boolean forceUpdate; // 是否强制更新

}

// VersionController.java
@RestController
@RequestMapping("/api/version")
public class VersionController {

@GetMapping("/check")
public Result checkVersion(@RequestParam String currentVersion) {
Version version = new Version();

        version.setVersion("1.1.7");  // 最新版本号

        version.setDownloadUrl("软件下载地址"); // 下载地址

        version.setDescription("1. 修复已知问题\n2. 新增功能");

        version.setForceUpdate(true);  // 是否强制更新

// 比较版本号
if (compareVersion(currentVersion, version.getVersion()) < 0) {
return Result.success(version);

        }

return Result.success(null);

    }

// 版本号比较方法
private int compareVersion(String v1, String v2) {

        String[] version1 = v1.split("\\.");

        String[] version2 = v2.split("\\.");

int i = 0;
while (i < version1.length && i < version2.length) {
int num1 = Integer.parseInt(version1[i]);
int num2 = Integer.parseInt(version2[i]);

if (num1 < num2) return -1;
else if (num1 > num2) return 1;

            i++;

        }

if (version1.length < version2.length) return -1;
if (version1.length > version2.length) return 1;
return 0;

    }

}

其中Version类可以写到数据库中获取

前端update.js封装

// 版本更新工具类 - 使用单例模式确保全局只有一个更新实例
import {

	check

} from "../api/util/util";

class AppUpdate {
constructor() {
// 当前应用版本号
this.currentVersion = '';
// 服务器返回的更新信息
this.updateInfo = null;

    }

// 检查更新方法
checkUpdate() {
//仅在app环境下运行
// #ifdef APP-PLUS 

        plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
this.currentVersion = widgetInfo.version;
console.log('当前版本:' + this.currentVersion);
check(this.currentVersion).then(res => {
if (res.data.data) {
this.updateInfo = res.data.data;
this.showUpdateDialog();

		}

            })

            .catch(err => {
console.log(err);

            });

        });

// #endif

	}
showUpdateDialog() {

		uni.showModal({
title: '发现新版本',
content: this.updateInfo.description,
confirmText: '立即更新',
cancelText: '稍后再说',
showCancel: !this.updateInfo.forceUpdate, // 强制更新时禁止取消
success: (res) => {
if (res.confirm) {
this.downloadApp();

				} else if (this.updateInfo.forceUpdate) {

					plus.runtime.quit();

				}

			}

		});

	}

downloadApp() {
/* uni.showLoading({

			title: '下载中...',

			mask: true // 添加遮罩防止重复点击

		}); */

// 先打印下载地址，检查 URL 是否正确
console.log('下载地址:', this.updateInfo.downloadUrl);
let showLoading=plus.nativeUI.showWaiting('正在下载');
const downloadTask = uni.downloadFile({
url: this.updateInfo.downloadUrl,
success: (res) => {
console.log('下载结果:', res); // 添加日志
if (res.statusCode === 200) {
console.log('开始安装:', res.tempFilePath); // 添加日志

			plus.runtime.install(

				res.tempFilePath, {
force: false

				},
() => {
console.log('安装成功'); // 添加日志

					 plus.nativeUI.closeWaiting();

					plus.runtime.restart();

				},
(error) => {
console.error('安装失败:', error); // 添加错误日志

						 plus.nativeUI.closeWaiting();

						uni.showToast({
title: '安装失败: ' + error.message,
icon: 'none',
duration: 2000

					});

				}

                    );

		} else {
console.error('下载状态码异常:', res.statusCode); // 添加错误日志

			 plus.nativeUI.closeWaiting();

			uni.showToast({
title: '下载失败: ' + res.statusCode,
icon: 'none',
duration: 2000

			});

		}

	},
fail: (err) => {
console.error('下载失败:', err); // 添加错误日志

		 plus.nativeUI.closeWaiting();

		uni.showToast({
title: '下载失败: ' + err.errMsg,
icon: 'none',
duration: 2000

		});

	}

});

//监听下载进度

downloadTask.onProgressUpdate((res) => {
console.log('下载进度:', res.progress); // 添加进度日志
if (res.progress > 0) { // 只在有实际进度时更新提示

		showLoading.setTitle('正在下载'+res.progress+'%');

	}

    });

	}

}

//单例模式实现
let instance = null;

export default {
getInstance() {
if (!instance) {

			instance = new AppUpdate();

		}
return instance;

	}

}

注意：如果直接使用uni.showLoading来显示下载进度，会造成闪烁效果，所以这里用let showLoading=plus.nativeUI.showWaiting('正在下载');

引用js

以app.vue为例，在启动时触发检查更新

import AppUpdate from '@/utils/update.js';

export default {
onLaunch: function() {
// #ifdef APP-PLUS
AppUpdate.getInstance().checkUpdate();
// #endif

    }

}

在 manifest.json 中配置权限

{
"app-plus": {
"distribute": {
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.INSTALL_PACKAGES\"/>",
"<uses-permission android:name=\"android.permission.REQUEST_INSTALL_PACKAGES\"/>"

                ]

            }

        }

    }

}

这样封装的优点

• 
  
• 代码更加模块化
  
• 可以在任何地方调用
  
• 使用单例模式避免重复创建
  
• 更容易维护和扩展