前端发版通知或热更新

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;
  }
};
相关推荐
亿坊电商7 分钟前
利于SEO优化的CMS系统都有哪些特点?
前端·数据库
juejin_cn23 分钟前
使用 Codex SDK 轻松实现文字控制电脑
前端
CUYG23 分钟前
Moment.js常用
前端
用户812748281512025 分钟前
漏学Input知识系列之“偷”走了其他窗口的事件pilferPointers
前端
用户812748281512025 分钟前
安卓14自由窗口圆角处理之绘制圆角轮廓线
前端
用户812748281512025 分钟前
跨进程高级玩法方案2-学员分享
前端
用户812748281512027 分钟前
安卓java端service如何在native进程进行访问-跨进程通讯高端知识
前端
Shirley~~27 分钟前
Web Audio API
前端
TEC_INO28 分钟前
STM32_11:DMA
java·前端·stm32
鹏北海28 分钟前
qiankun微前端通信与路由方案总结
前端·微服务·架构