一、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 + Preload）
• IPC 通信与异步处理
• 跨平台资源管理

难点：

• 安全防护（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 核心 API

1、窗口管理

BrowserWindow：主窗口类。

constwin=newBrowserWindow({width:800,height:600,webPreferences:{preload:path.join(__dirname,'preload.js'),nodeIntegration:false,// 安全contextIsolation:true,// 强制隔离}});

多窗口时：

• 要注意内存泄漏。
• 可以用 BrowserView 实现复杂布局。

2、IPC 通信

Main ↔ Renderer 通信：

• ipcMain：Main 端监听
• ipcRenderer：Renderer 端发送

// MainipcMain.on('msg',(event,arg)=>{event.reply('reply','收到: '+arg);});

难点：

• 异步通信、跨窗口通信，容易产生回调混乱，需要用 Promise 封装。

3、文件与系统操作

Node API 可直接用：

constfs=require('fs');const{dialog}=require('electron');dialog.showOpenDialog(win,{properties:['openFile']}).then(result=>console.log(result.filePaths));

重点难点：

• 文件路径跨平台差异（Windows \ vs Linux /）。
• 权限问题：macOS 需要用户授权访问。

四、Electron 安全最佳实践（重点难点）

安全配置示例：

// 安全的配置constmainWindow=newBrowserWindow({webPreferences:{nodeIntegration:false,// 关键：禁用 Node.js 集成contextIsolation:true,// 关键：启用上下文隔离preload:path.join(__dirname,'preload.js')// 使用预加载脚本}})mainWindow.loadURL('https://your-trusted-site.com')// 即使加载远程内容也安全

1、禁用 NodeIntegration

nodeIntegration:false

这是为了安全性，防止远程代码执行等严重漏洞。

2、开启 Context Isolation

contextIsolation:true

这会将你的预加载脚本和渲染进程的代码运行在独立的世界（Context）中，防止它们互相篡改。

3、使用 Preload 安全桥接

封装 API，不直接暴露 Node。

4、防止远程代码执行

• 禁止 eval()、new Function()。
• 阻止加载外部 URL。

5、内容安全策略（CSP）

尽量只加载本地文件。

五、性能优化与打包

1、内存优化

• 避免多余窗口。
• 使用 BrowserView 而非大量 BrowserWindow。
• 回收无用对象和事件监听。

2、打包优化

Electron-builder / Electron-forge：

• 支持自动签名、压缩。
• 支持多平台打包。

ASAR 打包：

• 将资源打包成单文件，提高读写效率。

瘦身技巧：

• 剔除 devDependencies。
• 压缩 Chromium（electron-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 实践

八、常见坑（重点）