在 Electron 应用中使用 electron-updater 来实现自动更新功能时，通常你会在一个专门的模块或文件中管理更新逻辑。如果你想要使用 ES6 的 import 语法来引入 electron-updater，你需要确保你的项目已经配置好了支持 ES6 模块的构建工具（如 Webpack）或者使用 Babel 这样的转译器。
以下是一个基本的示例，展示了如何使用 import 语句来引入 electron-updater 并实现基本的更新逻辑。
安装 electron-updater：
bash
npm install electron-updater --save-dev
bash
yarn add electron-updater --dev
核心代码实现
/*
* 升级版本
* @Author: diygw
*/
import { ipcMain } from 'electron'
import { autoUpdater } from 'electron-updater'
let mainWindow: any = null
export function upgradeHandle(window: any, feedUrl: any) {
const msg = {
error: '检查更新出错 ...',
checking: '正在检查更 ...',
updateAva: '检测到新版本 ...',
updateNotAva: '已经是最新版本 ...',
downloadProgress: '正在下载新版本 ...',
downloaded: '下载完成，开始更新 ...'
}
mainWindow = window
autoUpdater.autoDownload = false //true 自动升级 false 手动升级
//设置更新包的地址
autoUpdater.setFeedURL(feedUrl)
//监听升级失败事件
autoUpdater.on('error', function (message: any) {
sendUpdateMessage({
cmd: 'error',
title: msg.error,
message: message
})
})
//监听开始检测更新事件
autoUpdater.on('checking-for-update', function () {
sendUpdateMessage({
cmd: 'checking-for-update',
title: msg.checking,
message: ''
})
})
//监听发现可用更新事件
autoUpdater.on('update-available', function (message: any) {
sendUpdateMessage({
cmd: 'update-available',
title: msg.updateAva,
message: message
})
})
//监听没有可用更新事件
autoUpdater.on('update-not-available', function (message: any) {
sendUpdateMessage({
cmd: 'update-not-available',
title: msg.updateNotAva,
message: message
})
})
// 更新下载进度事件
autoUpdater.on('download-progress', function (message: any) {
sendUpdateMessage({
cmd: 'download-progress',
title: msg.downloadProgress,
message: message
})
})
//监听下载完成事件
autoUpdater.on(
'update-downloaded',
function (event: any) {
sendUpdateMessage({
cmd: 'update-downloaded',
title: msg.downloaded,
message: '最新版本已下载完成, 退出程序进行安装'
})
//退出并安装更新包
autoUpdater.quitAndInstall()
}
)
//接收渲染进程消息，开始检查更新
ipcMain.on('checkForUpdate', () => {
//执行自动更新检查
autoUpdater.checkForUpdatesAndNotify()
})
ipcMain.on('downloadUpdate', () => {
// 下载
autoUpdater.downloadUpdate()
})
}
//给渲染进程发送消息
function sendUpdateMessage(text: any) {
mainWindow.webContents.send('update-message', text)
}
主进程引用
// 在你的主进程文件（如 main.js）中引入并使用
import { upgradeHandle } from './upgrade'
upgradeHandle(mainWindow, "https://****")结合页面调用
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
const dialogVisible = ref(false);
const percentage = ref(0);
let ipcRenderer = window.electron?.ipcRenderer;
let state = reactive({
oldversion: undefined,
version: undefined,
isnew: false
});
function compareVersion(version1, version2) {
const newVersion1 =
`${version1}`.split('.').length < 3 ? `${version1}`.concat('.0') : `${version1}`;
const newVersion2 =
`${version2}`.split('.').length < 3 ? `${version2}`.concat('.0') : `${version2}`;
//计算版本号大小,转化大小
function toNum(a) {
const c = a.toString().split('.');
const num_place = ['', '0', '00', '000', '0000'],
r = num_place.reverse();
for (let i = 0; i < c.length; i++) {
const len = c[i].length;
c[i] = r[len] + c[i];
}
return c.join('');
}
//检测版本号是否需要更新
function checkPlugin(a, b) {
const numA = toNum(a);
const numB = toNum(b);
return numA > numB ? 1 : numA < numB ? -1 : 0;
}
return checkPlugin(newVersion1, newVersion2);
}
if (ipcRenderer) {
window.electron.ipcRenderer.invoke('diygw-get-version').then(res => {
let version = res.data || res;
state.oldversion = version;
});
//接收主进程版本更新消息
window.electron.ipcRenderer.on('update-message', (event, arg) => {
console.log(arg);
if ('update-available' == arg.cmd) {
state.version = arg.message.version;
if (compareVersion(state.version, state.oldversion) > 0) {
state.isnew = true;
}
// 假设我们有一个名为 'userProfile' 的路由
//显示升级对话框
} else if ('download-progress' == arg.cmd) {
//更新升级进度
console.log(arg.message.percent);
dialogVisible.value = true;
let percent = Math.round(parseFloat(arg.message.percent));
percentage.value = percent;
} else if ('error' == arg.cmd) {
dialogVisible.value = false;
ElMessage.error('更新失败');
}
});
window.electron.ipcRenderer.send('checkForUpdate');
} else {
//用来测试显示
// state.oldversion = 1;
// state.version = 1;
// state.isnew = true;
}
const download = () => {
window.electron.ipcRenderer.send('downloadUpdate');
};
const openLink = url => {
window.electron.ipcRenderer.invoke('diygw-down', {
text: url
});
};
</script>
<template>
<div class="flex container flex-direction-column">
<div class="text-lg text-bold">关于</div>
<div class="flex flex1">
<div class="flex-direction-column align-center flex" style="padding: 10px 40px">
<img src="../assets/logo.png" style="width: 100px" />
<div class="text-bold">DIYGW可视化</div>
</div>
<div class="flex1 flex-direction-column flex" style="font-size: 14px">
<div class="flex">
<div>
<el-text class="padding-right" v-if="state.oldversion">
当前版本：{{ state.oldversion }}
</el-text>
<el-text v-if="state.version && state.isnew">
最新版本：{{ state.version }}
</el-text>
<el-text
class="padding-right"
type="danger"
@click="download()"
v-if="state.version && state.isnew"
>
点击更新
</el-text>
</div>
</div>
<div class="margin-top" v-if="dialogVisible">
<el-progress
status="success"
:text-inside="true"
:stroke-width="20"
:percentage="percentage"
:show-text="true"
></el-progress>
</div>
<div class="flex text-center margin-top">
<div
@click="openLink('https://www.diygw.com')"
class="text-bg-tip link margin-right flex-sub"
>
访问网站
</div>
<div
@click="openLink('https://www.diygw.com/69')"
class="text-bg-tip link flex-sub"
>
帮助文档
</div>
</div>
<div class="margin-top text-bg-tip">
<p>DIY官网可视化工具</p>
<p>可视化拖拽开发神器</p>
<p>无须编程 零代码基础 所见即所得设计工具</p>
<p>轻松制作UniApp、微信小程序、支付宝小程序、Vue3、H5、WebApp、单页动画</p>
<p>UniApp框架量身设计</p>
<p>涵盖uniapp各个方面，助力900万Uniapp+开发者。</p>
<p>一套代码编到十几个平台，这不是梦想。</p>
<p>高效可视化开发工具快速与HBuilder X开发联调。</p>
<p>强大的代码生成器，让您感受先进的生产力，让您的想法快速上线。</p>
</div>
</div>
</div>
</div>
</template>
请注意，electron-updater 的配置可能会根据你的 Electron 打包工具（如 electron-packager, electron-builder 等）和项目设置有所不同。例如，如果你使用的是 electron-builder，你需要在 package.json 中添加一些配置来确保 electron-updater 能正常工作。
此外，上述代码中的 autoUpdater.quitAndInstall(); 调用在 macOS 上可能不是必需的，因为 macOS 上的更新通常会自动处理。在 Windows 上，你可能需要显式调用此方法来重启应用并安装更新。
最后，请确保在 Electron 的主进程中调用更新逻辑，因为 electron-updater 需要访问文件系统和其他敏感资源。
