使用vue H5打包的App如何检测版本更新？

前言：
本文章使用的是Vue+H5+Plus技术，结合Hbuildx打包的App，实现在App中检测版本和更新功能。

以下为实现相关代码介绍：

1、detectVersion() 方法在调用检测时触发的，主要用来检测当前App的版本是不是最新版本，如果当前版本不是最新版本，则需要给用户显示更新页面进行更新。

// 检测版本更新
detectVersion(){ // 发送请求
	axios({
		method: "post",
        timeout: 15000,
        url:'http://xxx.xxx.xxx', // 检测App是否有更新的地址
		data: {
            version：'1.0' // 当前版本号
        },
	}).then(response => {
        const path = response.path // 获取app 更新地址
        this.plusDownloader(path)
	})
	.catch(error => {
        console.log(error)
	});
},

2、plusDownloader()  方法是在用户确认更新时调用，主要实现了下载安装包以及实时更新进度条

// 下载监听器 urlPath: "http://下载链接.apk"
plusDownloader(urlPath){
    if(plus){
        const that = this
        // that.showProgress = true // 显示进度条组件（如果有）
        plus.nativeUI.showWaiting("新版本更新中，请耐心等待~");
        
        var downloadTask = plus.downloader.createDownload(urlPath,{}, function (d, status) {
            if (status == 200)  that.installWgt(d.filename);	// 安装wgt资源包
            else plus.nativeUI.toast("下载更新失败！");
            plus.nativeUI.closeWaiting();
        })
        downloadTask.start(); // 开始下载
        // 下载时实时显示下载进度
		var prg = 0;
		downloadTask.addEventListener("statechanged", function (task, status) { // 给下载任务设置一个监听 并根据状态  做操作
			switch (task.state) {
				case 1:
					//'正在下载';
					break;
				case 2:
					// '已连接到服务器';
					break;
				case 3:
					prg = parseInt((parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) * 100);
					that.percentageNum = prg; // 赋值进度
					break;
				case 4:
					that.showProgress = false; // 进度条隐藏
					break;
			}
		});
    }
},

3、 installWgt() 方法是在一切准备就绪后进行App的安装工作

installWgt(path) { // 安装
    const _this = this
    plus.nativeUI.closeWaiting();
	plus.nativeUI.showWaiting("安装更新");
	plus.runtime.install(
		path,
		{},
		function () { // 安装更新成功
			plus.nativeUI.closeWaiting();
			plus.nativeUI.alert("更新完成！", function () {
				plus.runtime.restart(); //安装成功后重启应用
			});
		},
		function (e) { // 安装更新失败
			plus.nativeUI.closeWaiting();
			// console.log("安装更新失败！[" + e.code + "]：" + e.message);
			plus.nativeUI.toast("安装更新失败！");
		}
	);
},

        

总结：

在App中检测版本更新首先需要判断当前已安装的app版本号是否是最新的（可通过后端接口返回、也可通过第三方SDK 中的API 来获取是否为最新版本），不是最新的则执行版本更新功能（plusDownloader 方法）。实现方式主要通过plus.downloader.createDownload下载apk包，下载完成后通过plus.runtime.install来进行安装，在下载时给下载任务设置一个监听根据状态实时更新下载进度