windows版：
1.：引包：electron,electron-builder，electron-updater**
yarn add electron -dev
yarn add electron-builder -dev
yarn add electron-updater -dev
yarn add is-electron //用于判断
前两个我的默认就有
2.Package.json配置修改：
{
"publish": [
{
"provider": "generic",
"url": "http://localhost:8899/" //放置安装包和latest.yml的服务器地址
}
],
"win": { //windows下安装软件配置参数
"icon": "build/icons/icon.ico",
"target": [
"nsis", //打包为nsis安装文件
"zip" //打包为安装文件zip
]
},
"nsis": { //nsis配置参数
"oneClick": false, // 是否一键安装
"allowToChangeInstallationDirectory": true, //允许用户选择安装位置
"perMachine": true
}
}；
3.在主进程main下面新建update.js
const { autoUpdater } = require('electron-updater')
const uploadUrl = 'http://localhost:8899/' // 安装包helatest.yml所在服务器地址
const { ipcMain } = require('electron') // ipcMain 主线程
// 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写
export const updateHandle = (mainWindow) => {
let message = {
error: { status: -1, msg: '检测更新查询异常' },
checking: { status: 0, msg: '正在检查更新...' },
updateAva: { status: 1, msg: '检测到新版本' },
updateNotAva: { status: 2, msg: '您现在使用的版本为最新版本,无需更新!' },
}
autoUpdater.setFeedURL(uploadUrl)
//在下载之前将autoUpdater的autoDownload属性设置成false，通过渲染进程触发主进程事件来实现这一设置
autoUpdater.autoDownload = false;
// 检测更新查询异常
autoUpdater.on('error', function (error) {
sendUpdateMessage(mainWindow, message.error)
})
// 当开始检查更新的时候触发
autoUpdater.on('checking-for-update', function () {
sendUpdateMessage(mainWindow, message.checking)
})
// 当发现有可用更新的时候触发，更新包下载会自动开始
autoUpdater.on('update-available', function (info) {
// 主进程向renderer进程发送是否确认更新
mainWindow.webContents.send('isUpdateNow', info)
sendUpdateMessage(mainWindow, message.updateAva)
})
// 当发现版本为最新版本触发
autoUpdater.on('update-not-available', function (info) {
sendUpdateMessage(mainWindow, message.updateNotAva)
})
// 更新下载进度事件
autoUpdater.on('download-progress', function (progressObj) {
mainWindow.webContents.send('downloadProgress', progressObj)
})
// 包下载成功时触发
autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
autoUpdater.quitAndInstall() // 包下载完成后，重启当前的应用并且安装更新
})
// 收到renderer进程确认更新
ipcMain.on('updateNow', (e, arg) => {
console.log('开始更新')
autoUpdater.downloadUpdate();
})
ipcMain.on('checkForUpdate', () => {
// 收到renderer进程的检查通知后，开始检查更新
autoUpdater.checkForUpdates()
})
}
// 通过main进程发送事件给renderer进程，提示更新信息
function sendUpdateMessage(mainWindow, text) {
mainWindow.webContents.send('message', text)
}
4.上面updateHandle可以看到有参数，在主进程main下面index.js中调用
import { updateHandle } from './update' //引入
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
webPreferences: {
nodeIntegration: true,
nodeIntegrationInWorker: true
}
})
mainWindow.loadURL(winURL)
mainWindow.on('closed', () => {
mainWindow = null
})
//调用update
updateHandle(mainWindow)
}
5.在渲染进程中开始监听，我这里写在app.vue中
import isElectron from "is-electron";
let ipcRenderer = require("electron").ipcRenderer;
mounted() {
let vm = this;
if (isElectron()) {
vm.ipcRenderer = ipcRenderer;
vm.ipcRenderer.on("message", (event, data) => {
console.log("message", data.msg);
});
vm.ipcRenderer.on("downloadProgress", (event, progressObj) => {
console.log("downloadProgress", progressObj);
vm.progressObj = progressObj
// 可自定义下载渲染效果 比如下载进度
});
vm.ipcRenderer.on("isUpdateNow", (event, versionInfo) => {
// 自定义选择效果，效果自行编写 tip是我在 latest.yml 中手动添加的更新内容提示
// 用的element-ui 可自行安装
vm.$confirm(
versionInfo.tip+",是否立即升级？",
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
}
)
.then(() => {
vm.ipcRenderer.send("updateNow");
})
.catch(() => {});
});
vm.checkForUpdate(); // electron应用启动后主动触发检查更新函数
}
},
beforeDestroy() {
// 移除ipcRenderer所有事件
if (isElectron()) {
this.ipcRenderer.removeAllListeners();
}
},
methods: {
checkForUpdate() {
// 用来触发更新函数
this.ipcRenderer.send("checkForUpdate");
},
},
6.这就大功告成，每次打开都会检测是否有更新，如果有则会有如下提示，确定便开始下载更新，下载完成自动安装
