Electron框架搭建桌面应用教程

Electron 让 JavaScript 开发者无需学习原生语言，就能用熟悉的 HTML、CSS 和 JavaScript 构建真正跨平台的桌面应用——它巧妙融合 Chromium 渲染 UI 与 Node.js 访问系统能力，通过主进程（管理窗口与系统 API）和渲染进程（专注界面交互）分工协作，并借助安全的 IPC 通信和 preload 脚本桥接两者；从初始化项目到运行只需几行代码，再配合 electron-builder 一键打包成 Windows、macOS 或 Linux 上开箱即用的独立可执行文件，极大降低了桌面端开发门槛。

JavaScript 本身不能直接构建桌面应用，但它可以通过 Electron 这样的框架，把 Web 技术（HTML、CSS、JS）打包成跨平台的原生桌面程序。Electron 的核心思路是：用 Chromium 渲染界面，用 Node.js 提供系统级能力，两者在同一个进程中协同工作。

Electron 的基本结构：主进程与渲染进程

Electron 应用由两个关键部分组成：

• 主进程（main process）：运行 package.json 中 main 字段指定的 JS 文件，负责创建窗口、管理应用生命周期、调用操作系统 API（如文件读写、托盘、通知等）；一个 Electron 应用只有一个主进程。
• 渲染进程（renderer process）：每个 BrowserWindow 实例对应一个独立的渲染进程，本质就是 Chromium 的网页环境，负责 UI 展示和用户交互；可以有多个，彼此隔离。

主进程和渲染进程通过 ipcMain 和 ipcRenderer 模块通信，不能直接共享变量或调用函数。

快速搭建一个 Electron 应用

从零开始只需几个步骤：

• 初始化项目：npm init -y
• 安装 Electron：npm install --save-dev electron
• 创建主进程文件（如 main.js），设置窗口逻辑：

const { app, BrowserWindow } = require('electron')
function createWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html') // 加载本地 HTML
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => app.quit())

• 编写 index.html 作为界面，像普通网页一样写 HTML/CSS/JS；
• 在 package.json 中添加启动脚本："main": "main.js"，并配置 "scripts": { "start": "electron ." }；
• 运行：npm start 即可看到窗口。

如何让网页调用系统功能？

渲染进程默认无法直接访问 Node.js 或系统 API（出于安全限制），需要通过主进程中转：

• 在主进程中监听 IPC 消息，执行 Node.js 操作（如读文件、打开对话框）；
• 在渲染进程中用 ipcRenderer.send() 发送请求，用 on() 接收响应；
• 例如：点击按钮打开“保存文件”对话框，需先在渲染进程发消息，主进程调用 dialog.showSaveDialog()，再把路径回传。

注意：不要在渲染进程中直接启用 nodeIntegration: true（已不推荐），更安全的方式是使用 contextIsolation: true + preload 脚本暴露受控接口。

打包发布为可执行文件

开发完成后，用打包工具生成安装包：

• 推荐使用 electron-builder（功能完整、文档清晰）；
• 安装：npm install --save-dev electron-builder；
• 在 package.json 中添加构建配置（如 target、icon、publish）；
• 运行 npx electron-builder，自动输出 Windows（.exe）、macOS（.dmg/.app）、Linux（.AppImage）等格式。

生成的产物是独立程序，用户无需安装 Node.js 或 Electron，双击即可运行。

今天关于《Electron框架搭建桌面应用教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！