简介
Electron 是一个开源的跨平台桌面应用程序开发框架，它结合了 Chromium 和 Node.js，使开发者能够使用前端技术（HTML、CSS 和 JavaScript）构建桌面应用程序。Electron 已经被广泛应用于许多知名的跨平台应用程序，如 Visual Studio Code、Slack 和 Discord 等。
安装 Electron
要开始使用 Electron，首先需要安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它可以让开发者在服务器端运行 JavaScript。安装 Node.js 后，可以使用 npm（Node.js 包管理器）来安装 Electron。
在终端中执行以下命令来安装 Electron：
npm install electron
创建 Electron 应用程序
首先，在项目文件夹中创建一个新的文件 main.js，这将是应用程序的主进程文件。
在 main.js 中添加以下代码：
const { app, BrowserWindow } = require('electron');
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// 在窗口中加载 index.html 文件
mainWindow.loadFile('index.html');
}
app.whenReady().then(() => {
createWindow();
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit();
});
上述代码中，使用 require 引入了 Electron 的两个模块：app 和 BrowserWindow。app 模块负责控制应用程序的事件生命周期，BrowserWindow 模块用于创建和管理应用程序的窗口。
在 createWindow 函数中，创建了一个新的窗口，并指定了窗口的宽度、高度以及 Web 配置项。然后，调用 mainWindow.loadFile 方法加载 index.html 文件。
接下来，在项目文件夹中创建一个新的文件 index.html，作为应用程序的主界面。
在 index.html 中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron 应用程序</title>
</head>
<body>
<h1>Hello Electron!</h1>
</body>
</html>
这是一个简单的 HTML 文件，其中包含一个标题标签和一个标题内容。
运行 Electron 应用程序
在终端中执行以下命令来运行 Electron 应用程序：
electron .
这将启动 Electron，并加载创建的 main.js 文件。应该会看到一个新的窗口弹出，其中显示着 "Hello Electron!" 的标题。
打包 Electron 应用程序
一旦完成了 Electron 应用程序的开发，可能希望将其打包成可执行文件，以便在不同操作系统上发布和分发。
有许多工具可以帮助将 Electron 应用程序打包成可执行文件，如 electron-packager、electron-builder 等。这些工具可以根据需求生成适用于不同平台的安装包或可执行文件。
以下是使用 electron-builder 打包 Electron 应用程序的示例：
- 首先，全局安装
electron-builder：
npm install -g electron-builder
- 在项目文件夹中创建一个
electron-builder.yml文件，用于配置打包选项：
appId: com.example.myapp
productName: My App
directories:
output: dist
- 在终端中执行以下命令进行打包：
electron-builder
完成后，将在 dist 目录中找到生成的安装包或可执行文件，具体格式取决于配置。
