HoRain云--Electron架构解析：跨平台开发新境界

云夏之末

713人浏览 · 2026-01-09 09:11:22

云夏之末 · 2026-01-09 09:11:22 发布

🎬 HoRain云小助手：个人主页

🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称	专栏介绍
《C语言》	本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。
《网络协议》	本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！
《docker容器精解篇》	全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。
《linux系列》	本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。
《python 系列》	本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。
《试题库》	本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等）

2. 渲染进程（Renderer Process）

Electron 架构详解

Electron 是一个由 GitHub 开源的跨平台桌面应用开发框架，它通过将 Chromium 和 Node.js 深度整合，使开发者能够使用 Web 技术（HTML、CSS、JavaScript）构建跨平台的桌面应用程序。以下是对 Electron 架构的全面解析：

一、核心架构概述

Electron 的核心架构基于两个主要组件的深度整合：

Chromium：提供渲染引擎，负责将 HTML/CSS/JavaScript 转换为用户界面
Node.js：提供系统级 API，允许访问文件系统、网络、硬件等

这种架构实现了"用 Web 技术构建桌面应用"的核心理念。

二、多进程架构设计

Electron 采用双进程模型，这是其稳定性和安全性的基石：

1. 主进程（Main Process）

唯一存在：每个 Electron 应用有且仅有一个主进程
职责：
- 应用生命周期管理（启动、退出、休眠等）
- 创建和管理窗口（BrowserWindow）
- 调用操作系统原生 API（文件系统、网络、系统托盘等）
- 处理进程间通信（IPC）
运行环境：纯 Node.js 环境，拥有完整的 require() 和系统权限
入口文件：通常为 main.js 或 main.ts

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

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // 默认禁用
      contextIsolation: true, // 必须开启
      preload: path.join(__dirname, 'preload.js')
    }
  });
  
  win.loadFile('index.html');
});

2. 渲染进程（Renderer Process）

多个存在：每个 BrowserWindow（或标签）对应一个独立的渲染进程
职责：
- 渲染用户界面（HTML/CSS/JS）
- 处理用户交互（点击、输入等）
- 执行前端逻辑
运行环境：Chromium 的渲染实例，本质上是一个浏览器环境

三、进程间通信（IPC）

主进程和渲染进程之间通过 IPC 机制进行通信：

主进程：使用 ipcMain 模块监听消息
渲染进程：使用 ipcRenderer 模块发送消息

// 主进程 (main.js)
ipcMain.handle('read-file', async (event, filePath) => {
  const fs = require('fs').promises;
  return await fs.readFile(filePath, 'utf8');
});

// 渲染进程 (index.html)
const { ipcRenderer } = require('electron');
ipcRenderer.invoke('read-file', 'data.txt').then(data => {
  console.log(data);
});

四、安全机制

Electron 采用多种安全机制保障应用安全：

contextIsolation：必须开启，确保渲染进程与主进程隔离
nodeIntegration：默认禁用（nodeIntegration: false），防止渲染进程直接访问 Node.js API
预加载脚本（Preload）：安全桥接机制，用于向渲染进程暴露必要的 API

// 预加载脚本 (preload.js)
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  readFile: (filePath) => ipcRenderer.invoke('read-file', filePath),
  getAppVersion: () => ipcRenderer.invoke('get-app-version')
});