什么是 Electron

Electron 是一个由 GitHub 开发的开源框架，用于使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用程序。它结合了 Chromium（浏览器引擎） 和 Node.js（后端运行时），使开发者能够用 Web 技术开发原生桌面应用。

核心特点

✅ 跨平台：支持 Windows、macOS 和 Linux ✅ Web 技术栈：使用前端技术（HTML/CSS/JS）开发 ✅ 访问系统 API：通过 Node.js 调用本地文件、网络、硬件等 ✅ 丰富的生态：支持 React、Vue、Angular 等现代前端框架

Electron 的优缺点

✅ 优点

  • 开发效率高：Web 技术栈，快速迭代
  • 跨平台兼容：一套代码适配多系统
  • 生态丰富：NPM 百万级模块可用

❌ 缺点

  • 内存占用高：每个窗口运行 Chromium
  • 包体积大：基础应用 100MB+
  • 性能瓶颈：不适合计算密集型任务

核心架构

Electron 采用 主进程（Main Process） 和 渲染进程（Render Process） 的双进程模型：

为什么选择 Electron？

(1) 跨平台开发成本低

  • 传统方式：Windows（C#）、macOS（Swift）、Linux（GTK/Qt）需分别开发
  • Electron 方式：一套代码，三端运行

(2) 前端开发者友好

  • 无需学习 C++/C#，直接用 JavaScript 开发
  • 可复用 Web 组件（如 React、Vue 组件）

(3) 丰富的 API 支持

  • 系统集成：文件系统、剪贴板、通知、托盘图标
  • 硬件访问：摄像头、蓝牙、打印机

(4) 成熟的商业案例

  • VS Code（微软）
  • Slack（企业通信）
  • Discord（游戏聊天）
  • Figma（设计工具）

难点

  • 调用nodeJs api
// 渲染进程（需启用 nodeIntegration）
const fs = require('fs')
fs.readFile('file.txt', 'utf-8', (err, data) => {
  console.log(data)
})进程间通信
// 主进程（main.js）
const { ipcMain } = require('electron')
ipcMain.on('msg-from-renderer', (event, arg) => {
  console.log(arg) // 接收渲染进程消息
})

// 渲染进程（index.html）
const { ipcRenderer } = require('electron')
ipcRenderer.send('msg-from-renderer', 'Hello Main Process!')

@electron/remote

todo List项目案例（github地址）