uniappp实现热更新，不使用插件

最新推荐文章于 2025-08-31 02:08:41 发布

原创

最新推荐文章于 2025-08-31 02:08:41 发布 · 1.8k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #uni-app #小程序 #vue.js #javascript

本文介绍了如何在uniapp项目中实现热更功能，以应对iOS和Android应用的紧急修复或UI修改，通过App.vue中的全局代码管理和后台接口协调，减少了应用市场审核时间。

业务背景：uniapp打包ios，android之后，有时候紧急修复或修改ui，还需要走应用市场审核，就会很着急，有热更之后，可以避免应用市场长时间审核，很快就能更新

热更流程
在这里插入图片描述

老规矩，话不多说，上码，直接复制粘贴看效果

***说明：

热更内容是全局使用，所以写在App.vue中，避免页面重复调用
更新的是wgt的资源包
需要有三个接口（接口控制灵活度更高）
- 判断是否需要热更新
- 确定更新，同步给接口状态
- 取消更新，同步给接口状态
需要有个后台管理页面（接口数据来源）

一、代码相关
看着代码多，你肯定一看就懂，耐心看下去

<script>
// 调用接口
import {
   
    getLatestVersion, ignoreVersion, confirmVersion } from "@/api/app-version/app-version";
export default {
   
   
  onLaunch: function() {
   
   
  	// 只有App才有的事件，座椅要加上运行平台，不然在小程序端会报错
    // #ifdef APP-PLUS
    const deviceMsg = uni.getSystemInfoSync();
    this.pubFn(deviceMsg)
    // #endif
  },
  methods: {
   
   
    pubFn(deviceMsg){
   
   
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
   
   
          // 和后台约定入参格式 主要是版本号 比如标准的版本号：001.0001
					let vers = widgetInfo.version.split('.')
					vers[1] = vers[1]>=100 ? vers[1] : vers[1]>=10 ? `0${
     
     vers[1]}` : `00${
     
     vers[1]}`
					vers[2] = vers[2]>=1000 ? vers[2] : vers[2]>=100 ? `0${
     
     vers[2]}

最低0.47元/天解锁文章