uniapp实现APP版本更新

思路：实现App版本更新主要通过以下几个步骤实现

1. 获取App版本信息
2. 检查当前的App版本
3. 提示安装升级版本

实现步骤

• 步骤一：定义当前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>