HoRain云小助手个人主页 个人专栏: 《Linux 系列教程》《c语言教程》⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。专栏介绍专栏名称专栏介绍《C语言》本专栏主要撰写C干货内容和编程技巧让大家从底层了解C把更多的知识由抽象到简单通俗易懂。《网络协议》本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘一起解密网络协议在运行中协议的基本运行机制《docker容器精解篇》全面深入解析 docker 容器从基础到进阶涵盖原理、操作、实践案例助您精通 docker。《linux系列》本专栏主要撰写Linux干货内容从基础到进阶知识由抽象到简单通俗易懂帮你从新手小白到扫地僧。《python 系列》本专栏着重撰写Python相关的干货内容与编程技巧助力大家从底层去认识Python将更多复杂的知识由抽象转化为简单易懂的内容。《试题库》本专栏主要是发布一些考试和练习题库涵盖软考、HCIE、HRCE、CCNA等目录⛳️ 推荐专栏介绍主进程Main Process主进程的职责主进程生命周期实例app 模块详解BrowserWindow 窗口管理实例菜单、托盘、对话框等原生功能渲染进程Renderer Process渲染进程的特点多窗口与多渲染进程Web 页面的加载与显示渲染进程中的限制进程间通信IPCipcMain 与 ipcRenderer实例invoke/handle 模式推荐写法消息传递最佳实践预加载脚本Preload Scriptspreload 的作用与意义contextBridge 安全通信沙箱模式下的使用总结Electron 的本质是一个多进程桌面应用框架它结合了Chromium渲染层和Node.js系统层通过独立的进程模型实现界面显示、逻辑控制和安全通信。下面是 Electron 核心架构展示了主进程、渲染进程、IPC 通信、以及 Preload 的关系。主进程A运行 Node.js控制窗口与系统交互。使用 BrowserWindow 创建渲染进程。渲染进程B每个窗口独立运行 HTML/CSS/JS用于展示界面。预加载脚本B2运在渲染进程加载前执行连接主进程与网页层。通过 contextBridge 安全地暴露 API。IPC 通信虚线箭头主进程和渲染进程通过 ipcMain、ipcRenderer 双向通信。操作系统C主进程可访问系统功能例如文件、托盘、通知等。主进程Main Process主进程是 Electron 应用的指挥中心运行在 Node.js 环境中。它负责创建窗口、管理应用生命周期、调用系统 API以及与渲染进程通信。整个应用启动后系统会首先运行主进程脚本通常是main.js。主进程的职责启动与退出应用创建和销毁 BrowserWindow窗口注册菜单、托盘、全局快捷键调用操作系统功能文件系统、通知、对话框监听渲染进程发送的事件主进程生命周期主进程的生命周期与应用生命周期一致从app模块开始实例const { app, BrowserWindow } require(electron); app.whenReady().then(() { const win new BrowserWindow({ width: 800, height: 600 }); win.loadFile(index.html); }); app.on(window-all-closed, () { if (process.platform ! darwin) app.quit(); });app.whenReady()Electron 初始化完成后触发。window-all-closed所有窗口关闭时触发。app.quit()退出整个应用。macOS 上常见特例用户关闭所有窗口时程序仍保持后台运行。app 模块详解app模块用于控制整个应用生命周期app.on(ready)当 Electron 初始化完毕时触发。app.quit()退出应用。app.getPath(userData)获取系统路径。app.setAppUserModelId(id)设置 Windows 的任务栏 ID。app.isPackaged判断当前是否为打包状态。BrowserWindow 窗口管理主进程通过BrowserWindow创建可视化窗口实例const win new BrowserWindow({ width: 1024, height: 768, resizable: true, webPreferences: { preload: ./preload.js, nodeIntegration: false } });width,height窗口尺寸resizable是否可调整大小webPreferences用于配置渲染进程行为preload预加载脚本nodeIntegration是否允许渲染进程使用 Node.js菜单、托盘、对话框等原生功能Electron 提供多个模块访问系统功能Menu / MenuItem自定义菜单栏Tray创建系统托盘图标Dialog调用系统文件选择、警告框Notification原生通知shell打开外部链接或文件例如const { dialog } require(electron); dialog.showOpenDialog({ properties: [openFile, multiSelections] });渲染进程Renderer Process渲染进程负责显示界面运行在 Chromium 环境中。每个BrowserWindow都有一个独立的渲染进程。渲染进程的特点基于 Chromium运行 HTML/CSS/JS默认无法直接访问 Node.js API出于安全考虑可使用 Web 技术栈Vue、React、Svelte 等每个窗口对应独立线程互不影响多窗口与多渲染进程Electron 的每个窗口BrowserWindow会启动一个独立渲染进程关闭一个窗口不会影响其他窗口类似浏览器的多标签页模型。这使得应用在崩溃恢复时更安全、可靠。Web 页面的加载与显示渲染进程的内容由主进程加载win.loadFile(index.html); // 加载本地页面 // 或者 win.loadURL(https://example.com); // 加载远程网页渲染进程中的限制出于安全原因不能直接使用 Node.js 模块如fs、path。不建议在渲染进程执行高负载计算会卡 UI。与系统交互需通过 IPC 通信或 preload 暴露 API。进程间通信IPCElectron 的核心机制之一是主进程与渲染进程之间的通信称为IPCInter-Process Communication。ipcMain 与 ipcRendereripcMain在主进程中使用接收消息。ipcRenderer在渲染进程中使用发送消息。单向通信示例实例// main.js const { ipcMain } require(electron); ipcMain.on(ping, (event, arg) { console.log(arg); // 输出 hello from renderer }); // renderer.js const { ipcRenderer } require(electron); ipcRenderer.send(ping, hello from renderer); 双向通信示例主进程回传数据 ipcMain.on(getVersion, (event) { event.reply(getVersionResponse, app.getVersion()); }); 渲染端接收 ipcRenderer.on(getVersionResponse, (event, version) { console.log(version); });invoke/handle 模式推荐写法Electron 提供了更简洁的异步请求方式主进程ipcMain.handle(get-app-path, () app.getPath(userData));渲染进程const result await ipcRenderer.invoke(get-app-path); console.log(result);这种方式类似fetch请求避免多层回调。消息传递最佳实践使用明确的通道名如user:getData。避免传递复杂对象建议 JSON。对来自渲染进程的数据要验证来源与类型。尽量通过invoke/handle实现结构化通信。预加载脚本Preload Scripts预加载脚本运行在渲染进程创建前介于主进程与网页之间。作用是安全地把 Node.js 功能桥接给渲染页面。preload 的作用与意义可访问 Node.js API因为在隔离上下文可安全暴露少量 API 给渲染页面常用于文件读写、系统路径获取、应用信息传递等// preload.js const { contextBridge, ipcRenderer } require(electron); contextBridge.exposeInMainWorld(electronAPI, { getAppVersion: () ipcRenderer.invoke(getVersion) }); 渲染进程使用 // index.html script window.electronAPI.getAppVersion().then(v { console.log(App version:, v); }); /scriptcontextBridge 安全通信contextBridge是 Electron 提供的安全 API用于只暴露需要的函数白名单机制防止恶意网页访问 Node.js 环境在contextIsolation: true模式下仍可安全通信沙箱模式下的使用如果启用了沙箱sandbox: true渲染进程完全无法使用 Node.js。此时 preload 是唯一桥梁负责接收渲染端调用通过 IPC 转发到主进程返回结果给网页端总结模块作用运行环境主进程 (Main)控制应用生命周期、窗口、系统接口Node.js渲染进程 (Renderer)显示 UI、执行前端逻辑ChromiumIPC实现主渲与渲染进程通信双向管道Preload安全地桥接 Node 与 Web中间层一句话理解主进程像总控室渲染进程像每个窗口的工作人员IPC 是对讲机Preload 是过滤后的安全通道。❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧
HoRain云--Electron 核心概念
发布时间：2026/5/27 2:26:02
HoRain云小助手个人主页 个人专栏: 《Linux 系列教程》《c语言教程》⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。专栏介绍专栏名称专栏介绍《C语言》本专栏主要撰写C干货内容和编程技巧让大家从底层了解C把更多的知识由抽象到简单通俗易懂。《网络协议》本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘一起解密网络协议在运行中协议的基本运行机制《docker容器精解篇》全面深入解析 docker 容器从基础到进阶涵盖原理、操作、实践案例助您精通 docker。《linux系列》本专栏主要撰写Linux干货内容从基础到进阶知识由抽象到简单通俗易懂帮你从新手小白到扫地僧。《python 系列》本专栏着重撰写Python相关的干货内容与编程技巧助力大家从底层去认识Python将更多复杂的知识由抽象转化为简单易懂的内容。《试题库》本专栏主要是发布一些考试和练习题库涵盖软考、HCIE、HRCE、CCNA等目录⛳️ 推荐专栏介绍主进程Main Process主进程的职责主进程生命周期实例app 模块详解BrowserWindow 窗口管理实例菜单、托盘、对话框等原生功能渲染进程Renderer Process渲染进程的特点多窗口与多渲染进程Web 页面的加载与显示渲染进程中的限制进程间通信IPCipcMain 与 ipcRenderer实例invoke/handle 模式推荐写法消息传递最佳实践预加载脚本Preload Scriptspreload 的作用与意义contextBridge 安全通信沙箱模式下的使用总结Electron 的本质是一个多进程桌面应用框架它结合了Chromium渲染层和Node.js系统层通过独立的进程模型实现界面显示、逻辑控制和安全通信。下面是 Electron 核心架构展示了主进程、渲染进程、IPC 通信、以及 Preload 的关系。主进程A运行 Node.js控制窗口与系统交互。使用 BrowserWindow 创建渲染进程。渲染进程B每个窗口独立运行 HTML/CSS/JS用于展示界面。预加载脚本B2运在渲染进程加载前执行连接主进程与网页层。通过 contextBridge 安全地暴露 API。IPC 通信虚线箭头主进程和渲染进程通过 ipcMain、ipcRenderer 双向通信。操作系统C主进程可访问系统功能例如文件、托盘、通知等。主进程Main Process主进程是 Electron 应用的指挥中心运行在 Node.js 环境中。它负责创建窗口、管理应用生命周期、调用系统 API以及与渲染进程通信。整个应用启动后系统会首先运行主进程脚本通常是main.js。主进程的职责启动与退出应用创建和销毁 BrowserWindow窗口注册菜单、托盘、全局快捷键调用操作系统功能文件系统、通知、对话框监听渲染进程发送的事件主进程生命周期主进程的生命周期与应用生命周期一致从app模块开始实例const { app, BrowserWindow } require(electron); app.whenReady().then(() { const win new BrowserWindow({ width: 800, height: 600 }); win.loadFile(index.html); }); app.on(window-all-closed, () { if (process.platform ! darwin) app.quit(); });app.whenReady()Electron 初始化完成后触发。window-all-closed所有窗口关闭时触发。app.quit()退出整个应用。macOS 上常见特例用户关闭所有窗口时程序仍保持后台运行。app 模块详解app模块用于控制整个应用生命周期app.on(ready)当 Electron 初始化完毕时触发。app.quit()退出应用。app.getPath(userData)获取系统路径。app.setAppUserModelId(id)设置 Windows 的任务栏 ID。app.isPackaged判断当前是否为打包状态。BrowserWindow 窗口管理主进程通过BrowserWindow创建可视化窗口实例const win new BrowserWindow({ width: 1024, height: 768, resizable: true, webPreferences: { preload: ./preload.js, nodeIntegration: false } });width,height窗口尺寸resizable是否可调整大小webPreferences用于配置渲染进程行为preload预加载脚本nodeIntegration是否允许渲染进程使用 Node.js菜单、托盘、对话框等原生功能Electron 提供多个模块访问系统功能Menu / MenuItem自定义菜单栏Tray创建系统托盘图标Dialog调用系统文件选择、警告框Notification原生通知shell打开外部链接或文件例如const { dialog } require(electron); dialog.showOpenDialog({ properties: [openFile, multiSelections] });渲染进程Renderer Process渲染进程负责显示界面运行在 Chromium 环境中。每个BrowserWindow都有一个独立的渲染进程。渲染进程的特点基于 Chromium运行 HTML/CSS/JS默认无法直接访问 Node.js API出于安全考虑可使用 Web 技术栈Vue、React、Svelte 等每个窗口对应独立线程互不影响多窗口与多渲染进程Electron 的每个窗口BrowserWindow会启动一个独立渲染进程关闭一个窗口不会影响其他窗口类似浏览器的多标签页模型。这使得应用在崩溃恢复时更安全、可靠。Web 页面的加载与显示渲染进程的内容由主进程加载win.loadFile(index.html); // 加载本地页面 // 或者 win.loadURL(https://example.com); // 加载远程网页渲染进程中的限制出于安全原因不能直接使用 Node.js 模块如fs、path。不建议在渲染进程执行高负载计算会卡 UI。与系统交互需通过 IPC 通信或 preload 暴露 API。进程间通信IPCElectron 的核心机制之一是主进程与渲染进程之间的通信称为IPCInter-Process Communication。ipcMain 与 ipcRendereripcMain在主进程中使用接收消息。ipcRenderer在渲染进程中使用发送消息。单向通信示例实例// main.js const { ipcMain } require(electron); ipcMain.on(ping, (event, arg) { console.log(arg); // 输出 hello from renderer }); // renderer.js const { ipcRenderer } require(electron); ipcRenderer.send(ping, hello from renderer); 双向通信示例主进程回传数据 ipcMain.on(getVersion, (event) { event.reply(getVersionResponse, app.getVersion()); }); 渲染端接收 ipcRenderer.on(getVersionResponse, (event, version) { console.log(version); });invoke/handle 模式推荐写法Electron 提供了更简洁的异步请求方式主进程ipcMain.handle(get-app-path, () app.getPath(userData));渲染进程const result await ipcRenderer.invoke(get-app-path); console.log(result);这种方式类似fetch请求避免多层回调。消息传递最佳实践使用明确的通道名如user:getData。避免传递复杂对象建议 JSON。对来自渲染进程的数据要验证来源与类型。尽量通过invoke/handle实现结构化通信。预加载脚本Preload Scripts预加载脚本运行在渲染进程创建前介于主进程与网页之间。作用是安全地把 Node.js 功能桥接给渲染页面。preload 的作用与意义可访问 Node.js API因为在隔离上下文可安全暴露少量 API 给渲染页面常用于文件读写、系统路径获取、应用信息传递等// preload.js const { contextBridge, ipcRenderer } require(electron); contextBridge.exposeInMainWorld(electronAPI, { getAppVersion: () ipcRenderer.invoke(getVersion) }); 渲染进程使用 // index.html script window.electronAPI.getAppVersion().then(v { console.log(App version:, v); }); /scriptcontextBridge 安全通信contextBridge是 Electron 提供的安全 API用于只暴露需要的函数白名单机制防止恶意网页访问 Node.js 环境在contextIsolation: true模式下仍可安全通信沙箱模式下的使用如果启用了沙箱sandbox: true渲染进程完全无法使用 Node.js。此时 preload 是唯一桥梁负责接收渲染端调用通过 IPC 转发到主进程返回结果给网页端总结模块作用运行环境主进程 (Main)控制应用生命周期、窗口、系统接口Node.js渲染进程 (Renderer)显示 UI、执行前端逻辑ChromiumIPC实现主渲与渲染进程通信双向管道Preload安全地桥接 Node 与 Web中间层一句话理解主进程像总控室渲染进程像每个窗口的工作人员IPC 是对讲机Preload 是过滤后的安全通道。❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧
