前端发版通知或热更新

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;
  }
};
相关推荐
ZC跨境爬虫1 分钟前
模块化烹饪小程序开发日记 Day6:(菜谱列表接口开发与日志调试实践)
前端·javascript·css·ui·微信小程序·html
KaMeidebaby6 分钟前
卡梅德生物技术快报|适配体筛选技术架构演进:SPARK-seq 高通量平台原理与技术流程解析
大数据·前端·其他·百度·架构·spark·新浪微博
ZC跨境爬虫16 分钟前
跟着 MDN 学CSS day_7:(层叠优先级与继承)
前端·css·数据库·ui·html
Shadow(⊙o⊙)22 分钟前
qt信号和槽链接的接入与断开
开发语言·前端·c++·qt·学习
慕斯fuafua22 分钟前
JS——DOM操作
前端·javascript·html
忆林52025 分钟前
Jenkins前端打包构建老项目拯救指南
运维·前端·jenkins
微祎_31 分钟前
写给新手的 triton-inference-server-ge-backend:昇腾Triton推理服务后端到底是啥?
前端·人工智能·cann
烂不烂问厨房34 分钟前
两张图片拼接在一起中间有条白线
前端
掘金安东尼37 分钟前
浏览器跨域窗口通信技术调研:window.open 与 postMessage
前端
Highcharts.js3 小时前
缺失数据可视化图表开发实战|Highcharts创建人员出生统计面积图表示例
开发语言·前端·javascript·信息可视化·highcharts·图表开发