乐趣区

electron-vue使用electron-updater实现自动更新

今天呢,给大家带来一篇干货满满的 electron-vue 自动升级的教程,话不多说,开始我的表演!

配置文件 “package.json”
“build” : {
“publish”: [
{
“provider”: “generic”,
“url”: “http://127.0.0.1:3000/newfile/”
}
],
},
“devDependencies”: {
“electron”: “^2.0.4”,
“electron-updater”: “3.0.0”,
“electron-builder”: “^20.19.2”
}
build 字段详细配置

自动更新 “update.js”
import {autoUpdater} from ‘electron-updater’
import {ipcMain} from ‘electron’
/**
* -1 检查更新失败 0 正在检查更新 1 检测到新版本,准备下载 2 未检测到新版本 3 下载中 4 下载暂停 5 下载暂停恢复 6 下载完成 7 下载失败 8 取消下载
* */
class Update {
mainWindow
constructor (mainWindow) {
this.mainWindow = mainWindow
autoUpdater.setFeedURL(‘http://127.0.0.1:3000/newfile’) // 更新地址与 package.json 中的 build.publish.url 相对应
/**
* 根据自身需求选择下方方法
*/
this.error()
this.start()
this.allow()
this.unallowed()
this.listen()
this.download()
}
Message (type, data) {
this.mainWindow.webContents.send(‘message’, type, data)
}
error () { // 当更新发生错误的时候触发。
autoUpdater.on(‘error’, (err) => {
this.Message(-1, err)
console.log(err)
})
}
start () { // 当开始检查更新的时候触发
autoUpdater.on(‘checking-for-update’, (event, arg) => {
this.Message(0)
})
}
allow () { // 发现可更新数据时
autoUpdater.on(‘update-available’, (event, arg) => {
this.Message(1)
})
}
unallowed () { // 没有可更新数据时
autoUpdater.on(‘update-not-available’, (event, arg) => {
this.Message(2)
})
}
listen () { // 下载监听
autoUpdater.on(‘download-progress’, () => {
this.Message(‘ 下载进行中 ’)
})
}
download () { // 下载完成
autoUpdater.on(‘update-downloaded’, () => {
this.Message(6)
setTimeout(m => {
autoUpdater.quitAndInstall()
}, 1000)
})
}
load () { // 触发器
autoUpdater.checkForUpdates()
}
}
export default Update

update 配置若对 class 写法不是很熟悉的同学,可以参考阮一峰老师的 es6 课程 class 在下载中的时候有一个问题就是下载非差异文件的时候不会触发下载监听,点击查看

主进程 “index.js”
import Update from ‘./update’
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000
})
let update = new Update(mainWindow)

退出移动版