首先来看效果图：
- 打包electron生成新的exe安装包：
npm run dist - 使用simplehttpserver开启存放打包好的exe安装包与yml文件的本地服务(打包目录里有这两个文件)
安装simplehttpserver：npm i simplehttpserver -g
开启服务：simplehttpserver 文件夹名称默认开启8000端口 - 安装旧版本的exe文件，就会自动检测更新啦！
下载此案例源代码：https://github.com/shunyue1320/electron-nuxt.git
electron主进程main.js代码如下：
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
useContentSize: true,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadURL("http://localhost:3000/")
mainWindow.focus();
mainWindow.on('closed', function () {
//require is not defined问题就是此处没写 mainWindow = null
mainWindow = null
})
//检测更新
updateHandle();
}
//加载成功 开启主窗口
app.on('ready', createWindow)
//检测更新
function updateHandle() {
autoUpdater.setFeedURL(uploadUrl);
//html页面加载后触发此更新
ipcMain.on("checkForUpdate",()=>{
//执行自动更新检查
autoUpdater.checkForUpdates();
})
autoUpdater.on('error', function (error) {
console.log("更新失败请检测网络")
});
//开始检测更新
autoUpdater.on('checking-for-update', function () {
//触发html子进程中的checking_for事件接收
mainWindow.webContents.send('checking_for', "正在检测更新...")
console.log("正在检测更新...")
});
//当发现一个可用更新的时候触发，更新包下载会自动开始
autoUpdater.on('update-available', function (info) {
mainWindow.webContents.send('update_available')
autoUpdater.downloadUpdate().then((path)=>{
console.log('download path', path)
}).catch((e)=>{
console.log(e)
})
});
//当没有可用更新的时候触发
autoUpdater.on('update-not-available', function (info) {
console.log("当前没有可用更新")
});
// 更新下载进度事件
autoUpdater.on('download-progress', function (progressObj) {
console.log(progressObj)
mainWindow.webContents.send('downloadProgress', progressObj)
})
//安装包下载完成
autoUpdater.on('update-downloaded', function () {
mainWindow.webContents.send('update_downloaded')
ipcMain.on('isUpdateNow', (e, arg) =>{
console.log(arguments);
console.log("开始更新");
//退出并安装
autoUpdater.quitAndInstall();
});
});
//获取当前版本
ipcMain.on('app_version', (event) => {
event.sender.send('app_version', { version: app.getVersion() });
});
}
index.html代码如下：
<!doctype html>
<html>
<head>
<title>my-nuxt</title>
<meta data-n-head="1" charset="utf-8">
<style>
body {
box-sizing: border-box;
margin: 0;
padding: 20px;
font-family: sans-serif;
background-color: #eaeaea;
text-align: center;
}
#notification {
position: fixed;
bottom: 20px;
left: 20px;
width: 200px;
padding: 20px;
border-radius: 5px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div>当前版本1.0.0</div>
<p>版本信息：<span id="version"></span></p>
<div id="notification" class="hidden">
<p id="message"></p>
<button id="close-button" onClick="closeNotification()">
下次再说
</button>
<button id="restart-button" onClick="restartApp()" class="hidden">
重启更新
</button>
</div>
<script>
const { ipcRenderer } = require('electron');
const version = document.getElementById('version');
const notification = document.getElementById('notification');
const message = document.getElementById('message');
const restartButton = document.getElementById('restart-button');
//获取当前版本
ipcRenderer.send('app_version');
ipcRenderer.on('app_version', (event, arg) => {
ipcRenderer.removeAllListeners('app_version');
version.innerText = arg.version;
});
//新版本检测
console.log("开始新版本检测")
ipcRenderer.send('checkForUpdate');
//发现新版本
ipcRenderer.on('checking_for', () => {
console.log("进入发现新版本")
message.innerText = '发现新版本';
notification.classList.remove('hidden');
});
//发现新版本
ipcRenderer.on('update_available', () => {
console.log("正在下载中...")
message.innerText = '正在下载中...';
notification.classList.remove('hidden');
});
//下载成功触发
ipcRenderer.on('update_downloaded', () => {
ipcRenderer.removeAllListeners('update_downloaded');
message.innerText = '下载成功！是否更新?';
restartButton.classList.remove('hidden');
notification.classList.remove('hidden');
});
function closeNotification() {
notification.classList.add('hidden');
}
function restartApp() {
ipcRenderer.send('isUpdateNow');
}
//下载中触发
ipcRenderer.on("downloadProgress", (event, progressObj)=> {
console.log(progressObj);
let downloadPercent = progressObj.percent || 0;
message.innerText = "正在下载..." + "downloadPercent";
});
</script>
</body>
</html>
警示：
当出现这个错误时，说明你没有打包安装程序进行更新，直接“ electron . ”启动程序是无法实现更新效果的！
Error: ENOENT: no such file or directory, open 'C:\Users\mi\Desktop\abc\fistapp\dev-app-update.yml'
