Electron 入门实例：创建第一个“Hello World”应用（2025 年 12 月最新）
这是一个最经典的 Electron 入门示例，按照官方 Quick Start 指南一步步构建一个简单的桌面窗口应用。当前 Electron 最新稳定版本为 39.2.7（基于 Chromium 142.x）。
步骤 1：准备环境
- 安装 Node.js（推荐 22.x LTS 版）。
- 创建项目文件夹：
mkdir electron-hello-world
cd electron-hello-world
npm init -y步骤 2：安装 Electron
npm install electron@latest --save-dev（会安装 39.2.7 或最新补丁版）
步骤 3：配置 package.json
修改 package.json（添加 main 和 start 脚本）：
{
"name": "electron-hello-world",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^39.2.7"
}
}步骤 4：创建主进程文件 main.js
const { app, BrowserWindow } = require('electron');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: `${__dirname}/preload.js`, // 推荐使用 preload 增强安全性
contextIsolation: true, // 默认启用，推荐保持
nodeIntegration: false // 默认禁用，推荐保持
}
});
win.loadFile('index.html');
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});步骤 5：创建预加载脚本 preload.js（安全通信桥接）
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
getVersions: () => ipcRenderer.invoke('get-versions')
});步骤 6：修改 main.js 支持 IPC（获取版本信息，可选增强）
在 main.js 开头添加：
const { ipcMain } = require('electron');然后在 createWindow 前添加：
ipcMain.handle('get-versions', () => process.versions);步骤 7：创建渲染页面 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>我们正在使用：</p>
<ul>
<li>Node.js: <span id="node-version">-</span></li>
<li>Chromium: <span id="chrome-version">-</span></li>
<li>Electron: <span id="electron-version">-</span></li>
</ul>
<script>
window.electronAPI.getVersions().then(versions => {
document.getElementById('node-version').innerText = versions.node;
document.getElementById('chrome-version').innerText = versions.chrome;
document.getElementById('electron-version').innerText = versions.electron;
});
</script>
</body>
</html>步骤 8：运行应用
npm start成功运行后，你会看到类似下面的窗口：
架构提醒（可视化）
这个示例体现了 Electron 的主进程 + 渲染进程架构：
安全注意（2025 年推荐实践）
- 启用
contextIsolation: true和nodeIntegration: false。 - 使用
preload.js+contextBridge暴露有限 API，避免渲染进程直接访问 Node.js。
完成这个实例后，你就掌握了 Electron 的基本开发流程！接下来可以尝试添加菜单、托盘、打包等功能。有问题或想扩展（如集成 React/Vue），随时问我～
