前言

在项目中客户给我们提出了需要在线更新的功能,意思就是要在程序启动时，自动检测是否需要更新,如果线上有新的包就自动下载、自动安装并且自动运行。
查了很多文档，我们决定采用electron-updater插件，这是一个基于electron的插件。

1.安装electron-updater

npm install electron-updater --save

2.在package.json或vue.config.js里添加public配置，打包将会在dist目录中生成latest.yml文件

注意: 有的electron项目是基于vue配置的,electron-vue项目就在vue.config.js里添加public,electron项目就在package.json里添加
package.json⬇:

"build": {
  "win": {
    "icon": "logo.ico",
    "target": [
      { 
         "target": "nsis",
         "arch": [
           "x64",
           "ia32"
         ]
      }
    ]
},
  "publish": [
    {
      "provider": "generic",
      "url": "http://183.95.190.36:9000/version/exam"
    }
  ]
}

vue.config.js⬇:(因为没有采用electron-vue,这是从网上找到的资源)

image.png

3.在主进程添加updater配置

这里主进程很好理解,在程序run起来时,对程序做的一些配置信息(比如窗口大小,是否置顶等等);
在我们的项目中主进程就是main.js⬇:

//自动更新
//执行自动更新检查
function updateHandle() {
  // const feedUrl = 'file:///D:/project/exam/jr-zjt-exam-electron/build/'; //本地更新包的位置
  const feedUrl = 'http://183.95.190.36:9000/version/exam'; //线上更新包的位置
  autoUpdater.setFeedURL(feedUrl);

  let message = {
    error: '检查更新出错1',
    checking: '正在检查更新1......',
    updateAva: '检测到新版本,正在下载1......',
    updateNotAva: '现在使用的就是最新版本,不用更新1',
  };
  autoUpdater.on('error',function (error) {
    console.log(error)
    sendUpdateMessage(message.error)
  })
  autoUpdater.on('checking-for-update',function () {
    console.log('检查更新')
    sendUpdateMessage(message.checking)
  })
  autoUpdater.on('update-available',function (info) {
    console.log(info)
    sendUpdateMessage(message.updateAva)
    win.webContents.send('isUpdateNow')
  })
  autoUpdater.on('update-not-available',function () {
    console.log(message.updateNotAva)
    sendUpdateMessage(message.updateNotAva)
  })
//更新下载进度事件
  autoUpdater.on('download-progress',function (progressObj) {
    console.log(progressObj)
    sendUpdateMessage(progressObj)
    win.webContents.send('downloadProgress',progressObj)
    win.setProgressBar(progressObj.percent / 100)
  })
  autoUpdater.on('update-downloaded',function (event,releaseNotes,releaseName,releaseDate,updateUrl,quitAndUpdate) {
    console.log('更新完成')
    sendUpdateMessage('正在下载..........')
    ipcMain.on('isUpdateNow',(event,arg)=>{
      console.log('开始更新');
      sendUpdateMessage('开始更新')
      autoUpdater.quitAndInstall()
    })
    win.webContents.send('isUpdateNow')
  })
  ipcMain.on('checkForUpdate',()=>{
    //执行自动更新检查
    console.log("执行自动更新检查")
    autoUpdater.checkForUpdates();
  })
  function sendUpdateMessage(text) {
    win.webContents.send('message',text)
  }
}

这里有个要特别注意的: 我们要把这个检查更新的方法放在electron项目初始化的时候让它跑起来⬇

image.png

4.渲染进程添加代码配置index.html或app.vue

渲染进程根据不同项目也会有两种情况，vue项目的就进app.vue;
index.html⬇:

methods:{
    checkUpdateVersion() {
        const _this = this;
        //这个ipcRender从哪里来呢
        //我们可以在main.js主进程中拿到,const ipcRenderer = require('electron').ipcRenderer;
        //在这里我们就可以直接调用
        ipcRenderer.send("checkForUpdate");
        ipcRenderer.on("downloadProgress", (event, progressObj) => {
          console.log(progressObj);
          _this.percent = progressObj.percent || 0;
          if (_this.percent == 100){
            this.$message({
              message: '客户端下载完成，重启客户端即可完成更新！',
              type: 'success',
              duration: 0,
              showClose:true
            });
          }
        });
        ipcRenderer.on('message', (event, data) => {
          console.log("update data" + JSON.stringify(data));
          switch (data.type) {
            case 1:
              console.log("检查更新出错");
              break;
            case 2:
              console.log("正在检查更新……");
              break;
            case 3:
              this.isNew = false;
              this.$message({
                message: '检测到新版本,正在下载更新！',
                type: 'success',
                duration: 0,
                showClose:true,
                onClose:function (){
                  //this.updateNow();
                }
              });

              console.log("检测到新版本,……");
              break;
            case 4:
              console.log("现在使用的就是最新版本，不用更新");
              break;
          }
        });
      },
},
mounted(){
    this.checkUpdateVersion();
}

app.vue⬇:

image.png

5.执行打包方法

npm run dist/build  //这里打包方法根据你自己的pack.json配置来

打包完成后,我们可以看到打包后的build文件夹内⬇:

image.png

我们运行64位操作系统内的测试程序,就能看到正在检测更新,有更新会自动更新