electron

2023-07-24 00:27| 来源: 网络整理| 查看: 265

electron-vue项目很多时候需要自动更新的功能，避免每次发版都要单独发安装包的尴尬，下面介绍一下如何利用electron-updater来实现自动更新

一、首先是安装，安装方式很多，不多说，这里需要注意的是electron-updater、electron以及electron-builder版本之间的兼容性

由于git上下来的electron-vue项目electron版本比较低为2x版本，所以对于版本比较高的electron-updater是不支持的，这里推荐使用3x到4x之间的electron-updater版本，当然也可以提升electron的版本来适配electron-updater，通过测试目前7x一下的electron版本是对electron-updater兼容比较好的，

这里选用的版本分别是：electron-updater----3.0.0、electron----7.3.3、electron-builder---20.19.2

好，版本选定后可以安装一下了，首先在package.json中"devDependencies"下添加"electron-updater": "^3.0.0",然后把electron的版本改为7.3.3既："electron": "^7.3.3","electron-builder": "^20.19.2",

实例如下：

"devDependencies": { "electron-updater": "^3.0.0", "electron": "^7.3.3", "electron-builder": "^20.19.2", }

之后要在package.json中的build添加publish字段，用来设置自动更新地址和生成yml文件，如下：

"publish": [ { "provider": "generic", "url": "http://www.8888888.com/ceshi/" //这里指向存放的目录而非文件 } ],

修改并保存后，进入文件夹，把node_modules依赖包手动删除或者命令行删除都可以，删除后重新npm i一下依赖包

二、OK炒菜需要的菜品已经齐全，下一步就开始炒菜

1.在src\renderer下创建一个文件夹untils并在改文件夹下创建一个Update.js的文件，文件内容如下

import { autoUpdater } from 'electron-updater' import { ipcMain } from 'electron' let mainWindow = null; export function updateHandle(window, feedUrl) { mainWindow = window; let message = { error: '检查更新出错', checking: '正在检查更新……', updateAva: '检测到新版本，正在下载……', updateNotAva: '现在使用的就是最新版本，不用更新', }; //设置更新包的地址 autoUpdater.setFeedURL(feedUrl); //监听升级失败事件 autoUpdater.on('error', function (error) { sendUpdateMessage({ cmd: 'error', message: error }) }); //监听开始检测更新事件 autoUpdater.on('checking-for-update', function (message) { sendUpdateMessage({ cmd: 'checking-for-update', message: message }) }); //监听发现可用更新事件 autoUpdater.on('update-available', function (message) { sendUpdateMessage({ cmd: 'update-available', message: message }) }); //监听没有可用更新事件 autoUpdater.on('update-not-available', function (message) { sendUpdateMessage({ cmd: 'update-not-available', message: message }) }); // 更新下载进度事件 autoUpdater.on('download-progress', function (progressObj) { sendUpdateMessage({ cmd: 'download-progress', message: progressObj }) }); //监听下载完成事件 autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl) { sendUpdateMessage({ cmd: 'update-downloaded', message: { releaseNotes, releaseName, releaseDate, updateUrl } }) //退出并安装更新包 autoUpdater.quitAndInstall(); }); //接收渲染进程消息，开始检查更新 ipcMain.on("checkForUpdate", (e, arg) => { //执行自动更新检查 autoUpdater.checkForUpdates(); }) } //给渲染进程发送消息 function sendUpdateMessage(text) { mainWindow.webContents.send('message', text) }

这个文件是处理自动更新逻辑的，包括更新各个过程，建好后进入到主进程index.js中引入这个文件，并触发里面的函数，如下

import { app, BrowserWindow, Menu } from 'electron' import {updateHandle} from '../renderer/utils/Update.js'; let mainWindow const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080` : `file://${__dirname}/index.html` function createWindow() { mainWindow = new BrowserWindow({ useContentSize: true, minWidth: 930, minHeight: 565, webPreferences: { nodeIntegration: true } }) mainWindow.loadURL(winURL) let feedUrl = "http://www.88888888.com/ceshi/"; //检测版本更新 updateHandle(mainWindow,feedUrl); mainWindow.on('closed', () => { mainWindow = null }) }

上面只是简单例子，其他内容自行添加

之后就可以在rander进程中监听并触发自动更新了，在什么时候触发自行考量，这里举例为在app.vue中，如下

const { ipcRenderer } = require('electron') let self = this; //接收主进程版本更新消息 ipcRenderer.on("message", (event, arg) => { // console.log(arg); if ("update-available" == arg.cmd) { //显示升级对话框 self.dialogVisible = true; } else if ("download-progress" == arg.cmd) { // console.log(arg.message.percent); let percent = Math.round(parseFloat(arg.message.percent)); self.percentage = percent; } else if ("error" == arg.cmd) { self.dialogVisible = false; self.$message(arg); } else if ("update-not-available" == arg.cmd) { // self.$message(arg); } }); //开始检测新版本 let timeOut = window.setTimeout(() => { ipcRenderer.send("checkForUpdate"); // console.log('开始检测更新触发') }, 500); clearTimeout; export default { name: "globalquickseek", data() { return { dialogVisible: false, closeOnClickModal: false, closeOnPressEscape: false, showClose: false, percentage: 0, strokeWidth:200 }; }, mounted() { self = this; }, destroyed() { window.clearInterval(interval); window.clearInterval(timeOut); } }; /* CSS */ #app { height: 100%; overflow: hidden; } #app>div{ overflow: hidden; } .tableList { widows: 150px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .el-tooltip__popper{ font-size: 14px; max-width: 300px !important; text-align: justify; text-justify: newspaper; word-break: break-all; line-height: 20px; }

ok，至此配置就已经结束了，下面就可以尝试自动升级了，先打包一个低版本的，既：package.json中version字段写为：0.0.1，打包完毕之后安装应用，安装完成之后再打包个高版本的，既：package.json中version字段写为：0.0.2，然后把打包后的高版本的.exe文件和yml文件上传至你上面配置的那个网址，传完之后打开刚才安装的.exe应用，感受自动升级的方便吧

备注：这里需要注意的是苹果版本需要上传的文件要多一些，把zip格式的也要传至服务器，另外，mac打包的时候需要代码签名才能更好的实现自动更新，否则在执行quitAndInstall方法时会跳出，具体代码签名我下一篇文章再写吧，这一篇有点长了

【本文地址】

公司简介

联系我们