electron windows 版本升级

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

第一步：我使用到了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() }

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

在vue里面加入以下代码我是加载app.vue里面具体位置自己定

  import { ipcRenderer } from 'electron'

／／请求服务器地址查看是否需要更新

ipcRenderer.send('checkForUpdate')

} ipcRenderer.on('message', (event, text) => { console.log('---->', arguments) console.log('返回消息', text) this.tips = text }) ipcRenderer.on('downloadProgress', (event, progressObj) => { console.log('下载', progressObj) this.downloadPercent = progressObj.percent || 0 }) ipcRenderer.on('isUpdateNow', () => { console.log('是否现在更新') ipcRenderer.send('isUpdateNow') })

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

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

以上代码部分就搞定了

第五步测试是否成功

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

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

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

修改上面的伪代码就可以

以上是整个集成的步骤

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

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

另外打包也可以借鉴

https://segmentfault.com/a/1190000012904543

文章来源: electron windows 版本升级

标签

electron