前端发版通知或热更新

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;
  }
};