electron windows（mac） 版本升级

近段时间项目需要用到electron 版本升级是避免不了的 对自己版本升级做一个备忘

说明： 我没有用到electron-vue 但是代码在electron-vue是完全可以用的 

第一步 ：我使用到了autoUpdate 所以首先得加载

npm install electron-updater --save

第二步设置package.json(这里只贴跟升级相关的)在build下面加入以下代码

"publish": [
      {
        "provider": "generic",
        "url": "http://www.xxx.com/download/"//你的远程下载地址 
      }
    ],

"directories": {
      "output": "build"//文件打包的目录文件 这个可有可无
    },

注意：这个url是你的远程下载地址 也就是版本更新的时候的请求地址 你会将你升级的exe文件和yml文件放进这个目录下面 这里不要配置错误了

第三步：在electron的main.js （electron-vue 下面的index.js）加入以下代码

import { autoUpdater } from 'electron-updater'
import { app, BrowserWindow, ipcMain } from 'electron'
// 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写
function updateHandle () {
  let message = {
    error: '检查更新出错',
    checking: '正在检查更新……',
    updateAva: '检测到新版本，正在下载……',
    updateNotAva: '现在使用的就是最新版本，不用更新'
  }
  let uploadUrl = 'http://admin.e-shigong.com/download/'
  autoUpdater.setFeedURL(uploadUrl)
  autoUpdater.on('error', function (error) {
    console.log(error)
    sendUpdateMessage(message.error)
    sendUpdateMessage(error)
  })
  autoUpdater.on('checking-for-update', function () {
    sendUpdateMessage(message.checking)
  })
  autoUpdater.on('update-available', function (info) {
    sendUpdateMessage(message.updateAva)
  })
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage(message.updateNotAva)
  })

  // 更新下载进度事件
  autoUpdater.on('download-progress', function (progressObj) {
    mainWindow.webContents.send('downloadProgress', progressObj)
  })
  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
    ipcMain.on('isUpdateNow', (e, arg) => {
      console.log(arguments)
      console.log('开始更新')
      autoUpdater.quitAndInstall()
    })

    mainWindow.webContents.send('isUpdateNow')
  })

  ipcMain.on('checkForUpdate', () => {
    console.log('检查更新------》')
    autoUpdater.checkForUpdates()
  })
}

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

这些代码加完了以后只需要再加最后一行这个文件里面就大功告成了

在这个方法下面加一行代码

function createWindow () {
  updateHandle()
}

第四步 就是在我们的渲染进程里面发起检查更新的代码了

if(window.require) {
        console.error('------开始检查更新------')
        var ipcRenderer = window.require('electron').ipcRenderer
        ipcRenderer.send('checkForUpdate')
        ipcRenderer.on('message', (event, text) => {
          console.log('---->', event)
          console.log('返回消息', text)
          this.tips = text
        })
        
        ipcRenderer.on('downloadProgress', (event, progressObj) => {
          console.log('下载', progressObj)
          //this.progress = progressObj.percent
          this.downloadPercent = progressObj.percent || 0
        })
        ipcRenderer.on('isUpdateNow', () => {
          console.log('是否现在更新')
          //ipcRenderer.send('isUpdateNow')
        })
      }

注意 如果是vue和electron分离的就加个

if(window.require) {
//TODO上面的代码
}

以上代码部分就搞定了

第五步测试是否成功

    打包一个高版本的比如2.0.0 打包完成以后将其生成的yml文件 exe文件上传到你之前package.json的文件夹下面 访问没有问题后 本地打包一个低版本的的比如1.0.0 打包完成后执行这个1.0.0的包 如果控制台有 

检测到新版本，正在下载……

并且在下载就说明集成成功

第六步 如果需要用户手动确认更新 那么你只需要提前请求我们服务器接口然后根据接口更新 弹窗确认后在做下载操做

查询后台接口
if(更新){
执行上面的的检查更新代码
}

以上是整个集成的步骤

mac 将会多一个步骤那就是签名

签名的具体方法点击这里获取签名的方法

另外更新也可以看看这个文章比较全

https://segmentfault.com/a/1190000012904543