大家在做 uni-app 项目的时候,应该都遇到过这样的问题:
项目上线后发现一个 bug,修复完成准备发版。

这时候你会发现:

  • Android 需要下载 APK 安装
  • WGT 热更新需要自己处理下载、安装、重启
  • iOS 需要跳转 App Store
  • 版本号比较需要自己写
  • 下载进度需要自己监听
  • 强制更新需要自己控制

一个简单的版本更新功能,往往要写几百行代码。

最近在维护 HyApp 的时候,我把这套逻辑进行了统一封装,现在只需要一个 API 就能完成完整的版本更新流程。

今天就和大家分享一下。


什么是 HyApp?

首先我先给大家简单介绍一下hy-app, hy-app是基于 UniApp + Vue3 + TypeScript 打造的一套企业级开发工具库,主要用于解决 UniApp 项目开发过程中常见的业务场景和重复性工作。

项目地址:

https://github.com/MrGao-hy/hy-design-uni

官方文档:

下载apk安装app的api说明文档
在这里插入图片描述

除了常见工具函数之外,还内置了:

  • 组件库
  • 学习文档
  • http封装
  • 通用工具
  • App版本更新

今天重点介绍其中的 App 更新能力。


下载App示例

在这里插入图片描述

更新功能都有哪些能力

HyApp 内置的 updateVersion API 支持:

✅ Android APK 整包更新
✅ Android WGT 热更新
✅ iOS AppStore 跳转
✅ 版本号自动比较
✅ 强制更新
✅ 更新前拦截
✅ 下载进度监听
✅ 安装成功回调
✅ 安装失败回调
✅ 更新确认取消回调

基本覆盖企业项目中常见的升级场景。


一行代码检查更新

最简单的使用方式:

appInit.updateVersion({
  version: '1.2.0',
  description: '修复已知问题,优化用户体验',
  url: 'https://xxx.com/app.apk'
})

运行后会自动:

  1. 获取当前App版本
  2. 对比服务端版本
  3. 弹出更新提示
  4. 下载更新包
  5. 自动安装

整个过程无需额外处理。


更新提示效果

当检测到新版本时:

发现新版本 V1.2.0

修复已知问题
优化登录体验
提升系统稳定性

[取消] [立即更新]

如果开启强制更新:

force: true

则用户只能更新:

[立即更新]

无法取消。

对于一些重要升级或者安全修复场景非常实用。


Android APK 更新

很多项目仍然采用 APK 整包更新。

配置方式非常简单:

appInit.updateVersion({
  version: '1.2.0',
  description: '新增库存盘点功能',
  url: 'https://xxx.com/app-release.apk'
})

下载完成后:

自动打开安装页面
用户确认安装
完成升级

无需额外开发。


WGT 热更新

相比 APK 更新:

WGT 包体积更小。

例如:

APK:80MB

WGT:2MB

用户升级体验更好。

只需要传入 WGT 地址:

appInit.updateVersion({
  version: '1.2.0',
  description: '修复部分页面显示异常',
  url: 'https://xxx.com/update.wgt'
})

HyApp 会自动:

下载WGT
安装WGT
更新成功
重启应用

整个过程全部自动完成。


下载进度监听

很多项目都会要求显示下载进度。

HyApp 已经帮你封装好了。

appInit.updateVersion({
  version: '1.2.0',
  description: '优化性能',
  url: 'https://xxx.com/app.apk',

  onProgress(progress) {
    console.log(progress.progress)
  }
})

返回数据:

在这里插入图片描述

使用内部方法bytesToSize把字节转化大小单位

import { bytesToSize } from 'hy-app';

bytesToSize(progress.totalBytesWritten) // 1.2MB
bytesToSize(progress.totalBytesExpectedToWrite) // 23.2MB

你可以直接绑定进度条组件。

<hy-progress :percentage="percent" />

效果非常直观。


更新前拦截

有些场景下:

用户正在提交订单

或者:

用户正在上传数据

此时不适合立即更新。

可以通过:

beforeUpdate(version) {
  if (isUploading.value) {
    uni.showToast({
      title: '数据上传中',
      icon: 'none'
    })

    return false
  }
}

阻止更新继续执行。


更新确认回调

用户点击立即更新时:

onConfirm() {
  console.log('用户开始更新')
}

用户点击取消 时:

onCancel() {
  console.log('用户取消更新')
}

方便统计升级率。


更新成功回调

安装完成后:

onSuccess() {
  uni.showToast({
    title: '升级成功'
  })
}

非常适合埋点统计。


更新失败回调

如果网络异常:

onFail(error) {
  console.log(error)
}

例如:

下载失败

安装失败

未知安装包格式

都能够统一处理。


iOS 怎么处理

由于苹果限制:

iOS 无法直接安装 IPA。

因此 HyApp 会自动识别平台:

iosStoreUrl:
'https://apps.apple.com/app/idxxxxxxxx'

用户点击更新后:

自动跳转 AppStore。

无需开发者额外判断。


判断版本是否更新

当返回值为1是需要跟新,当返回值为0或者-1不需要跟新,方法放出来方便大家进行本地版本比较
在这里插入图片描述

完整示例

appInit.updateVersion({
  version: '1.2.0',
  description: ``,
  url: 'https://xxx.com/update.wgt',
  force: false,
  iosStoreUrl:
    'https://apps.apple.com/app/id123456',
  onProgress(progress) {
    console.log(progress.progress)
  },
  beforeUpdate(version) {
    console.log(version)
  },
  onConfirm() {
    console.log('确认更新')
  },
  onCancel() {
    console.log('取消更新')
  },
  onSuccess() {
    console.log('更新成功')
  },
  onFail(error) {
    console.log(error)
  }
})

为什么封装这个功能

以前每个项目上线后:

都会重复开发:

  • 版本比较
  • 下载逻辑
  • WGT安装
  • APK安装
  • AppStore跳转

写来写去基本都是同一套代码。

于是就把这些能力沉淀到了 HyApp 中。

现在只需要一个 API:

appInit.updateVersion()

即可完成整个升级流程。

对于企业项目来说,可以节省大量重复开发时间。


如果你正在开发:

  • UniApp
  • Vue3
  • TypeScript
  • Android App
  • 企业级移动应用

那么这套更新方案应该能帮你少踩不少坑。

结尾

如果你觉得这篇文章帮你解决了你现在的问题,那就请给我来个 三连支持一下 ♥️

➡️ 点赞 支持一下
➡️ 收藏 以防找不到
➡️ 评论 我会回访你!
➡️ 关注 不会迷路哦!

你的支持是我持续更新的动力,我们下篇更精彩!🚀🔥

参考github项目地址:hy-design-uni

👉 欢迎大家给华玥组件库star。 ✅

更多推荐