什么是 Electron？
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
主要特点：
- 跨平台：一次编写，支持 Windows、macOS 和 Linux 等操作系统。
- 原生功能：Electron 提供了对操作系统本地功能的访问，比如文件系统、通知、系统托盘等。
- 强大的开发工具：Electron 使用 Chromium 内核，支持开发者使用现代浏览器开发工具进行调试。
- 集成 Node.js：你可以使用 Node.js 的强大功能来处理文件、网络请求、系统任务等。
安装 Electron
你可以通过 npm（Node.js 的包管理工具）来安装 Electron。在终端中运行以下命令：
npm install electron --save-dev
这个命令会将 Electron 安装为开发依赖。安装完成后，你可以在项目中开始使用 Electron。
创建第一个 Electron 应用
下面是一个简单的 Electron 应用实例，演示了如何创建一个最基本的桌面应用。
1. 初始化项目
首先，创建一个新的项目文件夹，并初始化一个新的 npm 项目：
mkdir my-electron-app
cd my-electron-app
npm init -y
这会生成一个 package.json 文件，作为项目的配置文件。
2. 安装 Electron
接下来，安装 Electron：
npm install electron --save-dev
3. 创建主进程脚本
在项目目录中，创建一个名为 main.js 的文件，作为 Electron 应用的主进程。这个文件将负责管理应用窗口的创建。
// main.js
const { app, BrowserWindow } = require('electron');
let mainWindow;
function createWindow() {
// 创建浏览器窗口
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// 加载应用的 HTML 文件
mainWindow.loadFile('index.html');
// 当窗口关闭时，释放窗口对象
mainWindow.on('closed', () => {
mainWindow = null;
});
}
// Electron 初始化完成后创建窗口
app.whenReady().then(createWindow);
// 当所有窗口都关闭时退出应用（macOS 上的行为不同）
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
4. 创建前端界面
在项目目录下创建一个 index.html 文件，用于渲染应用的前端界面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electron App</title>
</head>
<body>
<h1>Hello, Electron!</h1>
<p>Welcome to your first Electron app.</p>
</body>
</html>
5. 修改 package.json
在 package.json 文件中，添加一个 start 脚本来启动 Electron 应用：
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^33.3.1"
}
}
6. 启动应用
现在，你可以通过以下命令来启动 Electron 应用：
npm run start
如果一切顺利，你应该会看到一个包含 "Hello, Electron!" 的窗口，这就是你创建的第一个 Electron 应用。
Electron 的架构
Electron 应用的架构主要分为两部分：
- 主进程（Main Process） ：负责应用的生命周期和操作系统资源的管理。它会启动一个或多个渲染进程，并控制它们的行为。
- 渲染进程（Renderer Process） ：负责显示用户界面，渲染 HTML、CSS 和 JavaScript。每个打开的窗口都对应一个渲染进程。
