前端发版通知或热更新

h5网页的发版通知实现方式

localStorage 记录当前资源版本,在路由拦截时机,请求项目下version.js[version.json是build命令后创建的,写入当前时间戳等作为版本号], 对比版本号。若版本落后,弹出 Toast 提示用户刷新页面。

原生微信小程序发版通知

使用 updateManager 对更新进行监听

js 复制代码
// app.js
onLaunch(){
    const updateManager = wx.getUpdateManager();
    updateManager.onUpdateReady(() => {
      wx.showModal({
        title: '更新提示',
        content: '新版本已准备好,是否重启应用?',
        success(res) {
          if (res.confirm) updateManager.applyUpdate(); // 重启生效
        }
      });
    });
}

uni-app开发的app包

将修改后的前端资源打包为 .wgt 文件(本质是 zip 格式的资源包),- App 启动时检测服务器版本号,下载新 wgt 包并调用原生接口 plus.runtime.install 静默安装,重启后生效17。

具体实现步骤
    1. manifest.json 中更新应用版本:
json 复制代码
{
  "name": "Your App",
  "versionName": "1.0.1",      // 新版本名称
  "versionCode": 101           // 新版本号(整数)
}
    1. 生成 wgt 包
markdown 复制代码
1.  在 HBuilderX 中选择菜单:  
    **发行** → **原生 App-制作移动 App 资源升级包**。
2.  生成后的 `__UNI__XXXX.wgt` 文件上传至服务器(如 OSS)。
    1. 客户端检测与更新
js 复制代码
// #ifdef APP-PLUS
onLaunch() {
  plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
    uni.request({
      url: 'https://your-api.com/check-update',
      data: { version: widgetInfo.version },
      success: (res) => {
        const { update, wgtUrl } = res.data;
        if (update) { // 服务端比对发现有更新
          uni.downloadFile({
            url: wgtUrl, // 存放wgt资源的服务器地址
            success: (downloadResult) => {
              if (downloadResult.statusCode === 200) {
                plus.runtime.install(downloadResult.tempFilePath, {
                  force: true // 强制覆盖安装
                }, () => {
                  plus.nativeUI.alert('更新完成,即将重启', () => {
                    plus.runtime.restart(); // 必须重启生效
                  });
                }, (e) => {
                  console.error('安装失败', e);
                });
              }
            }
          });
        }
      }
    });
  });
}
// #endif

ReactNative开发的包

使用Codepush机制

js 复制代码
const checkAndApplyUpdate = async () => {
  const update = await CodePush.checkForUpdate();
  
  if (update) {
    // 自定义弹窗提示
    Alert.alert("更新提示", "发现新版本,是否立即安装?", [
      { text: "取消", onPress: () => {} },
      { 
        text: "安装", 
        onPress: () => CodePush.sync({
          deploymentKey: "YOUR_DEPLOYMENT_KEY",
          installMode: CodePush.InstallMode.IMMEDIATE,
          updateDialog: true // 使用CodePush默认弹窗
        }, syncStatusListener)
      }
    ]);
  }
};

const syncStatusListener = (status) => {
  switch(status) {
    case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
      console.log("下载中...");
      break;
    case CodePush.SyncStatus.UPDATE_INSTALLED:
      Alert.alert("更新完成", "重启后生效");
      break;
  }
};
相关推荐
专吃海绵宝宝菠萝屋的派大星4 分钟前
使用Dify对接自己开发的mcp
java·服务器·前端
爱分享的阿Q5 分钟前
Rust加WebAssembly前端性能革命实践指南
前端·rust·wasm
蓝黑20206 分钟前
Vue的 value=“1“ 和 :value=“1“ 有什么区别
前端·javascript·vue
小李子呢021115 分钟前
前端八股6---v-model双向绑定
前端·javascript·算法
He少年29 分钟前
【基础知识、Skill、Rules和MCP案例介绍】
java·前端·python
史迪仔011232 分钟前
[QML] QML IMage图像处理
开发语言·前端·javascript·c++·qt
AwesomeCPA36 分钟前
Miaoduo MCP 使用指南(VDI内网环境)
前端·ui·ai编程
前端大波38 分钟前
前端面试通关包(2026版,完整版)
前端·面试·职场和发展
qq_433502181 小时前
Codex cli 飞书文档创建进阶实用命令 + Skill 创建&使用 小白完整教程
java·前端·飞书
IT_陈寒1 小时前
为什么我的Vite热更新老是重新加载整个页面?
前端·人工智能·后端