Electron 入门教程什么是 Electron？ Electron是一个使用 JavaScript、HTML 和 C

什么是 Electron？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

Electron的几个核心概念

1. 主进程（main）

管理应用生命周期（启动、退出）
创建/管理所有窗口（BrowserWindow）
调用操作系统 API（文件系统、菜单、托盘等）

2. 渲染进程（renderer）

运行 Chromium 渲染网页内容
使用 HTML/CSS/JavaScript 构建界面
默认无法直接访问 Node.js API

3. 进程间通信（IPC）

运行 Chromium 渲染网页内容
使用 HTML/CSS/JavaScript 构建界面

默认无法直接访问 Node.js API

主要方式：

方法	方向	特性
`ipcMain.on`	渲染 → 主（异步）	非阻塞
`ipcRenderer.send`	渲染 → 主（异步）	非阻塞
`ipcRenderer.invoke`	渲染 → 主（Promise）	推荐方式
`webContents.send`	主 → 渲染	主动推送

4. 预加载脚本（perload）

在渲染进程加载前注入代码
通过 contextBridge 安全暴露有限 API
防止直接暴露 Node.js 功能到网页

5. 打包工具（electron Forge）

将代码+依赖打包成可执行文件（exe/dmg/appImage 等）
自动处理图标、版本信息、签名等
支持自动更新功能

环境搭建

安装 Node.js
Node.js 官网下载并安装 LTS 版本（建议 18.x 以上）。

验证是否安装成功

node -v  # 查看 Node.js 版本
npm -v   # 查看 npm 版本

创建第一个 Electron 应用

步骤 1：创建项目

mkdir my-electron-app
cd my-electron-app
npm init -y  # 快速生成 package.json

步骤 2：安装 Electron

npm install electron --save-dev

步骤 3：创建核心文件

创建 main.js（主进程）

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
  // win.webContents.openDevTools(); // 打开调试工具
}

app.whenReady().then(createWindow);

// 处理窗口关闭事件（macOS 需特殊处理）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

创建 index.html（渲染进程）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello Electron</title>
</head>
<body>
  <h1>欢迎使用 Electron！</h1>
  <p>当前 Electron 版本: <span id="electron-version"></span></p>
  <p>当前 Node.js 版本: <span id="node-version"></span></p>

  <script>
    // 动态显示版本信息
    document.getElementById('electron-version').textContent = process.versions.electron;
    document.getElementById('node-version').textContent = process.versions.node;
  </script>
</body>
</html>

运行 HTML

步骤 4：修改 `package.json`

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

步骤 5：运行应用

npm start

你会看到一个窗口显示 Electron 和 Node.js 的版本信息！

后续我们再来进一步讲解进程之间的通信以及几个核心之间的关系。

Electron 入门教程