思路:实现App版本更新主要通过以下几个步骤实现
- 获取App版本信息
- 检查当前的App版本
- 提示安装升级版本
实现步骤
-
步骤一:定义当前APP的版本号
- 方式一:自定义app版本号,目前我采用的是这种方式
let currentVersion = '1.0.0.100'
- 方式二:在
manifest.json
修改app版本号,通过plus.runtime.getProperty
获取版本号
// 设置版本号 { "name": "app名称", "appid": "appid", "description": "app名称", "versionName": "1.0.0.100", }
// 获取版本号 plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) { currentVersion = widgetInfo.version; console.log("当前版本", currentVersion); });
-
步骤二:从后端接口或者其他方式获取最新的App版本信息
import { checkLastData } from '@/services/api'
let reqVersion =''
let reqDownLoadUrl = ''
checkLastData().then((res: any) => {
const { data } = res || {}
// 接口返回的版本
reqVersion = data.currentVersion
// 接口返回最新APP下载地址
reqDownLoadUrl = data.downloadUrl
})
- 步骤三:版本比较
function compareVersion(ov: any, nv: any) { // ov为本地历史版本,nv为当前线上版本
if (!ov || !nv || ov === '' || nv === '') {
return false
}
const ova = ov.split('.', 4)
const nva = nv.split('.', 4)
for (let i = 0; i < ova.length && i < nva.length; i++) {
const so = ova[i]
const no = Number.parseInt(so)
const sn = nva[i]
const nn = Number.parseInt(sn)
if (nn > no || sn.length > so.length) {
return true
}
else if (nn < no) {
return false
}
}
if (nva.length > ova.length && nv.indexOf(ov) === 0) {
return true
}
}
compareVersion(currentVersion,reqVersion)
- 步骤四:下载应用资源
// 下载wgt文件
function downUpgrade () {
plus.downloader.createDownload(reqDownLoadUrl, { filename: "_doc/update/" }, function (d, status) {
if (status == 200) {
plus.nativeUI.confirm('升级包下载完成,是否安装最新版本?', function (e) {
if (e.index > 0) {
installWgt(d.filename); // 安装wgt包
}
}, 'HelloH5', ['取消', '确定']);
} else {
console.log("下载wgt失败!");
}
}).start();
}
- 步骤五:更新应用资源
function installWgt (path) {
plus.nativeUI.showWaiting("安装升级文件...");
plus.runtime.install(path, {}, function () {
plus.nativeUI.closeWaiting();
// 是否立即重启
plus.nativeUI.confirm('应用资源更新完成,是否立即重启生效?', function (e) {
if (e.index > 0) {
plus.runtime.restart();
}
}, 'HelloH5', ['取消', '确定']);
}, function (e) {
plus.nativeUI.closeWaiting();
plus.nativeUI.toast("安装wgt文件失败[" + e.code + "]:" + e.message);
});
}
完整示例代码如下
import { checkLastData } from '@/services/api'
import { version } from '@/modules/config'
// 通过接口请求,获取线上的版本号
let reqVersion = ''
// 获取当前版本号
let currentVersion: any = ''
// 获取线上的下载地址
let reqDownLoadUrl = ''
// 检查版本是否更新升级
export function checkUpdate() {
checkLastData().then((res: any) => {
const { data } = res || {}
reqVersion = data.currentVersion
currentVersion = version
reqDownLoadUrl = data.downloadUrl
if (compareVersion(currentVersion, reqVersion)) { // 判断当前版本是否需要更新
plus.nativeUI.confirm('发现新版本' + reqVersion + '是否下载', function (e) {
if (e.index > 0) {
plus.nativeUI.toast('升级包下载中...');
downUpgrade(); // 下载升级包
}
}, '', ['取消', '确定']);
}
else {
$toast.show(t('main.latestVersion'))
}
})
}
//版本比较
function compareVersion (ov, nv) { // ov为本地历史版本,nv为当前线上版本
if (!ov || !nv || ov == "" || nv == "") {
return false;
}
var b = false,
ova = ov.split(".", 4),
nva = nv.split(".", 4);
for (var i = 0; i < ova.length && i < nva.length; i++) {
var so = ova[i], no = parseInt(so), sn = nva[i], nn = parseInt(sn);
if (nn > no || sn.length > so.length) {
return true;
} else if (nn < no) {
return false;
}
}
if (nva.length > ova.length && 0 == nv.indexOf(ov)) {
return true;
}
}
// 下载wgt文件
function downUpgrade () {
plus.downloader.createDownload(reqDownLoadUrl, { filename: "_doc/update/" }, function (d, status) {
if (status == 200) {
plus.nativeUI.confirm('升级包下载完成,是否安装最新版本?', function (e) {
if (e.index > 0) {
installWgt(d.filename); // 安装wgt包
}
}, 'HelloH5', ['取消', '确定']);
} else {
console.log("下载wgt失败!");
}
}).start();
}
// 更新应用资源
function installWgt (path) {
plus.nativeUI.showWaiting("安装升级文件...");
plus.runtime.install(path, {}, function () {
plus.nativeUI.closeWaiting();
// 是否立即重启
plus.nativeUI.confirm('应用资源更新完成,是否立即重启生效?', function (e) {
if (e.index > 0) {
plus.runtime.restart();
}
}, 'HelloH5', ['取消', '确定']);
}, function (e) {
plus.nativeUI.closeWaiting();
plus.nativeUI.toast("安装wgt文件失败[" + e.code + "]:" + e.message);
});
}
使用
import { checkUpdate } from '@/utils/checkVsersionUpdate'
// 更新app
async function updateApp() {
await checkUpdate()
}
<div class="mx-auto mt-50 cursor-pointer text-center text-12" @click="updateApp">
<a class="text-blue">检查更新</a>
</div>