electron-builder+electron-updater实现自动更新
# electron-builder+electron-updater实现自动更新
1 安装electron-updater插件
npm install electron-updater --save
2 在electron-builder的配置文件electron-builder.yml文件里，添加publish配置，为了打包时生成latest.yml
- electron-builder.yml:
appId: 101213
productName: test测试 # 项目名 这也是生成的exe文件的前缀名
directories: # 输出文件夹
output: dist_electron
buildResources: build,
app: dist_electron/bundled
publish:
provider: "generic"
url: "xxxx" # 更新时的服务器地址
win:
icon: './public/logo.png'
mac:
icon: './public/logo.png'
linux:
icon: './public/logo.png'
nsis:
oneClick: false # 是否一键安装
createDesktopShortcut: "always" # 是否添加桌面快捷方式
createStartMenuShortcut: true # 创建开始菜单快捷方式
allowToChangeInstallationDirectory: true # 允许修改安装目录
runAfterFinish: true # 安装完成后是否勾选立即执行
extraResources: # 包含的待打包文件 打包后存放在\dist_electron\win-unpacked\resources\public
- 'public/favicon.ico'
3、配置主进程文件，引入electron-updater,添加自动更新检测和时间监听
backgroun.js:
const { autoUpdater } = require('autoUpdater')
let uploadUrl = `http://xxxxx`; // 服务器更新包位置
// 检测更新，在想要执行检查的时候调用
function updateHandle(){
let message = {
error: { status: -1, msg: '检查更新查询异常'},
checking: { status: 0, msg: '正在检查更新'},
updateAva: { status: 1, msg: '检测到新版本，正在下载，请稍后...'},
updateNotAva: { status: 2, msg: '你现在使用的版本为最新版，不用更新！'}
}
let versionInfo = '';
autoUpdater.setFeedUrl(uploadUrl)
// 检测更新查询异常
autoUpdater.on('error',function(){
sendUpdateMessage(message.error)
})
// 开始检查更新
autoUpdater.on('checking-for-update',function(){
sendUpdateMessage(message.checking)
})
// 当发现可用的更新包，更新包会自动下载
autoUpdater.on('update-available',function(){
sendUpdateMessage(message.updateAva)
})
// 当发现当前版本为最新版时
autoUpdater.on('update-not-available',function(){
sendUpdateMessage(message.updateNotAva)
})
// 更新下载进度事件
autoUpdater.on('download-progress', function(progressObj){
mainwindow.webContents.send('downloadProgress', progressObj)
})
// 更新包下载成功时触发
autoUpdater.on('update-download', function(event,releaseNotes,releaseName,releaseDate,updateUrl,quitAndUpdate){
// 收到renderer进程确认更新
ipcMain.on('updateNow',(e,arg){
console.log('开始更新');
autoUpdater.quitAndInstall(); // 包下载完成后，重启当前的应用并且安装更新
})
mainWindow.webContents.send('isUpdateNow', versionInfo)
})
// 收到renderer进程的检查通知后，执行自动更新检查
ipcMain.on('checkForUpdate',()=>{
// autoUpdater.checkForUpdates()
let checkInfo = autoUpdater.checkForUpdates()
checkInfo.then(function(data){
versionInfo = data.versionInfo; // 获取更新包版本等信息
})
})
}
// 通过main进程发送事件给renderer进程，提示更新信息
function sendUpdateMessage(text){
mainWindow.webContents.send('message', text)
}
- 在窗口创建完成后，在主进程createWindow中调用updateHandle
function createWindow(){
...
mainWindow = new BrowserWindow({...})
// 启动检测更新
updateHandle()
}
4 在视图层中触发自动更新
created () {
// 自动检测更新
ipcRenderer.send('checkForUpdate')
}
// 监听自动更新事件
mounted () {
ipcRenderer.on('message',(event,text)=>{
this.tipsText = text
})
ipcRenderer.on('downloadProgress',(event,progressObj)=>{
console.log(progressObj); // 下载进度
})
ipcRenderer.on('isUpdateNow',(event, versionInfo)=>{
this.$confirm(
"检测到新版本" + versionInfo.version + ",是否立即升级？",
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
).then(()=>{
// 确认更新
ipcRenderer.send('updateNow')
})
})
}
// 为避免多次切换页面造成监听的滥用，切换页面前必须移除监听事件：
beforeDestroy(){
ipcRenderer.removeAllListeners("message,downloadProgress,isUpdateNow");
}