Electron 详细知识点核心概念

Electron 是一个基于 Chromium 和 Node.js 的框架，用于构建跨平台的桌面应用程序。它将 Chromium 的渲染引擎与 Node.js 的后端能力结合，使开发者能用 HTML、CSS 和 JavaScript 开发桌面应用。Electron 应用分为主进程（Main Process）和渲染进程（Renderer Process）。以上内容涵盖了 Electron 的主要知识

fwf2345ff

197人浏览 · 2025-09-10 03:18:37

fwf2345ff · 2025-09-10 03:18:37 发布

Electron 的核心概念

Electron 是一个基于 Chromium 和 Node.js 的框架，用于构建跨平台的桌面应用程序。它将 Chromium 的渲染引擎与 Node.js 的后端能力结合，使开发者能用 HTML、CSS 和 JavaScript 开发桌面应用。

主进程与渲染进程

Electron 应用分为主进程（Main Process）和渲染进程（Renderer Process）。主进程负责管理应用生命周期、创建窗口和与操作系统交互。渲染进程负责展示页面内容，每个窗口对应一个渲染进程。

// 主进程示例
const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadFile('index.html');
});

进程间通信

Electron 提供 ipcMain 和 ipcRenderer 模块实现主进程和渲染进程的通信。

// 主进程
const { ipcMain } = require('electron');
ipcMain.on('message-from-renderer', (event, arg) => {
  console.log(arg);
  event.reply('reply', 'pong');
});

// 渲染进程
const { ipcRenderer } = require('electron');
ipcRenderer.send('message-from-renderer', 'ping');
ipcRenderer.on('reply', (event, arg) => {
  console.log(arg); // 输出 'pong'
});

原生 API 集成

Electron 提供 API 访问系统功能，如文件系统、对话框、系统托盘等。

// 显示文件选择对话框
const { dialog } = require('electron');
dialog.showOpenDialog({
  properties: ['openFile']
}).then(result => {
  console.log(result.filePaths);
});

打包与分发

使用 electron-builder 或 electron-packager 打包应用为可执行文件。

# 安装 electron-builder
npm install electron-builder --save-dev

# 配置 package.json
{
  "build": {
    "appId": "com.example.app",
    "win": {
      "target": "nsis"
    }
  }
}

# 打包
npx electron-builder

实际案例：简易 Markdown 编辑器

以下是一个简易 Markdown 编辑器的实现：

主进程 (main.js)

const { app, BrowserWindow, ipcMain } = require('electron');
const fs = require('fs');
const path = require('path');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });
  mainWindow.loadFile('index.html');
});

ipcMain.on('save-file', (event, { content, filePath }) => {
  fs.writeFile(filePath, content, (err) => {
    event.reply('save-reply', err ? err.message : 'File saved');
  });
});

渲染进程 (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>Markdown Editor</title>
  <script src="renderer.js"></script>
</head>
<body>
  <textarea id="editor" style="width:100%; height:90%"></textarea>
  <button id="save">Save</button>
  <div id="status"></div>
</body>
</html>

渲染进程逻辑 (renderer.js)

const { ipcRenderer } = require('electron');
const { dialog } = require('electron').remote;

document.getElementById('save').addEventListener('click', () => {
  const content = document.getElementById('editor').value;
  dialog.showSaveDialog({
    title: 'Save Markdown',
    filters: [{ name: 'Markdown', extensions: ['md'] }]
  }).then(result => {
    if (!result.canceled && result.filePath) {
      ipcRenderer.send('save-file', {
        content: content,
        filePath: result.filePath
      });
      ipcRenderer.on('save-reply', (event, message) => {
        document.getElementById('status').innerText = message;
      });
    }
  });
});

调试与开发工具

Electron 应用可以像网页一样使用 Chrome 开发者工具调试。

// 在主进程中打开开发者工具
mainWindow.webContents.openDevTools();

安全最佳实践

启用 contextIsolation 和 nodeIntegration 为 false（默认）
使用 sandbox 选项限制渲染进程权限
验证所有 IPC 消息
禁用 enableRemoteModule（默认禁用）

new BrowserWindow({
  webPreferences: {
    contextIsolation: true,
    nodeIntegration: false,
    sandbox: true
  }
});

性能优化

使用 webFrame.setZoomFactor 限制缩放
启用硬件加速
使用 BrowserWindow 的 backgroundThrottling 选项
考虑使用 offscreen 渲染

app.commandLine.appendSwitch('enable-accelerated-2d-canvas', 'true');

以上内容涵盖了 Electron 的主要知识点和实际应用案例，从基础概念到高级功能，包括进程通信、原生API集成、打包分发和安全实践等关键方面。

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

【AI论文】集块解码（Set Block Decoding）是一种语言模型推理加速器

2048 AI社区

鸿蒙并发编程工具集

鸿蒙系统提供完善的并发编程API体系，包含Worker线程、TaskPool任务池、同步机制和异步编程方案。Worker适合长期后台任务，TaskPool针对短时计算，@Concurrent装饰器处理纯函数并发。同步机制支持Lock/Semaphore等线程安全控制，异步编程提供Promise/async-await支持。开发者可根据任务特性选择合适方案：计算密集型用Worker，轻量级任务用Ta