uni-app APP版本更新、强制更新、静默更新、下载进度及自动检测更新功能

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app APP版本更新、强制更新、静默更新、下载进度及自动检测更新功能

a4593e90-7e36-11ea-b30b-f3b5f7f23172_0.jpg

开发环境 版本号 项目创建方式
4 回复

插件市场有


官方有一个升级中心

在uni-app中实现APP版本更新功能,包括强制更新、静默更新、下载进度显示以及自动检测更新,可以依赖uni-app的manifest.json配置和自定义插件或模块。以下是一个简要的实现思路和代码案例:

1. 自动检测更新功能

首先,在App.vueonLaunch方法中实现版本检测逻辑:

export default {
  onLaunch() {
    const currentVersion = uni.getSystemInfoSync().version; // 获取当前APP版本
    checkVersionUpdate(currentVersion);
  },
  methods: {
    async checkVersionUpdate(currentVersion) {
      try {
        const response = await uni.request({
          url: 'https://your-server.com/api/version', // 你的版本信息接口
          method: 'GET'
        });
        const latestVersion = response.data.version;
        if (compareVersions(currentVersion, latestVersion) < 0) {
          if (response.data.forceUpdate) {
            await showForceUpdateDialog(latestVersion);
          } else {
            await showUpdateDialog(latestVersion);
          }
        }
      } catch (error) {
        console.error('版本检测失败', error);
      }
    },
    compareVersions(v1, v2) {
      // 版本号比较函数
      const arr1 = v1.split('.');
      const arr2 = v2.split('.');
      for (let i = 0; i < Math.max(arr1.length, arr2.length); i++) {
        const num1 = parseInt(arr1[i] || 0, 10);
        const num2 = parseInt(arr2[i] || 0, 10);
        if (num1 > num2) return 1;
        if (num1 < num2) return -1;
      }
      return 0;
    },
    // ...showForceUpdateDialog, showUpdateDialog 函数实现(用于显示更新对话框)
  }
};

2. 强制更新与静默更新

showForceUpdateDialogshowUpdateDialog方法中,根据是否需要强制更新来决定下一步操作。强制更新可以直接下载新包并重启APP,而静默更新则可以在后台下载并在用户同意后安装。

async function showForceUpdateDialog(latestVersion) {
  // 显示强制更新对话框,用户点击确认后下载新包
  const confirm = await uni.showModal({
    title: '版本更新',
    content: `检测到新版本${latestVersion},请立即更新!`,
    showCancel: false
  });
  if (confirm.confirm) {
    downloadAndInstallAPK(latestVersion);
  }
}

async function showUpdateDialog(latestVersion) {
  // 显示更新对话框,用户可选择稍后更新或立即更新
  const { confirm } = await uni.showModal({
    title: '版本更新',
    content: `检测到新版本${latestVersion},是否立即更新?`,
    showCancel: true
  });
  if (confirm.confirm) {
    downloadAndInstallAPK(latestVersion, true); // true 表示非强制更新,可以静默下载
  }
}

3. 下载进度及安装

downloadAndInstallAPK方法负责下载APK文件并监控下载进度,下载完成后提示用户安装。

async function downloadAndInstallAPK(version, silent = false) {
  // 使用uni.downloadFile下载APK文件,并在onProgressUpdate中更新下载进度
  const task = uni.downloadFile({
    url: `https://your-server.com/apk/yourapp-${version}.apk`,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (saveRes) => {
            if (silent) {
              // 静默安装逻辑(需要系统权限,通常不适用于iOS)
            } else {
              uni.showModal({
                title: '下载完成',
                content: '是否立即安装?',
                success: (modalRes) => {
                  if (modalRes.confirm) {
                    installAPK(saveRes.savedFilePath);
                  }
                }
              });
            }
          }
        });
      }
    },
    fail: (err) => {
      console.error('下载失败', err);
    }
  });

  task.onProgressUpdate((res) => {
    console.log('下载进度', res.progress);
    // 更新UI显示下载进度
  });
}

function installAPK(filePath) {
  // 安装APK的逻辑(Android专有,需要系统权限)
  uni.openDocument({
    filePath: filePath,
    fileType: 'application/vnd.android.package-archive',
    success: function () {
      console.log('安装成功');
    },
    fail: function (err) {
      console.error('安装失败', err);
    }
  });
}

注意:iOS平台不支持静默更新和直接安装APK,需要通过App Store进行版本更新。

回到顶部