Electron 是用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架,融合 Chromium 与 Node.js;其核心分主进程(管理窗口、系统 API)和渲染进程(网页界面),通过 IPC 通信;支持快速脚手架启动、文件对话框、打包、系统能力调用等,但存在体积大、内存高、安全敏感等约束。

Electron 是一个用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架。它把 Chromium(浏览器内核)和 Node.js 打包进同一个运行时,让你能用 Web 技术写原生桌面程序,比如 VS Code、Slack、Figma 都是用它做的。
Electron 的核心结构:主进程 + 渲染进程
Electron 应用有两个关键角色:
-
主进程(main process):基于 Node.js,负责创建窗口、管理生命周期、访问系统 API(如文件系统、托盘、通知)。一个 Electron 应用只有一个主进程,入口是
main.js。 - 渲染进程(renderer process):本质是跑在 Chromium 中的网页,用 HTML/CSS/JS 展示界面。每个窗口是一个独立的渲染进程,可以有多个,彼此隔离。
两者通过 ipcMain 和 ipcRenderer 模块通信,不能直接共享变量或调用函数——这是安全设计,也避免崩溃扩散。
快速起步:三步跑起一个桌面窗口
不需要从零配置,用官方脚手架最省事:
立即学习“Java免费学习笔记(深入)”;
- 安装
create-electron-app:npx create-electron-app@latest my-app - 进入项目:
cd my-app,然后npm start就能弹出窗口 - 修改
src/index.html写界面,改src/main.js控制窗口行为(比如设置宽高、是否可缩放、是否显示菜单)
默认启动的是一个最小可用窗口,后续可加菜单栏、托盘图标、自动更新等能力。
JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果,比如图片切换,渐变等等,它为网页活跃了网页的气氛,有时候会起到一定的亲切力。务(控制台应用程序、桌面应用程序、WEB应用程序等)
常见需求怎么实现?
很多功能看似“原生”,其实 Electron 都封装好了:
-
打开本地文件:用
dialog.showOpenDialog()(主进程中),再通过 IPC 把路径传给渲染进程读取 -
打包成安装包:装
electron-packager或更主流的electron-builder,一条命令生成 macOS .app、Windows .exe、Linux .AppImage -
调用系统能力:比如剪贴板用
clipboard.writeText(),通知用new Notification(),托盘用Tray类——全在主进程中操作
注意:渲染进程默认禁用 Node.js 集成(出于安全),如需在页面 JS 中用 fs 等模块,得在 webPreferences 中开启 nodeIntegration: true,但更推荐用 IPC 调用主进程代理,更可控也更安全。
要注意的坑
Electron 强大但不是万能的,几个现实约束得提前知道:
- 体积偏大:最小打包后约 100MB+,因为自带 Chromium 和 Node 运行时
- 内存占用较高:每个窗口都是完整浏览器实例,开多了容易卡
- 安全性敏感:加载远程内容要禁用
nodeIntegration,启用contextIsolation,否则容易被 XSS 利用执行本地代码 - 自动更新需要额外集成:Electron 本身不提供,得靠
electron-updater或自己对接服务器
基本上就这些。它不复杂但容易忽略细节,适合已有 Web 开发经验、想快速落地桌面功能的团队或个人。










