初体验Electron

刘春龙原创2026/3/5...大约 4 分钟

初体验 Electron 🎉

什么是 Electron 💎

Electron 是一个由 GitHub 开发和维护的开源框架，它允许开发者使用 JavaScript、HTML、CSS 等 Web 技术来构建跨平台的桌面应用程序。

简单来说：使用 Electron，你只需编写一套代码，就可以将 Web 应用打包成运行在 Windows、macOS、Linux 上的桌面应用，而无需为每个平台单独开发原生应用。

官方网站

Electron 官网：https://www.electronjs.org/

Electron 中文文档：https://www.electronjs.org/zh/docs/latest/

Electron 的核心组成 💎

一个 Electron 应用主要由三个核心部分组成：

组成部分	作用
主进程	负责管理应用的生命周期、窗口管理、系统菜单、原生 API 调用等
渲染进程	负责展示 Web 页面（Chromium 内核），运行在独立的进程里
预加载脚本	充当主进程与渲染进程之间的桥梁，使用 `contextBridge` 暴露安全的 API

Electron 进程模型图解

主进程：每个 Electron 应用只有一个主进程，运行在 Node.js 环境中
渲染进程：每个 BrowserWindow 实例都会创建一个独立的渲染进程

主进程与渲染进程通过 IPC（Inter-Process Communication） 进行通信：

ipcMain / ipcRenderer 模块
contextBridge 暴露安全 API

为什么选择 Electron 💎

Electron 已经成为了开发桌面应用程序的主流框架之一，业内有许多知名软件都是基于 Electron 开发的：

Visual Studio Code：微软出品的代码编辑器
GitHub Desktop：GitHub 官方桌面客户端
Slack：企业协作沟通工具
Discord：即时通讯软件
Notion：笔记与协作工具
WhatsApp Desktop：WhatsApp 桌面版
Postman：API 调试工具

Electron 的优势

跨平台：一次开发，Windows、macOS、Linux 通吃
降低学习成本：前端开发者可以直接上手，无需学习 C++、Java 等原生语言
生态丰富：可以无缝使用 npm 生态中的所有包
开发效率高：UI 使用 Web 技术，开发迭代速度极快
可访问原生 API：通过 Node.js 调用系统底层能力

Electron 的不足

应用体积较大：打包后的安装包通常在几十 MB 到上百 MB 之间
内存占用偏高：相比原生应用，Electron 应用的内存消耗会更大
性能略逊：对于极高计算性能要求的场景，原生应用更具优势

Electron 的工作原理 💎

Electron 本质上是将 Chromium（负责渲染 Web 页面）和 Node.js（负责系统底层操作）整合到了一个运行时环境中。

┌────────────────────────────────────────────┐
│              Electron 应用                  │
├──────────────────┬─────────────────────────┤
│   主进程 (Main)   │  渲染进程 (Renderer)    │
│                  │                         │
│   Node.js 环境    │  Chromium 内核          │
│   窗口管理        │  HTML / CSS / JS        │
│   系统 API 调用   │  页面渲染               │
│   菜单/托盘       │  用户交互               │
└──────────────────┴─────────────────────────┘

进程通信

主进程与渲染进程之间通过 IPC（进程间通信） 进行数据交换，渲染进程无法直接访问 Node.js 的原生模块，必须通过预加载脚本安全地暴露给渲染进程。

简单的 Electron 应用结构 💎

一个最基础的 Electron 应用通常包含以下文件结构：

└─ my-electron-app
   └─  node_modules     --- 项目依赖
   └─  src
      └─  main.js       --- 主进程入口文件
      └─  preload.js    --- 预加载脚本
      └─  index.html    --- 渲染进程页面
      └─  renderer.js   --- 渲染进程脚本
   └─  package.json    --- 项目配置文件

main.js

// 主进程入口
const { app, BrowserWindow } = require('electron')

function createWindow() {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: __dirname + '/preload.js',
    },
  })

  // 加载 index.html 文件
  win.loadFile('index.html')
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // 在 macOS 上，当所有窗口都关闭后，应用不会退出
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 当所有窗口都关闭后退出应用（Windows & Linux）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

preload.js

// 预加载脚本 - 在渲染进程加载之前运行
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  // 暴露给渲染进程的安全 API
  sendMessage: (msg) => ipcRenderer.send('message', msg),
  receiveMessage: (callback) => ipcRenderer.on('message', callback),
})

index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>我的第一个 Electron 应用</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
    <p>当前版本：<span id="version"></span></p>
    <script src="./renderer.js"></script>
  </body>
</html>

renderer.js

// 渲染进程脚本
document.getElementById('version').innerText = process.versions.electron

小结

通过上面的示例代码，我们可以看到 Electron 应用的最基本结构：

main.js：作为主进程入口，负责创建窗口和管理应用生命周期
preload.js：作为主进程与渲染进程的桥梁，使用 contextBridge 安全地暴露 API
index.html：渲染进程的页面，运行在 Chromium 中
renderer.js：渲染进程的脚本，处理页面交互

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。