本文主要简述使用electron-builder配合electron-updater是如何实现自动更新的。
早在节前就走完了流程，后来工作上事情较多就没来得及及时更新。好了，接下来就进入正题吧。
1，首先得使用vue-electron脚手架快速搭建一个项目，如果还没有的话，可以参考我的上一篇文章vue-electron脚手架安装及说明
1.jpg
不过值得注意的是这一次构建的项目，这里要使用electron-builder了，注意不要选择错了。
剩下的都按照vue-electron脚手架安装及说明操作即可。
2.搭建完项目后，开始安装 electron-updater 包模块。
cd 到项目目录，输入命令$npm install electron-updater --save
3.配置package.json文件
为了打包时生成latest.yml文件，需要在 build 参数中添加 publish 配置。
2.jpg
其中这个url地址就是放.exe和latest.yml文件的地址。这里我啰嗦一句吧，我是使用Tomcat来代替远程服务器地址的，把打包生成的.exe和latest.yml文件统一放在了verson文件夹下的，其中latest.yml是用于作版本比较使用的。
4.在主进程添加以下代码，可以放在main文件夹下的index.js内
import { autoUpdater } from 'electron-updater'
import{ ipcMain } from 'electron'
// 检测更新，在你想要检查更新的时候执行
!function updateHandle() {
let message = {
error: '检查更新出错',
checking: '正在检查更新……',
updateAva: '检测到新版本，正在下载……',
updateNotAva: '现在使用的就是最新版本，不用更新',
};
const os = require('os');
const uploadUrl = "http://localhost:8080/verson/"; // 下载地址，不加后面的.exe
autoUpdater.setFeedURL(uploadUrl);
autoUpdater.on('error', function (error) {
sendUpdateMessage(message.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("开始更新");
//some code here to handle event
autoUpdater.quitAndInstall();
});
mainWindow.webContents.send('isUpdateNow')
});
ipcMain.on("checkForUpdate",()=>{
//执行自动更新检查
autoUpdater.checkForUpdates();
})
}()
// 通过main进程发送事件给renderer进程，提示更新信息
function sendUpdateMessage(text) {
mainWindow.webContents.send('message', text)
}
需要注意的是下载地址uploadUrl不要忘记更改成自己的。
5.渲染进程增加检查更新代码。我是放在.vue页面了，因为我是加了个点击检查更新项。
3.jpg
methods:内
checkUpdateVersion:function () {
const _this =this
_this.$electron.ipcRenderer.send("checkForUpdate");
_this.$electron.ipcRenderer.on("message", (event, text) => {
console.log(arguments);
_this.tips = text;
// alert(text)
});
_this.$electron.ipcRenderer.on("downloadProgress", (event, progressObj)=> {
console.log(progressObj);
_this.downloadPercent = progressObj.percent ||0;
});
_this.$electron.ipcRenderer.on("isUpdateNow", () => {
_this.$electron.ipcRenderer.send("isUpdateNow");
});
}
注意点：checkUpdateVersion是我自定义的方法，当然也可以一进来就在created()函数内调用，或者手动调用该方法检查更新。至于tips、downloadPercent，分别是渲染进程和主进程通讯时传过来的message和下载进度，在data内先定义这两个属性为空字符串即可。
6.cd 到项目根目录，$npm run build
完成后，会在build文件夹内生成相关文件，其中就包括.exe和latest.yml文件
7.更改package.json内version（版本号）为更高版本，重复第6步
8将高版本的.exe和latest.yml文件放到uploadUrl的地址，我是http://localhost:8080/verson/
9.$npm run dev 点击检查更新即可查看是否更新到最新版
ps：这篇文章主要是针对Windows平台，如果是Mac的话，打包时候呢是需要代码签名的，我是在Mac尝试过，但是在使用Xcode生成Developer ID Application时候卡住了，因为最近苹果不知道又增加了什么隐私条款，需要同意并重新验证苹果开发者账号，恰巧验证问题我一个都不记得了，有点悲剧。
参考文档：https://segmentfault.com/a/1190000012904543
https://segmentfault.com/a/1190000012902525
网友评论