目录一、Electron 概述二、Electron 架构1、Main 进程2、Renderer 进程3、Preload 脚本三、Electron 核心 API1、窗口管理2、IPC 通信3、文件与系统操作四、Electron 安全最佳实践重点难点1、禁用 NodeIntegration2、开启 Context Isolation3、使用 Preload 安全桥接4、防止远程代码执行5、内容安全策略CSP五、性能优化与打包1、内存优化2、打包优化六、Electron 高级应用场景1、多窗口/多标签页应用2、原生通知和系统托盘3、自动更新4、原生模块兼容5、集成前端框架七、项目实战1、Vue Electron 最小项目实践2、React Electron 最小项目实践八、常见坑重点一、Electron 概述Electron 是一个使用 Web 技术HTML、CSS、JS 来构建跨平台桌面应用的框架。它本质上是 Chromium Node.js 的组合允许你在桌面端使用 Node API同时渲染网页 UI。优点跨平台Windows、macOS、Linux。Web 技术栈前端开发者门槛低。丰富生态Node.js 模块可直接使用。缺点大体积每个应用都打包 Chromium (~50MB)。性能消耗高内存占用尤其是多窗口应用。安全性混合了 Node 环境需要注意防护。核心多进程架构Main vs Renderer安全隔离Context Isolation PreloadIPC 通信与异步处理跨平台资源管理难点安全防护XSS Node 权限高性能内存管理多窗口 重渲染自动更新 签名问题跨平台文件和系统 API 差异二、Electron 架构Electron 的核心是 多进程架构Main 进程Renderer 进程Preload 脚本1、Main 进程负责创建和管理窗口 (BrowserWindow)。系统级 API 调用文件、剪贴板、通知。与渲染进程通信IPC。特点Node.js 完全可用。只能有一个 Main 进程。2、Renderer 进程每个窗口对应一个 Renderer 进程Chromium 渲染进程。负责渲染 UI。响应用户交互。特点类似浏览器环境。默认 Node.js 受限需要开启 nodeIntegration 才能访问 Node API安全隐患。3、Preload 脚本介于 Main 和 Renderer 之间提供安全桥接。常用作 IPC 通信的安全层// preload.jsconst{contextBridge,ipcRenderer}require(electron);contextBridge.exposeInMainWorld(electronAPI,{sendData:(data)ipcRenderer.send(data,data),onData:(callback)ipcRenderer.on(data-reply,callback)});安全重点不要在 Renderer 中直接开启 Node推荐使用 contextBridge IPC。防止 XSS 导致本地文件被随意访问。三、Electron 核心 API1、窗口管理BrowserWindow主窗口类。constwinnewBrowserWindow({width:800,height:600,webPreferences:{preload:path.join(__dirname,preload.js),nodeIntegration:false,// 安全contextIsolation:true,// 强制隔离}});多窗口时要注意内存泄漏。可以用 BrowserView 实现复杂布局。2、IPC 通信Main ↔ Renderer 通信ipcMainMain 端监听ipcRendererRenderer 端发送// MainipcMain.on(msg,(event,arg){event.reply(reply,收到: arg);});难点异步通信、跨窗口通信容易产生回调混乱需要用 Promise 封装。3、文件与系统操作Node API 可直接用constfsrequire(fs);const{dialog}require(electron);dialog.showOpenDialog(win,{properties:[openFile]}).then(resultconsole.log(result.filePaths));重点难点文件路径跨平台差异Windows \ vs Linux /。权限问题macOS 需要用户授权访问。四、Electron 安全最佳实践重点难点安全配置示例// 安全的配置constmainWindownewBrowserWindow({webPreferences:{nodeIntegration:false,// 关键禁用 Node.js 集成contextIsolation:true,// 关键启用上下文隔离preload:path.join(__dirname,preload.js)// 使用预加载脚本}})mainWindow.loadURL(https://your-trusted-site.com)// 即使加载远程内容也安全1、禁用 NodeIntegrationnodeIntegration:false这是为了安全性防止远程代码执行等严重漏洞。2、开启 Context IsolationcontextIsolation:true这会将你的预加载脚本和渲染进程的代码运行在独立的世界Context中防止它们互相篡改。3、使用 Preload 安全桥接封装 API不直接暴露 Node。4、防止远程代码执行禁止 eval()、new Function()。阻止加载外部 URL。5、内容安全策略CSP尽量只加载本地文件。五、性能优化与打包1、内存优化避免多余窗口。使用 BrowserView 而非大量 BrowserWindow。回收无用对象和事件监听。2、打包优化Electron-builder / Electron-forge支持自动签名、压缩。支持多平台打包。ASAR 打包将资源打包成单文件提高读写效率。瘦身技巧剔除 devDependencies。压缩 Chromiumelectron-rebuild。六、Electron 高级应用场景1、多窗口/多标签页应用使用 BrowserView 或 webContents 动态管理内容。2、原生通知和系统托盘new Tray()new Notification()。3、自动更新electron-updater GitHub Release。4、原生模块兼容node-gyp构建注意跨平台问题。5、集成前端框架React / Vue / Svelte Webpack/Vite 构建 UI。渲染进程用 SPA 或 SSR。七、项目实战1、Vue Electron 最小项目实践Electron Vue 3 Vite 实践2、React Electron 最小项目实践Electron React Vite 实践八、常见坑重点场景问题解决NodeIntegration 开启安全隐患 XSS使用 Preload contextBridgeipcRenderer 回调回调混乱使用ipcRenderer.invoke/ async await多窗口内存泄漏每个窗口关闭要清理对象macOS 打包权限问题info.plist 配置文件访问权限自动更新签名 沙箱Windows 使用 SquirrelmacOS 使用 notarize