第 1 章：Electron 基础与环境搭建

欢迎来到 Electron 桌面应用开发的世界！如果你已经熟悉 HTML、CSS 和 JavaScript，那么你已经具备了构建桌面应用所需的核心技能。本章将带你从零开始，搭建开发环境并创建你的第一个 Electron 应用。

1.1 什么是 Electron

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

给前端开发者的建议

想象你正在开发一个网页应用，但这一次，它运行在用户的桌面上，拥有原生的窗口、菜单和系统级能力。这就是 Electron 的魔力——你不需要学习 C++、C# 或 Swift，就能构建真正的桌面软件。

Electron 的核心原理很简单：它将 Chromium 渲染引擎（负责显示界面）和 Node.js 运行时（负责系统级操作）打包在一起，让你的 Web 应用既能展示漂亮的界面，又能调用操作系统的原生 API。

Electron 的架构简图

Electron 架构概览

┌─────────────────────────────────────────┐
│           你的 Web 应用代码              │
│    (HTML + CSS + JavaScript/Vue/React)   │
├─────────────────────────────────────────┤
│           Chromium 渲染引擎              │
│         (界面渲染、DOM操作)              │
├─────────────────────────────────────────┤
│           Node.js 运行时                 │
│    (文件系统、网络、进程、原生模块)       │
├─────────────────────────────────────────┤
│           原生操作系统 API                 │
│    (Windows / macOS / Linux)             │
└─────────────────────────────────────────┘

1.2 Electron vs 传统桌面开发

在 Electron 出现之前，开发桌面应用意味着要为每个平台学习不同的技术栈。让我们看看 Electron 如何改变了游戏规则：

对比维度	传统桌面开发	Electron 开发
技术栈	C++/C# (Windows) Objective-C/Swift (macOS) GTK/Qt (Linux)	HTML + CSS + JavaScript 一套代码，三端运行
开发成本	需要多个团队或全栈工程师	前端团队即可上手
UI 开发	原生控件，学习曲线陡峭	Web 技术，丰富的生态和组件库
跨平台	需要为每个平台单独开发	一次编写，到处运行
性能	接近原生，资源占用低	Chromium 内存占用较大，但现代硬件已足够
打包体积	较小（仅应用本身）	较大（包含 Chromium + Node.js，约 150MB+）
代表应用	Office、Photoshop	VS Code、Slack、Discord、Notion

选型建议

如果你需要极致的性能（如视频剪辑软件、大型游戏），原生开发仍是首选。但对于大多数业务应用、工具软件、生产力应用来说，Electron 的开发效率和生态优势远超性能损耗。

1.3 环境搭建

步骤一：安装 Node.js

Electron 基于 Node.js，因此首先需要安装它。访问 nodejs.org 下载 LTS（长期支持）版本。

验证 Node.js 安装

# 打开终端，检查版本
node --version   # 应显示 v18.x.x 或更高
npm --version    # 应显示 9.x.x 或更高

版本要求

Electron 要求 Node.js 至少为 v16 以上，推荐使用 LTS 版本（v18 或 v20）。过旧的 Node 版本可能导致安装失败。

步骤二：创建项目并安装 Electron

创建项目目录

bash

mkdir my-electron-app
cd my-electron-app
npm init -y

安装 Electron

bash

npm install electron --save-dev

作为开发依赖安装（--save-dev），因为 Electron 只在开发时需要，打包后会自动包含运行时。

修改 package.json

添加 main 入口和启动脚本：

package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "electron": "^28.0.0"
  }
}

1.4 第一个 Hello World 应用

现在创建三个核心文件，构成最简单的 Electron 应用：

main.js - 主进程入口

main.js

// 引入 Electron 的核心模块
const { app, BrowserWindow } = require('electron')
const path = require('path')

// 创建窗口的函数
function createWindow () {
  // 实例化 BrowserWindow，这就像打开一个浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 预加载脚本路径（后续章节会详细讲解）
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载应用的入口 HTML 文件
  mainWindow.loadFile('index.html')
  
  // 打开开发者工具（开发时很有用）
  // mainWindow.webContents.openDevTools()
}

// Electron 初始化完成后，准备创建窗口
app.whenReady().then(() => {
  createWindow()

  // macOS 特有：当点击 dock 图标时，如果没有窗口则创建新窗口
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 当所有窗口关闭时退出应用（Windows & Linux）
app.on('window-all-closed', function () {
  // macOS 除外，macOS 通常应用会保持运行直到用户主动退出
  if (process.platform !== 'darwin') app.quit()
})

类比理解

把 main.js 想象成 Node.js 服务器端的入口文件。它不负责显示界面，而是管理应用生命周期、创建窗口、处理系统事件。就像 Express 应用有一个 server.js 作为入口一样。

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

preload.js

// 预加载脚本在页面加载前执行，用于安全地暴露 API 给渲染进程
// 第2章会深入讲解，现在先了解它的存在

window.addEventListener('DOMContentLoaded', () => {
  console.log('页面已加载！')
})

index.html - 渲染界面

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <title>Hello Electron!</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    h1 {
      font-size: 3em;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
  </style>
</head>
<body>
  <h1>🎉 Hello, Electron World!</h1>
</body>
</html>

运行应用

bash

npm start

如果一切顺利，你会看到一个漂亮的桌面窗口弹出，显示 "Hello, Electron World!" 🎉

常见问题排查

命令找不到？ 确保在项目根目录运行，且 node_modules/.bin 在 PATH 中
白屏？ 取消注释 mainWindow.webContents.openDevTools() 打开 DevTools 查看报错
安装慢？ 使用 npm config set registry https://registry.npmmirror.com 切换国内镜像

1.5 开发工具推荐

VS Code 配置

VS Code 是 Electron 开发的最佳伴侣，以下是推荐的配置：

1. 安装扩展

ESLint - 代码规范检查
Prettier - 代码格式化
Electron Snippets - Electron 代码片段
Debugger for Chrome - 调试渲染进程

2. 调试配置（.vscode/launch.json）

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "args": ["."],
      "env": {
        "NODE_ENV": "development"
      }
    },
    {
      "name": "Debug Renderer Process",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "webRoot": "${workspaceFolder}",
      "timeout": 30000
    }
  ]
}

3. 推荐设置（.vscode/settings.json）

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": [
    "javascript",
    "html"
  ]
}

其他实用工具

工具	用途	推荐理由
electron-reload	开发时自动重启	修改代码后自动刷新，提升开发效率
electron-builder	应用打包分发	一键打包为 .exe/.dmg/.AppImage，支持自动更新
electron-devtools-installer	安装 Chrome 扩展	在 Electron 中使用 Vue/React DevTools

本章小结

恭喜！你已经完成了 Electron 的环境搭建并运行了第一个应用。核心要点：

Electron = Chromium + Node.js，用 Web 技术做桌面应用
主进程（main.js）管理应用生命周期，渲染进程（HTML）负责界面
开发环境需要 Node.js + Electron 包
最小应用需要 main.js、preload.js、index.html 三个文件

下一章，我们将深入理解 Electron 的进程模型和IPC 通信机制——这是掌握 Electron 的关键。