Electron入门指南：从零开始构建跨平台桌面应用

一月是个猫2026-01-07 16:29

前言

随着前端技术的飞速发展，Web 技术不再局限于浏览器。Electron 的出现，让开发者可以用熟悉的 HTML、CSS 和 JavaScript 构建功能强大的桌面应用程序。从 Visual Studio Code 到 Slack，再到网易云音乐，众多知名软件都基于 Electron 构建。

本文将带你全面了解 Electron 的核心概念，深入理解其架构与多进程通信机制，掌握常用 API，并通过一个简单的工程案例带你快速入门。

一、Electron 是什么？能做什么？优缺点分析

1.1 什么是 Electron？

Electron 是一个由 OpenJS Foundation 与社区共同维护的开源框架，它将 Chromium 渲染引擎 和 Node.js 运行时 深度整合，允许开发者使用 Web 技术（HTML、CSS、JavaScript）构建跨平台的桌面应用程序。

  • 诞生背景：最初作为 GitHub Atom 编辑器的底层框架（名为 Atom Shell），于 2013 年启动，2015 年正式更名为 Electron 并独立发布。
  • 核心技术栈：JavaScript + HTML + CSS
  • 支持平台：Windows、macOS、Linux

1.2 Electron 能做什么？

Electron 不只是一个"网页打包器"，它能实现接近原生应用的功能和体验，典型应用场景包括：

  • ✅ 代码编辑器与 IDE：如 Visual Studio Code、Atom
  • ✅ 通讯工具：如 Slack、Discord、Zoom 客户端
  • ✅ 媒体应用：如网易云音乐、百度网盘
  • ✅ 远程控制与工具类软件：如 Figma 桌面端、Postman
  • ✅ 企业级管理后台桌面化
  • ✅ 游戏客户端或轻量级游戏

得益于 Node.js 的加持，Electron 应用可以访问文件系统、调用系统 API、创建系统托盘、发送通知等，实现传统 Web 应用无法完成的操作。

1.3 Electron 的优势

优势 说明
🌐 跨平台支持 一套代码可编译为 Windows、macOS、Linux 三端应用，极大降低开发与维护成本
🧑‍💻 上手简单 前端开发者无需学习 C++、Swift 等原生语言，即可开发桌面应用
⚙️ 底层系统权限 可通过 Node.js 访问文件系统、注册表、命令行工具等，实现复杂系统交互
🧩 生态丰富 背靠庞大的 npm 和前端生态，模块复用方便；社区活跃，文档齐全
🛠️ 易于调试 支持 Chrome DevTools，调试体验接近 Web 开发

1.4 Electron 的缺点

缺点 说明 建议
📦 应用体积较大 每个应用都内嵌 Chromium 和 Node.js，最小包通常在 50MB 以上 使用打包优化工具（如 electron-builder）压缩资源
⚠️ 性能开销 多进程架构和渲染开销可能导致低配设备卡顿 优化渲染逻辑，避免白屏，合理使用硬件加速
🔐 安全风险 若未正确配置 nodeIntegration 或加载远程内容，可能引发 RCE（远程代码执行）漏洞 禁用危险配置，启用上下文隔离，使用 contextIsolation: true
💸 内存占用高 多个窗口或复杂页面可能导致内存占用上升 合理管理窗口生命周期，及时销毁无用窗口

📌 总结 ：Electron 特别适合工具类、中后台管理类、跨平台协作型应用，不适合对性能和体积要求极高的场景（如大型游戏或系统级工具）。

二、Electron 架构与多进程通信原理

2.1 整体架构

Electron 采用 主进程（Main Process） + 渲染进程（Renderer Process） 的多进程架构，类似于现代浏览器的设计。

  • 主进程 ：运行 main.js，负责创建窗口、管理应用生命周期、处理系统事件、调用原生 API。
  • 渲染进程：每个窗口对应一个独立的渲染进程，运行在 Chromium 中，负责渲染 UI 界面，可使用 DOM、CSS、Canvas 等 Web API。

🔍 注意：主进程只有一个，但可以有多个渲染进程（每个窗口一个）。

2.2 多进程模型图示

sql 复制代码 
+---------------------+
|     主进程 (Main)    |
|  - app, BrowserWindow |
|  - Tray, Menu, etc.  |
+----------+----------+
           |
           | IPC 通信
           v
+---------------------+     +---------------------+
| 渲染进程 1 (Renderer) |     | 渲染进程 2 (Renderer) |
|  - HTML/CSS/JS       |     |  - 独立上下文         |
|  - 可访问 window      |     |  - 无法直接访问 Node |
+---------------------+     +---------------------+

💡 关键点：

2.3 多进程通信原理（IPC）

Electron 提供了两种主要的 IPC 模块：

  • ipcMain 和 ipcRenderer：发送异步消息
  • ipcMain.invoke / ipcMain.handle 与 ipcRenderer.invoke：支持异步请求-响应模式（推荐用于函数调用）

示例：主进程与渲染进程通信

主进程（main.js）

javascript 复制代码 
const { ipcMain } = require('electron');

ipcMain.on('message-from-renderer', (event, data) => {
  console.log('收到渲染进程消息:', data);
  event.sender.send('message-to-renderer', { response: '主进程已处理' });
});

渲染进程（renderer.js）

javascript 复制代码 
const { ipcRenderer } = require('electron');

ipcRenderer.send('message-from-renderer', { text: '你好主进程' });

ipcRenderer.on('message-to-renderer', (event, response) => {
  console.log('主进程回复:', response);
});

✅ 最佳实践：

三、Electron 常用 API 讲解

以下是 Electron 开发中最常用的核心模块及其用途：

模块 作用 使用场景
app 控制应用生命周期 监听 ready、window-all-closed、activate 事件
BrowserWindow 创建和管理浏览器窗口 创建主窗口、子窗口、设置大小、位置、是否置顶等
ipcMain / ipcRenderer 主进程与渲染进程通信 数据传递、触发系统操作
dialog 显示系统对话框 打开文件、保存文件、提示框等
Tray 创建系统托盘图标 后台运行、最小化到托盘
Menu / MenuItem 自定义菜单 右键菜单、顶部菜单栏
nativeImage 处理原生图像 设置托盘图标、窗口图标
shell 打开外部资源 打开 URL、打开文件夹

示例代码片段

1. 创建系统托盘

ini 复制代码 
const { Tray, nativeImage } = require('electron');
let tray = null;

app.whenReady().then(() => {
  const icon = nativeImage.createFromPath('icon.png');
  tray = new Tray(icon);
  tray.setToolTip('我的 Electron 应用');
  tray.setContextMenu(Menu.buildFromTemplate([
    { label: '打开', click: () => createWindow() },
    { label: '退出', click: () => app.quit() }
  ]));
});

2. 打开文件选择框

php 复制代码 
const { dialog } = require('electron');

dialog.showOpenDialog({
  properties: ['openFile', 'multiSelections'],
  filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }]
}).then(result => {
  console.log(result.filePaths);
});

四、简单工程搭建案例

下面我们从零开始搭建一个基础的 Electron 项目。

4.1 环境准备

确保已安装：

  • Node.js（建议 v16+）
  • npm 或 yarn
  • 代码编辑器（推荐 VS Code）

4.2 创建项目结构

bash 复制代码 
mkdir electron-hello-world
cd electron-hello-world
npm init -y
npm install --save-dev electron

4.3 创建项目文件

（1）main.js ------ 主进程入口

javascript 复制代码 
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });

  win.loadFile('index.html');
  win.webContents.openDevTools(); // 开发时打开 DevTools
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

// 示例 IPC 处理
ipcMain.on('ping', (event) => {
  event.sender.send('pong', { message: 'Pong 来自主进程！' });
});

（2）preload.js ------ 预加载脚本（安全桥梁）

javascript 复制代码 
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  sendPing: () => ipcRenderer.send('ping'),
  onPong: (callback) => ipcRenderer.on('pong', (event, data) => callback(data))
});

🔒 说明 ：使用 contextBridge 安全地将 API 暴露给渲染进程，避免直接引入 Node 模块。

（3）index.html ------ 渲染界面

xml 复制代码 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello Electron</title>
  <style>
    body { font-family: "Segoe UI", sans-serif; text-align: center; margin-top: 100px; }
    button { padding: 12px 24px; font-size: 16px; margin: 10px; }
  </style>
</head>
<body>
  <h1>🎉 欢迎来到 Electron 世界！</h1>
  <p>这是一个基础的桌面应用示例</p>
  <button id="pingBtn">发送 Ping</button>
  <p id="result"></p>

  <script type="module">
    const { electronAPI } = window;

    document.getElementById('pingBtn').addEventListener('click', () => {
      electronAPI.sendPing();
    });

    electronAPI.onPong((data) => {
      document.getElementById('result').textContent = data.message;
    });
  </script>
</body>
</html>

（4）package.json 配置启动脚本

json 复制代码 
{
  "name": "electron-hello-world",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dev": "electron ."
  },
  "author": "Your Name",
  "license": "MIT",
  "description": "A simple Electron demo app"
}

4.4 启动应用

sql 复制代码 
npm start

如果一切正常，你将看到一个窗口弹出，点击按钮可与主进程通信。

五、后续学习建议

  1. 阅读官方文档 ：www.electronjs.org/docs 是最权威的学习资源。
  2. 使用脚手架工具 ：
    • Electron Forge：集成打包、自动更新、发布等功能
    • Electron Builder：更强大的打包与分发方案
  3. 关注安全性 ：
    • 始终启用 contextIsolation: true
    • 避免在渲染进程中直接引入 require
    • 使用 sandbox: true 提升安全性
  4. 性能优化 ：
    • 减少白屏时间（使用 ready-to-show 事件）
    • 合理管理多窗口生命周期
    • 使用懒加载和代码分割

六、结语

Electron 让前端开发者真正实现了"一次编写，到处运行"的桌面开发梦想。虽然它有体积大、资源占用高等局限，但在工具类、跨平台协作型应用中表现出色。

通过本文的学习，你已经掌握了：

  • Electron 是什么及其适用场景
  • 多进程架构与 IPC 通信机制
  • 常用 API 的使用方式
  • 一个完整的入门项目搭建流程

下一步，你可以尝试添加以下功能来深化理解：

  • 实现"打开文件"功能
  • 添加系统托盘和右键菜单
  • 实现窗口最小化到托盘
  • 使用 electron-builder 打包为 .exe 或 .dmg

🌟 保持好奇心，持续探索。浏览器之外的世界，同样精彩。

🙌 感谢阅读！欢迎在评论区分享你的第一个 Electron 应用想法或遇到的问题。

相关推荐
qingyun9895 分钟前
Web Components 实战：创建自定义比例条组件
前端
前端小超超5 分钟前
ionic + vue3 + capacitor遇到backButton问题
前端·javascript·vue.js
GIS之路6 分钟前
GDAL 空间关系解析
前端
布列瑟农的星空33 分钟前
WebAssembly入门（一）——Emscripten
前端·后端
贵州数擎科技有限公司37 分钟前
一批优质 AI 域名转让（.ai）｜适合 AI 创业 / 产品 / 公司品牌
前端
小二·43 分钟前
微前端架构完全指南：qiankun 与 Module Federation 双方案深度对比（Vue 3 + TypeScript）
前端·架构·typescript
EndingCoder1 小时前
枚举类型：常量集合的优雅管理
前端·javascript·typescript
Electrolux1 小时前
[wllama]纯前端实现大语言模型调用：在浏览器里跑 AI 是什么体验。以调用腾讯 HY-MT1.5 混元翻译模型为例
前端·aigc·ai编程
sanra1231 小时前
前端定位相关技巧
前端·vue
起名时在学Aiifox1 小时前
从零实现前端数据格式化工具：以船员经验数据展示为例
前端·vue.js·typescript·es6
热门推荐
01GitHub 镜像站点02安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）03Labelme从安装到标注：零基础完整指南04Linux下V2Ray安装配置指南05手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！06【踩坑笔记】50系显卡适配的 PyTorch 安装07GitLab 零基础入门指南：从安装到项目管理全流程08jdk21下载、安装（Windows、Linux、macOS）09UV安装并设置国内源102025-04-03 Latex学习1——本地配置Latex + VScode环境