Electron 快速入门教程-平芜编程栈

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

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

一、前置条件

安装 Node.js
确保你的电脑已安装 Node.js（推荐 LTS 版本），可以通过以下命令验证：
```
node-vnpm-v
```
下载地址：Node.js 官网
基础技术储备
熟悉 HTML、CSS、JavaScript 基础语法，了解 Node.js 基本使用（如require、模块）。

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

新建项目文件夹

mkdirmy-first-electron-appcdmy-first-electron-app

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

三、步骤 2：安装 Electron

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

npminstallelectron --save-dev

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

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

1. 配置 package.json

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

{"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 应用的入口。

// 引入 Electron 的核心模块const{app,BrowserWindow}=require('electron');constpath=require('path');// 定义创建窗口的函数functioncreateWindow(){// 创建一个浏览器窗口constmainWindow=newBrowserWindow({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 带来的安全风险。

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

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

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

<!DOCTYPEhtml><html><head><metacharset="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 版本：<spanid="version"></span></p><script>// 调用预加载脚本暴露的 APIdocument.getElementById('version').innerText=window.electronAPI.appVersion();</script></body></html>

五、步骤 4：运行应用

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

npmstart

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

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

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

安装 electron-forge

npminstall--save-dev @electron-forge/cli npx electron-forgeimport

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

七、核心概念梳理

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