Electron 快速入门教程

Electron 是一个基于 Node.js 和 Chromium 的跨平台桌面应用开发框架，你可以用 HTML、CSS、JavaScript 构建 Windows、macOS、Linux 三端一致的桌面应用，比如 VS Code、Figma 都是基于 Electron 开发的。

本教程会带你从 环境搭建 到 打包第一个应用，快速上手 Electron 开发。

一、前置条件

安装 Node.js

确保你的电脑已安装 Node.js（推荐 LTS 版本），可以通过以下命令验证：
bash 复制代码
```
node -v
npm -v
```
下载地址：Node.js 官网
基础技术储备

熟悉 HTML、CSS、JavaScript 基础语法，了解 Node.js 基本使用（如 require、模块）。

二、步骤 1：创建项目并初始化

新建项目文件夹

bash 复制代码

mkdir my-first-electron-app
cd my-first-electron-app

初始化 npm 项目

执行命令并根据提示填写信息（也可以直接 npm init -y 快速生成）：
bash 复制代码
```
npm init
```
生成的 package.json 需要确保两个关键配置：
- main：入口文件（默认 index.js，后续会编写）
- scripts：添加启动脚本

三、步骤 2：安装 Electron

在项目根目录执行安装命令（推荐安装到开发依赖）：

bash 复制代码

npm install electron --save-dev

四、步骤 3：编写核心代码

Electron 应用分为 主进程 和 渲染进程 ，我们需要编写 3 个核心文件：main.js（主进程）、index.html（渲染进程页面）、package.json（配置脚本）。

1. 配置 package.json

修改 package.json，添加启动脚本 start：

json 复制代码

{
  "name": "my-first-electron-app",
  "version": "1.0.0",
  "description": "A simple Electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^28.0.0"
  }
}

2. 编写主进程文件：main.js

主进程负责管理窗口生命周期、系统事件、IPC 通信等，是 Electron 应用的入口。

javascript 复制代码

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

// 定义创建窗口的函数
function createWindow() {
  // 创建一个浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800, // 窗口宽度
    height: 600, // 窗口高度
    webPreferences: {
      // 预加载脚本路径（可选，用于安全暴露 API）
      preload: path.join(__dirname, 'preload.js')
    }
  });

  // 加载本地的 index.html 文件
  mainWindow.loadFile('index.html');

  // 开发环境下，打开开发者工具（可选）
  // mainWindow.webContents.openDevTools();
}

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

  // macOS 特有：当所有窗口关闭后，重新打开窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

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

3. 编写预加载脚本（可选）：preload.js

预加载脚本运行在渲染进程中，但拥有 Node.js 权限，用于安全地向渲染进程暴露 API，避免直接在渲染进程中操作 Node.js 带来的安全风险。

javascript 复制代码

const { contextBridge } = require('electron');

// 向渲染进程暴露全局 API
contextBridge.exposeInMainWorld('electronAPI', {
  appVersion: () => process.versions.electron
});

4. 编写渲染进程页面：index.html

这是应用的界面，和普通网页完全一致，你可以用任何前端框架（Vue/React）替换。

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的第一个 Electron 应用</title>
  <style>
    body {
      text-align: center;
      padding: 50px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello Electron!</h1>
  <p>当前 Electron 版本：<span id="version"></span></p>
  <script>
    // 调用预加载脚本暴露的 API
    document.getElementById('version').innerText = window.electronAPI.appVersion();
  </script>
</body>
</html>

五、步骤 4：运行应用

在项目根目录执行启动命令：

bash 复制代码

npm start

此时会弹出一个 800×600 的窗口，显示 Hello Electron! 和当前 Electron 版本，说明应用运行成功。

六、步骤 5：打包应用（生成可执行文件）

开发完成后，需要将应用打包成对应平台的可执行文件（如 .exe、.dmg、.deb），推荐使用 electron-forge 工具。

安装 electron-forge

bash 复制代码

npm install --save-dev @electron-forge/cli
npx electron-forge import

打包应用
bash 复制代码
```
npm run make
```
打包完成后，会在项目根目录生成 out 文件夹，里面包含对应平台的可执行文件：
- Windows：out/my-first-electron-app-win32-x64 下的 .exe 文件
- macOS：out 下的 .dmg 文件
- Linux：out 下的 .deb 或 .snap 文件

七、核心概念梳理

进程类型	作用	运行环境
主进程	管理窗口、系统事件、IPC 通信、权限操作（文件读写、网络请求）	Node.js 环境
渲染进程	负责应用界面渲染，和普通网页一致	Chromium 环境
预加载脚本	作为主进程和渲染进程的桥梁，安全暴露 API	两者之间

八、进阶方向

IPC 通信 ：使用 ipcMain.handle + ipcRenderer.invoke 实现主进程和渲染进程的数据交互（如读取本地文件）。
集成前端框架 ：将 index.html 替换为 Vue/React 项目的打包产物，开发更复杂的界面。
添加系统功能：集成托盘图标、菜单、快捷键、文件拖拽等 Electron 特有能力。
性能优化：关闭不必要的开发者工具、优化渲染进程、使用内存缓存。