uniapp实现热更新-猿码集

1. 什么是uniapp热更新

在大型应用中，应用的更新需要考虑到许多因素，例如用户离线状态、网络连接的可靠性、服务器稳定性等。通过传统的更新方式，用户需要手动进行下载并安装更新包，因此效率较低且用户体验较差。此时，uniapp热更新应运而生。

uniapp热更新是指应用程序在运行时通过网络接收更新包，并动态更新应用程序的某些部分，以提高更新效率和提升用户体验。

2. uniapp热更新的优势和劣势

2.1 优势

提高更新效率。uniapp热更新能够避免整包更新，仅更新部分内容，大大提高了更新速度。

提升用户体验。用户只需要一次点击，应用程序就可以自动更新，而不需要用户等待整个更新过程。

简化开发流程。开发人员不用再关心更新的部分，仅需关注业务逻辑的实现，大大减少了工作量。

2.2 劣势

尽管uniapp热更新的优势比较显著，但是还是存在一些劣势：

稳定性差。由于更新是在线完成的，如果过程中出现网络异常或其他问题，可能会导致应用程序失效或数据错乱。

功能受限。由于需要动态更新，因此需要掌握动态更新的要点，同时要求更新内容不涉及应用程序底层结构和API等。

3. uniapp热更新的实现

3.1 接入方式

uniapp热更新是基于uni-center提供的接口实现，现在支持uniCloud实现；

3.2 前置条件

应用已上传至uni-app

应用已关联至一个uni-center

自行托管的应用需要开通uni-app热更新服务

3.3 热更新流程

uniapp热更新的流程如下：

开发者提交更新包到uni-center。

应用使用uni-center提供的API检测更新。

应用下载差分包并解压。

应用对比新旧差分包并更新。

3.4 代码示例

以下是一个简单的uniapp热更新代码示例：


import { getUpdateManager } from 'uni-app';
const updateManager = getUpdateManager();
updateManager.onCheckForUpdate(function (res) {
  if (res.hasUpdate) {
    uni.showModal({
      title: '更新提示',
      content: '有新版本可用，请问您是否要更新？',
      success: function (res) {
        if (res.confirm) {
          updateManager.onUpdateReady(function () {
            uni.showModal({
              title: '更新提示',
              content: '新版本已经准备好，是否重启应用？',
              success: function (res) {
                if (res.confirm) {
                  updateManager.applyUpdate();
                }
              }
            });
          });
        }
      }
    });
  }
});

以上代码完整的实现了检测更新，下载更新，更新准备，重启应用的过程。

4. uniapp热更新的注意事项

4.1 状态判断

更新状态的判断可以使用uni.getUpdateManager().onCheckForUpdate函数，该函数会返回一个包含 hasUpdate 属性的对象，在这个函数里我们可以判断是否有更新的包需要下载：


updateManager.onCheckForUpdate(function (res) {
  if (res.hasUpdate) {
    // 进行更新
  } else {
    // 已经是最新版本
  }
});

4.2 更新进度

更新进度的判断可以使用uni.getUpdateManager().onUpdateReady函数，该函数会在更新包下载完成并解压成功后触发：


updateManager.onUpdateReady(function () {
  uni.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    success: function (res) {
      if (res.confirm) {
        // 进行应用重启
      }
    }
  });
});

4.3 更新后重启应用

重启应用需要使用uni.getUpdateManager().applyUpdate函数，该函数会在应用重启时更新应用：


updateManager.applyUpdate();

5. uniapp热更新实战

uniapp热更新并不是所有应用都需要实现的功能，一般需要根据应用实际需求来确定是否需要进行热更新，我们在实战中来看一个如何实现uniapp热更新的例子。

5.1 实战场景

一个应用需要增加一个功能模块，但是不希望用户进行重新安装更新，这时就需要实现uniapp热更新。

5.2 实现步骤

开发者在本地开发环境构建更新包。

开发者上传更新包至uni-center。

应用检测更新，如果有更新需要下载和更新。

应用重启并加载更新后的模块。

5.3 实现过程

实际代码的实现过程可以参考以下步骤：

构建更新包（本地环境下）

npm run build

上传更新包到uni-center

上传可以通过uni-app工具实现，具体步骤可以参考官方文档。

创建页面并检测更新

创建一个新页面，在mounted钩子中调用uni.getUpdateManager().onCheckForUpdate函数，检测是否有新的更新包可以下载：


  mounted() {
    const updateManager = uni.getUpdateManager()
    updateManager.onCheckForUpdate(function (res) {
      if (res.hasUpdate) {
        uni.showModal({
          content: '有新版本可用，是否下载并安装？',
          success: function (res) {
            if (res.confirm) {
              updateManager.onUpdateReady(function () {
                uni.showModal({
                  content: '新版本已下载，请重启应用',
                  showCancel: false,
                  success: function () {
                    updateManager.applyUpdate()
                  }
                })
              })
            }
          }
        })
      }
    })
  }

重启应用并加载更新后的模块