定义

Electron 是由 GitHub 开发的开源框架，使用 Web 技术 (JavaScript、HTML、CSS) 构建跨平台桌面应用（支持 Windows、macOS、Linux）

Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用

适用场景

跨平台桌面应用、Web 应用转桌面应用、轻量级工具类软件(如 VS Code、Slack)

核心架构

• Chromium：跨平台渲染技术栈,提供网页渲染能力，负责 UI 展示
• Node.js：提供系统底层 API 访问（如文件系统、操作系统交互）

主进程与渲染进程对比

关键点

•​​ 进程隔离

• 主进程与渲染进程独立运行，通过 IPC (进程间通信) 交互

•​​ 安全规范

• 渲染进程默认禁用 Node.js（nodeIntegration: false），避免 XSS 攻击导致系统漏洞
• 可以通过特定的机制 (IPC, Preload Script) 与主进程通信以获取系统能力

文件结构

index.html (渲染进程界面)

• 标准 HTML 结构

main.ts (主进程)

• 主进程入口文件，加载 HTML 文件、处理应用生命周期事件

preload.js (渲染进程脚本)

• 在渲染进程加载前运行，作为连接渲染进程和主进程的桥梁，提供安全可控的 API
• 预加载脚本包含在浏览器窗口加载网页之前运行的代码。 其可访问 DOM 接口和 Node.js 环境，并且经常在其中使用 contextBridge 接口将特权接口暴露给渲染器

import { app, BrowserWindow, shell, ipcMain } from "electron";

app:
  这个模块控制着您应用程序的事件生命周期。
  常用事件: ready, window-all-closed, activate, before-quit, will-quit。
  常用方法: app.quit(), app.getPath(name) (获取系统路径), app.getName(), app.getVersion(), app.isPackaged

BrowserWindow:
  这个模块创建和管理 app 的窗口
  构造函数选项 (new BrowserWindow({...})):
    width, height: 窗口尺寸。
    x, y: 窗口位置。
    frame: 是否显示窗口边框和标题栏。
    show: 创建时是否立即显示。
    webPreferences: 配置网页功能的关键选项 (见下)。
  实例方法: win.loadURL(), win.loadFile(), win.close(), win.show(), win.hide(), win.maximize(), win.minimize(), win.isMaximized(), win.webContents (访问 WebContents 对象)
  实例事件: closed, focus, blur, resize, move

进程间通信 IPC (Inter-Process Communication)

Electron 提供了 ipcMain 和 ipcRenderer 模块，用于 主进程 和 渲染进程 之间的通信。这种通信方式基于事件和消息的机制。

• 在主进程中，使用 ipcMain 模块来监听和处理来自渲染进程的消息。
• 在渲染进程中，使用 ipcRenderer 模块来发送消息给主进程，并监听主进程的回复。

1. 为什么需要 IPC ?

• 主进程和渲染进程是独立的进程，需要一种机制来传递消息和数据。
• 渲染进程需要请求主进程执行特权操作 (如读写文件、显示原生对话框)。
• 主进程需要通知渲染进程更新 UI 或传递数据

2. 主要模块

• ipcMain (在主进程中使用)
• ipcRenderer (在渲染进程或 preload 脚本中使用)
• contextBridge (在 preload 脚本中使用，用于安全暴露 API)

3. 通信模式

• 渲染进程 -> 主进程 (单向)
  • 渲染进程 (preload 或 renderer): ipcRenderer.send(channel, ...args)
  • 主进程: ipcMain.on(channel, (event, ...args) => { ... })
• 渲染进程 -> 主进程 -> 渲染进程 (双向异步，请求/响应)
  • 渲染进程 (preload 或 renderer): const result = await ipcRenderer.invoke(channel, ...args)
  • 主进程: ipcMain.handle(channel, async (event, ...args) => { ...; return result; })
• 主进程 -> 渲染进程 (单向)
  • 主进程 (需要 webContents 对象): win.webContents.send(channel, ...args)
  • 渲染进程 (preload 或 renderer): ipcRenderer.on(channel, (event, ...args) => { ... })

Electron IPC 通信功能类别说明

集成 vite

Electron 打包工具

• electron-builder
• electron-forge
• electron-packager

Electron Forge

Electron Forge 是一个处理 Electron 应用程序打包与分发的一体化工具

npm install --save-dev @electron-forge/cli