前言
在项目中客户给我们提出了需要在线更新的功能,意思就是要在程序启动时，自动检测是否需要更新,如果线上有新的包就自动下载、自动安装并且自动运行。
查了很多文档，我们决定采用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位操作系统内的测试程序,就能看到正在检测更新,有更新会自动更新
