实现基于uni-app的项目自动检查APP更新

我们平时工作中开发APP时，及时为用户提供应用更新是提升用户体验和保证功能完整性的重要一环。本文将通过一段实际的代码示例，详细介绍如何在基于uni-app框架的项目中实现自动检查应用更新的功能，并引导用户完成升级过程。该功能主要涉及与服务器端交互获取最新版本信息、比较版本号、提示用户升级以及处理下载安装流程。

创建一个checkappupdate.js文件

这个文件是写升级逻辑处理的文件，可以不创建，直接在App.vue中写，但是为了便于维护，还是单独放出来比较好，可以放在common或者util目录中（App.vue能引入到就行，随意放，根目录也行）,App.vue中引入该文件，调用升级函数如下图所示：

js完整代码

为了防止一点点代码写，容易让人云里雾里，先放完整代码，稍后再详细解释，其实看注释也就够了。

//这是服务端请求url配置文件,如果你直接卸载下面的请求中，可以不引入
import configService from '@/common/service/config.service.js'

export default function checkappupdate(param = {}) {
// 合并默认参数

	param = Object.assign({
title: "A new version has been detected！",
content: "Please upgrade the app to the latest version！",
canceltext: "No upgrade",
oktext: "Upgrade now"

	}, param)


	plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
let platform = plus.os.name.toLocaleLowerCase() //Android
let os_version = plus.os.version //13  安卓版本
let vendor = plus.device.vendor //Xiaomi
let url = configService.apiUrl

		uni.request({
url: url + '/checkAppUpdate',
method: 'GET',
data: {
platform: platform,
os_version: os_version,
vendor: vendor,
cur_version: widgetInfo.version

			},
success(result) {
console.log(result)
let versionCode = parseInt(widgetInfo.versionCode)
let data = result.data ? result.data : null;
// console.log(data);
let downAppUrl = data.url
//判断版本是否需要升级
if (versionCode >= data.versionCode) {
return;

				}
//升级提示

				uni.showModal({
title: param.title,
content: data.log ? data.log : param.content,
showCancel: data.force ? false : true,
confirmText: param.oktext,
cancelText: param.canceltext,
success: res => {
if (!res.confirm) {
console.log('Cancel the upgrade');
// plus.runtime.quit();
return

						}
// if (data.shichang === 1) {
// 	//去应用市场更新
// 	plus.runtime.openURL(data.shichangurl);
// 	plus.runtime.restart();
// } else {
// 开始下载
// 创建下载任务
var dtask = plus.downloader.createDownload(downAppUrl, {
filename: "_downloads/"

						},
function (d, status) {
// 下载完成
if (status == 200) {

									plus.runtime.install(d.filename, {
force: true

									}, function () {
//进行重新启动;

										plus.runtime.restart();

									}, (e) => {

										uni.showToast({
title: 'install fail:' + JSON

												.stringify(e),
icon: 'none'

										})
console.log(JSON.stringify(e))

									});

								} else {
this.tui.toast("download fail,error code: " +

										status);

								}

							});
let view = new plus.nativeObj.View("maskView", {
backgroundColor: "rgba(0,0,0,.6)",
left: ((plus.screen.resolutionWidth / 2) - 45) +
"px",
bottom: "80px",
width: "90px",
height: "30px"

						})


						view.drawText('start download...', {}, {
size: '12px',
color: '#FFFFFF'

						});

						view.show()
// console.log(dtask);

						dtask.addEventListener("statechanged", (e) => {
if (e && e.downloadedSize > 0) {
let jindu = ((e.downloadedSize / e.totalSize) *
100).toFixed(2)

								view.reset();

								view.drawText('Progress:' + jindu + '%', {}, {
size: '12px',
color: '#FFFFFF'

								});

							}

						}, false);

						dtask.start();
// }

					},
fail(e) {
console.log(e);

						uni.showToast({
title: 'Request error'

						})

					}

				})

			}

		})


	});

}

函数定义：checkappupdate

定义核心函数checkappupdate，它接受一个可选参数param，用于自定义提示框的文案等信息。函数内部首先通过Object.assign合并默认参数与传入参数，以确保即使未传入特定参数时也能有良好的用户体验。

获取应用信息与环境变量

利用plus.runtime.getProperty获取当前应用的详细信息，包括但不限于应用ID、版本号(version)和版本号代码(versionCode)，以及设备的操作系统名称、版本和厂商信息。这些数据对于后续向服务器请求更新信息至关重要。

请求服务器检查更新

构建包含平台信息、操作系统版本、设备厂商和当前应用版本号的请求参数，发送GET请求至配置好的API地址/checkAppUpdate，查询是否有新版本可用。后端返回参数参考下面：

   /**

     * 检测APP升级

     */
public function checkAppUpdate()
{
$data['versionCode'] = 101;//更新的版本号
$data['url'] = 'http://xxx/app/xxx.apk';//下载地址
$data['force'] = true;//是否强制更新
return json_encode($data);//返回json格式数据到前端

    }

比较版本与用户提示

一旦收到服务器响应，解析数据并比较当前应用的版本号与服务器提供的最新版本号。如果存在新版本，使用uni.showModal弹窗提示用户，展示新版本日志（如果有）及升级选项。此步骤充分考虑了是否强制更新的需求，允许开发者灵活配置确认与取消按钮的文案。

下载与安装新版本

用户同意升级后，代码将执行下载逻辑。通过plus.downloader.createDownload创建下载任务，并监听下载进度，实时更新进度提示。下载完成后，利用plus.runtime.install安装新APK文件，并在安装成功后调用plus.runtime.restart重启应用，确保新版本生效。

用户界面反馈

在下载过程中，通过创建原生覆盖层plus.nativeObj.View展示一个半透明遮罩和下载进度信息，给予用户直观的视觉反馈，增强了交互体验，进度展示稍微有点丑，可以提自己改改哈。

总结

通过上述步骤，我们实现了一个完整的应用自动检查更新流程，不仅能够有效通知用户新版本的存在，还提供了平滑的升级体验。此功能的实现，不仅提升了用户体验，也为产品迭代和功能优化提供了有力支持。开发者可以根据具体需求调整提示文案、下载逻辑、进度样式等细节，以更好地适配自身应用的特点和用户群体。