Electron是一个基于Web技术的开源框架，用于构建跨平台的桌面应用程序。它将Node.js和Chromium引擎结合在一起，使开发者可以使用HTML、CSS和JavaScript来构建原生桌面应用程序。在本教程中，我们将学习如何使用Electron开发桌面应用程序。
准备工作
在开始之前，确保你已经安装了Node.js和npm。可以通过在命令行中运行以下命令来检查是否正确安装了它们：
node -v
npm -v
如果输出了版本号，说明已成功安装。
创建一个Electron应用
在开始开发之前，我们需要先创建一个Electron应用。首先，创建一个新的文件夹，并在文件夹中打开命令行。
接下来，运行以下命令来初始化一个新的Electron项目：
npm init -y
上面的命令将生成一个package.json文件，其中包含了项目的基本信息和依赖项。
接下来，运行以下命令来安装Electron依赖项：
npm install electron --save-dev
安装完成后，我们就可以开始开发了。
创建主进程文件
在Electron应用中，有一个主进程和一个或多个渲染进程。主进程是一个Node.js进程，负责管理整个应用程序的生命周期和底层系统资源。渲染进程是一个运行在Chromium中的浏览器窗口，用于显示界面和处理用户交互。
首先，让我们创建一个名为main.js的文件，用于编写主进程代码。
const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
win.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
上面的代码创建了一个名为createWindow的函数，用于创建一个浏览器窗口并加载index.html文件。然后，通过app.whenReady来启动应用程序，并在应用中的所有窗口被关闭时退出程序。
创建渲染进程文件
与主进程相比，渲染进程运行在Chromium中，它负责显示用户界面和处理用户交互。在这里，我们将创建一个名为index.html的文件来编写渲染进程代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron App</title>
</head>
<body>
<h1>Hello Electron!</h1>
</body>
</html>
上面的代码简单地显示了一个标题为"Hello Electron!"的网页。
运行应用程序
运行以下命令来启动Electron应用程序：
npx electron .
应用程序将会启动，并显示一个浏览器窗口，其中包含了"Hello Electron!"的标题。
打包和发布
通过Electron，我们可以将应用程序打包为可执行文件，并发布到各个平台。这里只介绍Windows平台的打包方法，其他平台的打包方法请参考Electron的官方文档。
首先，我们需要全局安装electron-packager和electron-installer-windows：
npm install electron-packager electron-installer-windows -g
然后，运行以下命令来执行打包和发布操作：
electron-packager . MyApp --platform=win32 --arch=x64 --out=./dist --electron-version=<Electron版本号> --icon=./icon.ico
electron-installer-windows --src ./dist/MyApp-win32-x64 --dest ./dist/installers --arch x64
上面的命令将会在./dist文件夹中生成一个可执行文件和安装程序。
结语
在本教程中，我们学习了如何使用Electron开发桌面应用程序。我们创建了一个Electron应用，编写了主进程和渲染进程的代码，并学习了如何将应用程序打包和发布。希望这个教程对你有所帮助，祝你在Electron开发中取得成功！
参考链接：
本文来自极简博客，作者：烟雨江南，转载请注明原文链接：Electron桌面应用开发教程
