WHAT - Electron 系列（一）

Electron 是什么？

Electron 是一个用于构建 跨平台桌面应用 （Windows、macOS 和 Linux）的开源框架，基于 Chromium 和 Node.js。

它允许开发者使用 HTML、CSS 和 JavaScript 来创建桌面应用，同时具备 访问本地系统资源的能力（如文件系统、操作系统 API 等）。

Electron 的特点

跨平台支持 🌍
- Electron 应用可以在 Windows、macOS 和 Linux 上运行，且代码基本一致，无需做大量修改。
Web 技术开发 🌐
- 你可以使用 HTML、CSS 和 JavaScript ，结合 React、Vue、Svelte 等框架，开发桌面应用。
Node.js 支持 🔧
- Electron 允许你直接在前端代码中使用 Node.js API （如 fs、path），实现文件读写、进程管理等功能。
Chromium 内核 🔥
- Electron 内置 Chromium 浏览器，可以渲染现代 Web 页面，确保应用运行效果一致。
丰富的原生 API 🖥
- Electron 提供了很多 桌面应用相关的 API ，如：
  - 窗口管理（创建/关闭窗口）
  - 托盘和菜单（Tray、Menu）
  - 文件操作 （fs 模块）
  - 剪贴板访问（Clipboard）
  - 通知系统（Notification）

Electron 的工作原理

Electron 应用由两个主要进程组成：

主进程（Main Process）
- 负责创建和管理应用窗口（BrowserWindow）、处理系统级事件（如文件访问、通知、托盘等）。
- 运行在 Node.js 环境，可以访问系统 API。
渲染进程（Renderer Process）
- 负责渲染 UI，类似于 Web 浏览器中的页面。
- 运行在 Chromium 中，默认不能访问系统 API（但可以通过 ipcRenderer 和 ipcMain 进行通信）。

进程间通信（IPC） ：

主进程和渲染进程可以通过 IPC（进程间通信） 进行交互，比如：

渲染进程请求主进程打开文件，主进程执行后返回结果。
渲染进程通知主进程创建新窗口等。

typescript 复制代码

//main.ts 主进程
//创建 Electron 窗口并监听 open-file-dialog 事件

import { app, BrowserWindow, dialog, ipcMain } from 'electron';
import path from 'path';

let mainWindow: BrowserWindow | null = null;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 预加载脚本
    },
  });

  mainWindow.loadFile('index.html');
});

// 监听渲染进程发送的 `open-file-dialog` 请求
ipcMain.handle('open-file-dialog', async () => {
  const { filePaths } = await dialog.showOpenDialog({
    title: '选择文件',
    properties: ['openFile'], // 只允许选择单个文件
  });

  return filePaths.length > 0 ? filePaths[0] : null; // 返回文件路径
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

//preload.ts 预加载脚本
//将 ipcRenderer 暴露给渲染进程，以便安全调用 open-file-dialog。
import { contextBridge, ipcRenderer } from 'electron';
contextBridge.exposeInMainWorld('electronAPI', {
  openFileDialog: () => ipcRenderer.invoke('open-file-dialog'),
});

//renderer.ts 渲染进程
document.getElementById('openFileButton')?.addEventListener('click', async () => {
  const filePath = await (window as any).electronAPI.openFileDialog();
  document.getElementById('filePath')!.innerText = filePath || '未选择文件';
});

Electron 适合哪些场景？

✅ 适合：

跨平台桌面应用（如 VS Code、Slack、Discord）
带 UI 的本地工具（如 GitHub Desktop、Postman）
Web 转桌面应用（将 Web 应用封装成桌面端，如 Figma）

❌ 不适合：

极端轻量级应用（Electron 体积较大，打包后几十 MB 起步）
对性能要求极高的应用（如 3D 游戏、视频编辑）

WHAT - Electron 系列（一）

目录

Electron 是什么？

Electron 的特点

Electron 的工作原理

Electron 适合哪些场景？