Electron框架概述
Electron是一个由GitHub开发的开源框架，它允许开发者使用熟悉的Web技术——JavaScript、HTML和CSS——来构建跨平台的桌面应用程序。其核心理念是将Chromium浏览器内核与Node.js运行时环境相结合，使得开发者能够创建既拥有现代Web界面，又能访问操作系统原生功能的应用程序。
Electron最初是为了构建GitHub的Atom文本编辑器而开发的，后来开源并迅速成为开发跨平台桌面应用的主流工具。如今，它已被广泛应用于各种知名软件中，如微软的Visual Studio Code代码编辑器、团队协作工具Slack、即时通讯软件Discord以及音乐播放器网易云音乐等。这种技术选择让开发者能够“一次编写，处处运行”，显著降低了为Windows、macOS和Linux不同操作系统分别开发和维护代码的成本。
核心架构与工作原理
Electron 的核心设计理念是将 Chromium 用于界面渲染，将 Node.js 用于系统底层操作，并将二者融合在一个运行时环境中。其架构围绕多进程模型和进程间通信构建，以下是详细解析。
核心架构图景
您可以将其想象为一个由中央指挥部和多个前线工作站组成的系统：
- 中央指挥部（主进程）：唯一，拥有最高权限，负责全局调度和重型任务。
- 前线工作站（渲染进程）：多个，每个负责一个用户界面窗口，专注展示与交互。
- 专用通信线路（IPC）：连接指挥部与各工作站，用于传递指令和数据。
两大核心进程详解
主进程
- 身份与数量：应用的入口点，有且仅有一个。
- 运行环境：完整的js 环境。
- 核心职责：
- 应用生命周期管理：通过 app模块响应 ready、window-all-closed、before-quit等事件。
- 窗口管理：使用 BrowserWindow类创建、控制应用窗口（如大小、位置、菜单）。
- 系统集成：创建原生菜单、托盘图标、对话框、全局快捷键等。
- 后端服务：执行文件读写、数据库操作、网络请求等所有js 能做的任务。
- 关键能力：直接访问操作系统 API 和js 生态的所有模块。
渲染进程
- 身份与数量：每个打开的浏览器窗口（或 Webview）对应一个独立的渲染进程，可以有多个。
- 运行环境：本质是一个精简版的 Chromium 浏览器，但被注入了js 能力。
- 核心职责：
- 渲染用户界面：加载 HTML、CSS、JavaScript，运行前端框架（如 React, Vue）。
- 处理用户交互：响应用户在页面内的点击、输入等操作。
- 关键能力：默认情况下，渲染进程中的 JavaScript 既可以操作 DOM，也可以js 模块（如 fs、path），这实现了前端代码直接调用系统能力。
工作原理：进程间通信
主进程和渲染进程各自拥有独立的内存空间，不能直接访问对方变量。它们通过 IPC 机制进行通信。
- 通信模块：
- ipcMain：在主进程中监听来自渲染进程的消息。
- ipcRenderer：在渲染进程中向主进程发送消息，并监听回复。
- 通信模式：
- 异步通信：最常用。渲染进程通过send(channel, …args)发送请求，主进程通过 ipcMain.on(channel, handler)监听并处理，处理完毕后可通过 event.reply返回结果。
- 同步通信：较少用。渲染进程通过sendSync(channel, …args)发送请求，主进程处理并直接返回值，这会阻塞渲染进程直到收到回复。
典型工作流示例：一个“保存文件”功能。
- 渲染进程的页面点击“保存”按钮。
- send(‘save-file’, data)发送请求。
- 主进程的on(‘save-file’, (event, data) => { … })收到请求。
- 主进程用 fs模块将数据写入磁盘。
- 主进程通过reply(‘file-saved’, status)将操作结果通知渲染进程。
- 渲染进程收到通知后，在界面上显示“保存成功”提示。
架构优势与安全考量
- 优势：
- 开发效率高：使用 Web 技术即可开发桌面应用，界面开发体验流畅。
- 功能强大：无缝结合 Web 的灵活性与js 的系统级能力。
- 进程隔离：一个渲染进程的崩溃不会导致整个应用退出。
- 安全考量：由于渲染进程默认拥有js 权限，加载不可信的远程内容会带来巨大安全风险。因此，对于需要显示外部网页的窗口，建议启用 nodeIntegration: false和 contextIsolation: true，并通过 preload脚本安全地暴露有限的 API 给渲染进程。
总结来说，Electron 通过主进程管理全局和系统，通过渲染进程展示界面，再通过 IPC 使二者精密协作。这种架构让开发者能用熟悉的 Web 技术栈，构建出功能强大的跨平台桌面应用程序。
开发环境搭建与第一个应用
开始Electron开发前，需要搭建简单的环境。
- 环境要求：首先需要安装js及其包管理工具npm。这可以通过访问Node.js官网下载安装包完成，安装后可通过命令node -v和npm -v验证。
- 项目初始化：创建一个新的项目目录，并通过npm init -y命令初始化一个js项目，这会生成package.json文件。
- 安装Electron：在项目目录下，运行npm install electron –save-dev将Electron安装为开发依赖。由于网络原因，安装可能较慢，可以配置淘宝镜像以加速下载。
接下来，我们创建一个最简单的“Hello World”应用，它包含三个基本文件：
package.json：应用的配置文件，需指定入口文件并添加启动脚本。
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^11.0.0"
}
}
main.js：主进程入口文件，负责创建窗口。
const { app, BrowserWindow } = require('electron');
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true // 启用Node.js集成
}
});
// 加载应用的HTML页面
win.loadFile('index.html');
}
// 当Electron完成初始化后调用
app.whenReady().then(createWindow);
// 处理窗口全部关闭的事件（macOS除外）
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// 处理macOS应用激活事件
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
index.html：渲染进程的界面文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的Electron应用</title>
</head>
<body>
<h1>Hello, Electron!</h1>
<p>这是一个简单的Electron应用程序。</p>
</body>
</html>
运行应用：在终端中执行npm start命令，即可启动应用程序，看到一个显示“Hello, Electron!”的桌面窗口。
进阶开发概念与技巧
在掌握了基础之后，以下进阶概念能帮助你构建更安全、更强大的应用。
- 预加载脚本（Preload Script）与上下文隔离：为了增强安全性，现代Electron推荐启用contextIsolation（上下文隔离）。这时，渲染进程不能直接访问js API。预加载脚本在渲染进程加载网页之前运行，并通过contextBridge安全地向渲染进程暴露有限的API，作为IPC的桥梁。
