前端发版通知或热更新

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;
  }
};
相关推荐
军军君015 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app
布丁05235 分钟前
DOM编程实例(不重要,可忽略)
前端·javascript·html
bigyoung7 分钟前
babel 自定义plugin中,如何判断一个ast中是否是jsx文件
前端·javascript·babel
指尖的记忆37 分钟前
当代前端人的 “生存技能树”:从切图仔到全栈侠的魔幻升级
前端·程序员
草履虫建模1 小时前
Ajax原理、用法与经典代码实例
java·前端·javascript·ajax·intellij-idea
时寒的笔记1 小时前
js入门01
开发语言·前端·javascript
陈随易1 小时前
MoonBit能给前端开发带来什么好处和实际案例演示
前端·后端·程序员
996幸存者1 小时前
uniapp图片上传组件封装,支持添加、压缩、上传(同时上传、顺序上传)、预览、删除
前端
Qter1 小时前
RedHat7.5运行qtcreator时出现qt.qpa.plugin: Could not load the Qt platform plugin "xcb
前端·后端
木西1 小时前
10 分钟搞定直播:Node.js + FFmpeg + flv.js 全栈实战
前端·后端·直播