代码经过实践并封装,拿过来就可以用
第一步:配置
publish: {
provider: 'generic',
url: 'http://192.168.1.100:9000/final'
},
具体配置在哪,自己去找
url 是你打包后的文件放的位置
第二步:代码
update.js
import { autoUpdater } from 'electron-updater'
import { ipcMain } from 'electron'
const feedUrl = 'http://192.168.1.100:9000/final'
const log = require('@/commonJs/log')
let mainWindow = null;
let isUpdateAsar = false;
export function updateApp(window) {
logger('in')
mainWindow = window;
autoUpdater.autoDownload = false//检查到更新时是否自动下载
autoUpdater.setFeedURL(feedUrl);
autoUpdater.on('error', function (error) {
logger('error:' + JSON.stringify(error))
sendUpdateMessage({
cmd: 'error',
msg: error
})
});
//监听开始检测更新事件
autoUpdater.on('checking-for-update', function (message) {
logger('checking-for-update:' + JSON.stringify(message))
sendUpdateMessage({
cmd: 'checking-for-update',
msg: message
})
});
//监听发现可用更新事件
autoUpdater.on('update-available', function (message) {
logger('update-available:' + JSON.stringify(message))
sendUpdateMessage({
cmd: 'update-available',
msg: message
})
});
//监听没有可用更新事件
autoUpdater.on('update-not-available', function (message) {
logger('update-not-available:' + JSON.stringify(message))
sendUpdateMessage({
cmd: 'update-not-available',
msg: message
})
});
// 更新下载进度事件
autoUpdater.on('download-progress', function (message) {
logger('download-progress:' + JSON.stringify(message))
sendUpdateMessage({
cmd: 'download-progress',
msg: message
})
});
//监听下载完成事件
autoUpdater.on('update-downloaded', function (message) {
logger('update-downloaded:' + JSON.stringify(message))
sendUpdateMessage({
cmd: 'update-downloaded',
msg: message
})
});
}
function sendUpdateMessage(data) {
mainWindow.webContents.send('message', data)
}
function logger(line) {
log.info('[ auto-updater ]', line)
}
log是用来生产本地日志的,你可以不写
feedUrl是和第一步的url用的同一个,项目build后会生成一个 exe/dmg文件和latest.yml/latest-mac.yml文件,都要放到这个feedUrl下面
第三步:调用
我们在使用electron一般都要先创建一个窗口,创建完后传入到刚才第二部写的方法里面就完了,非常简单
import { updateApp } from '@/update'
function createWindow(){
let win = new BrowserWindow({
...
})
updateApp(win)
}
第四步:交互
通常情况下用户需要更新到哪一步,那么我们前端的的js怎么获取到当前更新进度呢,第二步中有个方法sendUpdateMessage
,electron就是通过调用这个方法来告诉前端当前的进度
那么前端如何接受这个消息呢,上代码
this.ipcRenderer = window.electron.ipcRenderer
this.ipcRenderer.on('message', (event, text) => {
console.log(text)
...do some things
})
是的,任何页面内只要这样些就能拿到当前更新进度,并根据自己的情况操作
那要如何让系统开始检查呢,上代码
this.ipcRenderer = window.electron.ipcRenderer
this.ipcRenderer.send('check-for-update')
———————————end——————————————
全部代码就这些,剩下的就是打包和上传文件就完了
我发现有人说要打包后要上传四个文件才行,但我反复测试过,只要两个文件,一个就是 exe,另一个就是yml ,其他没了,当然需要传多少文件可能跟打包配置有关,我就不一一研究了,给你们看看我的配置
win: {
// must be at least 256x256
icon: './extraResources/win/icon.ico',
target: 'nsis',
extraResources: [
'./extraResources/win/**'//windows需要的文件,mac同配
]
},
nsis: {
//参考配置:https://www.jianshu.com/p/1701baa240fd
oneClick: false,
// 允许修改安装目录
allowToChangeInstallationDirectory: true,
allowElevation: true,
createDesktopShortcut: true,
createStartMenuShortcut: true,
shortcutName: 'XXXXX系统',
artifactName: '${productName}-${version}.${ext}',
}
优化
以上代码可以实现全量更新,但我们很多时候其实只想更新代码逻辑,其他各种依赖,打包的各种文件其实不用更新,如果每次都全量更新也可以,但并不是最优解,所以我下一篇我会说怎么实现只更新代码逻辑部分