electron-builder全量更新electron-builder全量更新 electron的更新一般来说有两种方

`electron-builder`全量更新

electron的更新一般来说有两种方式，全量和增量，顾名思义全量就是下载我们打包好的exe文件或者zip文件，进行全面替换。

主进程修改：全量更新
渲染进程修改：全量或增量更新

更新流程

首先通过渲染进程请求接口，接口返回更新信息，拿到更新信息后进行版本对比以及更新逻辑判断。
渲染进程全量更新通过，把信息传递给主进程。
主进程拿到信息实现更新，把更新信息推送给渲染进程。
渲染进程进行更新状态以及进度的显示，完成更新。

`electron-updater`安装

全量更新主要使用的是electron-updater包，在项目中安装：

// npm
npm install electron-updater -D
// yarn
yarn add electron-updater -D

在安装完成后，就可以在主进程中进行更新相关的配置。

electron-updater更新只需要把一个url传入，然后它会自动查找${url}/xxx.yml文件，根据这个yml文件检测更新及下载，可以通过其各种事件拿到对应的更新状态，下载完成之后通过autoUpdater.quitAndInstall()重启当前的应用并且安装更新。这个url下是放静态资源的，简单来说就是这个链接类似访问一个目录，这个目录下需要有更新的文件以及检测更新的文件。需要哪些东西呢：

win: latest.yml，.exe文件
mac：latest-mac.yml，zip文件

当前使用版本号为：

{
 "electron-updater": "^3.2.1",
    "vue-cli-plugin-electron-builder": "~2.1.1"
    "electron": "^11.0.0",
}

ps：electron-updater最新版本为4.6.5，在这里我们使用的是3.2.1版本，对应electron版本为11。

主进程更新渲染

当前使用的vue版本为3.0版本，因此之前的package.json中的配置需要迁移到vue.config.js中：

pluginOptions：{
    electronBuilder: {
          nodeIntegration: true, // 是否允许在页面中使用node
          builderOptions: {
            productName: "appDemo", // 打包后生成的文件名
            publish: [
              {
                provider: "generic", // 固定值
                url: "http://***.com/app/update", // 检测是否有更新文件的地址
                channel: "latest",// 默认为latest，版本文件的名称
              },
            ],
          },
        },
}

在background.js中添加更新渲染相关代码

//处理更新操作
  function handleUpdate() {

    // 返回更新下载提示
    const returnData = {
      error: { status: -2, msg: "检测更新查询异常" },
      checking: { status: 0, msg: "正在检查应用程序更新" },
      updateAva: { status: 1, msg: "检测到新版本，正在下载,请稍后" },
      updateNotAva: { status: -1, msg: "您现在使用的版本为最新版本,无需更新!" },
    };

    //和vue.config.js配置的一样
    autoUpdater.setFeedURL("http://***.com/app/update");

    //更新错误
    autoUpdater.on("error", function () {
      sendUpdateMessage(returnData.error);
    });

    //检查中
    autoUpdater.on("checking-for-update", function () {
      console.log("******** checking-for-update ********");
      sendUpdateMessage(returnData.checking);
    });

    //发现新版本
    autoUpdater.on("update-available", function () {
      console.log("******** update-available ********");
      sendUpdateMessage(returnData.updateAva);
    });

    //当前版本为最新版本
    autoUpdater.on("update-not-available", function () {
      console.log("******** update-not-available ********");
      setTimeout(function () {
        sendUpdateMessage(returnData.updateNotAva);
      }, 1000);
    });

    // 更新下载进度事件
    autoUpdater.on("download-progress", function (progressObj) {
      console.log("download-progress", progressObj);
      win.webContents.send("downloadProgress", progressObj);
    });

    //更新下载完成
    autoUpdater.on("update-downloaded", function () {
      console.log("******** update-downloaded ********");
      win.webContents.send("downloadProgress", {
        percent: 100,
      });
      // win.webContents.send('isUpdateNow')
    });

    //执行自动更新检查
    autoUpdater.checkForUpdates();
  }

  handleUpdate();

  // 通过main进程发送事件给renderer进程，提示更新信息
  function sendUpdateMessage(text) {
    win.webContents.send("message", text);
  }

程序运行后，可自动执行autoUpdater.checkForUpdates()，开始检测是否有更新可用，查询中事件为checking-for-update；如果当前版本号低于服务器上latest.yml中版本号，即update-available，则开始自动下载，下载时可以获取下载进度，download-progress，针对进度可以进行样式的展示；也可以设置为点击按钮进行更新检测，在检测到最新的更新后，进行更新文件的下载。

electron-builder全量更新