• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

    uni-app实现热更新的详细操作步骤

    发布者: 雪落无声 | 发布时间: 2025-6-14 15:28| 查看数: 205| 评论数: 0|帖子模式

    一. 背景

    随着 App 成功上架,可能更新频率往往会越来越高。传统的应用更新方式要求用户重新下载并安装应用,这不仅耗费用户大量时间、流量,还严重影响用户体验。为了提升用户体验,热更新技术应运而生,为用户带来了更加便捷高效的更新体验。

    二. 什么是热更新?

    uni-app 热更新是一项强大的技术,无需重新安装应用,就能动态更新应用的内容。它可以在应用持续运行的状态下,对功能、样式以及各类资源进行升级,显著提升用户体验,大幅缩短用户等待时间,同时有效降低应用安装与更新的成本。
    简而言之,uni-app APP 有两种更新方式:

    • 整包升级:将整个应用更新至最新版本,属于全量更新。其优势在于更新全面,速度较快;不过缺点也很明显,更新完成后用户需要重新安装应用。
    • wgt 资源升级:仅将应用的资源更新到最新版本,属于增量更新。这种方式的好处是更新速度快,对用户影响小;但存在一定的局限性,并非适用于所有类型的更新。
    uni-app 热更新的实现流程如下:

    • 在应用中添加热更新功能。
    • 将更新的内容打包成 wgt 资源包。
    • 将 wgt 资源包上传到服务器。
    • 应用在启动时,检查是否有更新。
    • 如果有更新,应用会下载 wgt 资源包,并安装到应用中。
    • 应用重新启动,更新的内容就会生效。

    三. 生成 wgt


    1. 前提条件


    • 已在 HBuilderX 中创建好应用,并且已经编译打包成功。
    • 已经配置好应用的应用 ID(appid)。
    • 已经配置好应用的版本号(version)。
    等等具备了一系列应用上架的前提条件,不再赘述。

    2. 修改版本号

    首先,需要更新 manifest.json 中的版本号。比如之前是 1.0.0,那么新版本应该是 1.0.1 或 1.1.0。要大于现有的版本号。


    3. 打包 wgt 包

    在 HBuilderX 中打包升级包(wgt)
    点击菜单->发行->App-制作应用 wgt 包


    打包结束会在控制台输出 wgt 升级包的具体位置


    四. 安装 wgt

    安装应用资源升级包(wgt)通常需要服务端与客户端配合完成,下面以本地测试过程中的操作举例说明:

    1. 服务端

    上传资源:
    将上面生成的 wgt 文件存放在服务器的目录下,例如完整的示例文件地址为:
    1. http://www.example.com/files/DEMO_APP_202504210407.wgt
    复制代码
    提供检测更新接口:
    需约定用于检测升级的接口,示例接口地址为:
    1. http://www.example.com/api/checkVersion
    复制代码
    1. 注意:服务端的具体判定逻辑,需根据自身业务需求灵活调整。
    复制代码
    该部分内容不做重点讲述!

    2. 客户端

    客户端需要在合适的场景下主动检测升级,如果发现有新版的 wgt 资源包,需要下载到本地进行安装,一般在应用启动的时候检测一次即可。
    在 App.vue 的 onLaunch 中进行检测升级,代码如下:
    1. // #ifdef APP-PLUS
    2. plus.runtime.getProperty(plus.runtime.appid, function (widgetInfo) {
    3.   uni.request({
    4.     url: 'http://www.example.com/api/checkVersion',
    5.     data: {
    6.       version: widgetInfo.version,
    7.       name: widgetInfo.name
    8.     },
    9.     success: result => {
    10.       const data = result.data
    11.       if (data.update && data.wgtUrl) {
    12.         uni.downloadFile({
    13.           url: data.wgtUrl,
    14.           success: downloadResult => {
    15.             if (downloadResult.statusCode === 200) {
    16.               plus.runtime.install(
    17.                 downloadResult.tempFilePath,
    18.                 {
    19.                   force: false
    20.                 },
    21.                 function () {
    22.                   // 下载资源成功,重启应用
    23.                   plus.runtime.restart()
    24.                 },
    25.                 function (e) {
    26.                   // 下载资源失败
    27.                 }
    28.               )
    29.             }
    30.           }
    31.         })
    32.       }
    33.     }
    34.   })
    35. })
    36. // #endif
    复制代码
    这段代码主要实现了:

    • 获取应用信息:借助
      1. plus.runtime.getProperty
      复制代码
      方法,获取当前应用的信息,像版本号、应用名称这类信息会存储在
      1. widgetInfo
      复制代码
      对象里。
    • 发起版本检测请求:使用
      1. uni.request
      复制代码
      方法向服务端的
      1. http://www.example.com/api/checkVersion
      复制代码
      接口发送请求,请求数据包含当前应用的版本号和名称。
    • 处理服务端响应:当请求成功后,检查服务端返回的数据。若
      1. data.update
      复制代码
      1. true
      复制代码
      1. data.wgtUrl
      复制代码
      存在,就意味着有新的更新包。
    • 下载更新包:利用
      1. uni.downloadFile
      复制代码
      方法下载服务端提供的
      1. wgt
      复制代码
      资源包。
    • 安装更新包:若下载成功(状态码为 200),则调用
      1. plus.runtime.install
      复制代码
      方法安装下载好的
      1. wgt
      复制代码
      资源包。
    • 处理安装结果:安装成功时,并重启应用;安装失败时,需要提示或进行其他相关策略。
    注意:代码逻辑仅做了核心演示,实际情况下可以加入错误处理,比如在
    1. uni.request
    复制代码
    1. uni.downloadFile
    复制代码
    里添加错误处理逻辑,从而更好地捕获和处理请求与下载过程中出现的错误。

    五. 注意事项


    • 平台限制:使用条件编译,确保升级逻辑仅在 App 平台执行。
    • 版本获取
      1. plus.runtime.version
      复制代码
      1. uni.getSystemInfo()
      复制代码
      读取的是 apk/ipa 包版本号,而非
      1. manifest.json
      复制代码
      中的资源版本信息。因此,建议使用
      1. plus.runtime.getProperty()
      复制代码
      来获取准确的应用信息。
    • 安装重启:安装 wgt 资源包成功后,务必调用
      1. plus.runtime.restart()
      复制代码
      ,否则更新内容将无法生效。
    • 兼容性测试:若仅升级 wgt 包而不更新 App 原生引擎,需特别注意测试 wgt 资源与原生基座的兼容性。平台默认会对版本不匹配的情况进行提醒,如下图所示:

    如果自测没问题,可以在 manifest 中配置忽略提示:
    1. //...
    2. "app-plus": {
    3.     "compatible": {
    4.         "ignoreVersion": true //true表示忽略版本检查提示框,HBuilderX1.9.0及以上版本支持
    5.     },
    6. //....
    7. }
    复制代码
    六. 热更新不支持的情况


    • 当 SDK 部分进行调整,例如新增 Maps 模块时,无法通过热更新方式升级,必须采用整包升级。
    • 若对原生插件进行增加或修改,同样不能使用热更新方式。
    • 若原有项目中没有 nvue 文件,而更新内容包含新增 nvue 文件,也不适用热更新方式。

    七. 热更新是否影响应用审核

    应用市场出于防止开发者未经审核向用户提供违法内容的考虑,大多对热更新持谨慎态度。
    然而,热更新在实际开发中应用广泛,无论是原生开发还是跨平台开发领域皆是如此。
    Apple 曾封禁过 jspatch,但并未对其他热更新方案如 Cordova、React Native、DCloud 进行打击。封禁 jspatch 主要是因其存在严重安全漏洞,可能被黑客利用来篡改其他 App 的数据。
    使用热更新时,需注意以下几点:

    • 在上架审核期间,切勿弹出热更新提示。
    • 采用 HTTPS 协议下载热更新内容,防止被第三方网络劫持。
    • 避免更新违法内容,也不要通过热更新损害应用市场的利益,例如 iOS 的虚拟支付,此类情况需按规定向 Apple 分成。
    只要遵循这些规则,应用使用热更新通常不会出现问题。
    以上就是uni-app实现热更新的详细操作步骤的详细内容,更多关于uni-app热更新的资料请关注脚本之家其它相关文章!

    来源:https://www.jb51.net/javascript/340088iaw.htm
    免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    ×

    最新评论

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表