uniapp 热更新如何实现

在uniapp中如何实现热更新功能？需要手动编写更新逻辑还是可以使用现成的插件？具体步骤是什么？需要注意哪些兼容性和权限问题？

2 回复

使用 wgt 资源包更新。步骤如下：

  1. 后端生成 wgt 包，前端检测版本号。
  2. 下载 wgt 包，调用 plus.runtime.install 安装。
  3. 重启应用生效。

注意：iOS 需使用 TestFlight 或 App Store 更新，热更新可能违反审核规则。


在 UniApp 中实现热更新（无需重新上架应用商店即可更新应用内容）主要通过以下步骤实现，适用于 Android 和 iOS 平台：

实现原理

热更新通过下载并替换应用资源文件（如 JS、HTML、CSS、图片等）来动态更新内容，无需重新安装整个应用。UniApp 使用 wgt 包（资源包）进行更新。

实现步骤

  1. 生成 wgt 包：

    • 在 HBuilderX 中，选择「发行」→「制作移动 App 资源升级包」，生成 .wgt 文件。
    • 确保版本号（如 1.0.1）高于当前应用版本，以触发更新。

  2. 服务器准备：

    • 将 .wgt 包上传到服务器，并提供一个接口用于检查更新（例如返回最新版本号、下载地址等）。

  3. 应用端检查更新：

    • 在应用启动时，调用 API 检查服务器是否有新版本。
    • 使用 uni.downloadFile 下载 wgt 包，并通过 uni.applyUpdate 安装。

代码示例

以下是一个简单的热更新逻辑（在 App.vue 的 onLaunch 中调用）：

onLaunch: function() {
  // 检查更新
  this.checkUpdate();
},
methods: {
  checkUpdate() {
    // 假设接口返回 { version: '1.0.1', url: 'https://example.com/update.wgt' }
    uni.request({
      url: 'https://example.com/check-update', // 替换为你的接口
      success: (res) => {
        const latestVersion = res.data.version;
        const currentVersion = plus.runtime.version; // 当前应用版本
        
        if (this.compareVersion(latestVersion, currentVersion) > 0) {
          uni.showModal({
            title: '更新提示',
            content: '发现新版本，是否下载更新？',
            success: (modalRes) => {
              if (modalRes.confirm) {
                this.downloadUpdate(res.data.url);
              }
            }
          });
        }
      }
    });
  },

  downloadUpdate(url) {
    uni.downloadFile({
      url: url,
      success: (downloadRes) => {
        if (downloadRes.statusCode === 200) {
          // 应用更新
          plus.runtime.install(downloadRes.tempFilePath, {
            force: false
          }, function() {
            uni.showToast({
              title: '更新完成',
              icon: 'success'
            });
            // 重启应用
            plus.runtime.restart();
          }, function(error) {
            uni.showToast({
              title: '更新失败',
              icon: 'none'
            });
          });
        }
      }
    });
  },

  // 版本比较函数
  compareVersion(v1, v2) {
    const arr1 = v1.split('.');
    const arr2 = v2.split('.');
    const len = Math.max(arr1.length, arr2.length);
    
    for (let i = 0; i < len; i++) {
      const num1 = parseInt(arr1[i] || 0);
      const num2 = parseInt(arr2[i] || 0);
      if (num1 > num2) return 1;
      if (num1 < num2) return -1;
    }
    return 0;
  }
}

注意事项

  • 平台限制：
    • Android：支持热更新，但需确保应用有存储权限。
    • iOS：由于 App Store 政策限制，热更新可能被拒审。避免更新核心功能，仅用于修复非关键问题。
  • 权限配置：在 manifest.json 中配置存储权限（Android）。
  • 测试：在真机上测试更新流程，确保 wgt 包兼容。

总结

通过以上步骤，你可以实现 UniApp 的热更新功能。记得遵循平台政策，并测试兼容性。如果有复杂需求（如增量更新），可能需要结合原生插件或第三方服务。

回到顶部