轻松掌握uniapp热更新，打造流畅App

前端

2023-12-12 18:43:23

为何热更新如此重要？

在App开发过程中，难免会遇到一些难以预料的bug，这些bug可能会导致App崩溃、异常或功能不正常。传统方式需要重新打包、发布和用户升级，可能会给用户带来不便，甚至导致用户流失。

Uniapp热更新的原理

uniapp热更新功能允许开发者在不重新发布App的情况下，更新或修复应用程序中的特定模块或组件，从而达到即时修复bug、快速迭代、节约开发资源的目的。

如何使用uniapp热更新

为了使用uniapp热更新功能，需要在uniapp项目中启用热更新功能，具体步骤如下：

在项目根目录下的manifest.json文件中添加热更新配置：

"h5": {
  "devServer": {
    "https": true,
    "port": 8080,
    "command": "npm run serve",
    "watch": true,
    "hot": true
  }
}

在App.vue文件中启用热更新：

export default {
  ...
  methods: {
    async _update() {
      uni.showModal({
        title: '发现新版本',
        content: '是否立即更新？',
        success: res => {
          if (res.confirm) {
            uni.downloadFile({
              url: `${this.devServer}/update.zip`,
              success: res => {
                uni.saveFile({
                  tempFilePath: res.tempFilePath,
                  success: res => {
                    uni.installApp({
                      filePath: res.savedFilePath
                    })
                  }
                })
              }
            })
          }
        }
      })
    },
    ...
  },
  created() {
    this._update()
  },
  ...
}

在想要热更新的组件中加入热更新代码：

export default {
  ...
  methods: {
    _update() {
      uni.showModal({
        title: '发现新版本',
        content: '是否立即更新？',
        success: res => {
          if (res.confirm) {
            uni.downloadFile({
              url: `${this.devServer}/update.zip`,
              success: res => {
                uni.saveFile({
                  tempFilePath: res.tempFilePath,
                  success: res => {
                    uni.installApp({
                      filePath: res.savedFilePath
                    })
                  }
                })
              }
            })
          }
        }
      })
    },
    ...
  },
  created() {
    this._update()
  },
  ...
}