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

🎬 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 架构的全面解析：

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') });