首页 > 文章 > 前端

Electron开发：构建高效桌面应用

时间：2026-05-23 15:46:19 164浏览收藏

Electron 为前端开发者打开了一扇通往桌面应用开发的大门——只需熟悉的 HTML、CSS 和 JavaScript，就能构建出同时运行于 Windows、macOS 和 Linux 的高性能跨平台应用；它巧妙融合 Chromium 的渲染能力与 Node.js 的系统级访问权限，通过主进程与渲染进程的高效 IPC 通信实现功能解耦，并借助 electron-builder 一键打包成原生安装包。无论是轻量工具、内部管理平台还是需要统一体验的跨端产品，Electron 都以极低的学习成本和成熟的生态支撑，让“写一次，随处部署”的桌面开发愿景真正落地。

JavaScript桌面应用Electron开发

Electron 让你用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用，支持 Windows、macOS 和 Linux。它结合了 Chromium 渲染界面和 Node.js 提供系统底层能力，适合前端开发者快速上手桌面开发。

搭建基础项目结构

创建一个新文件夹，初始化 npm 项目：

npm init -y npm install electron --save-dev

在项目根目录创建 main.js，这是 Electron 的主进程入口：

const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { 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() })

再创建一个简单的 index.html 页面作为界面：

Hello Electron

欢迎使用 Electron

这是你的第一个桌面应用。

在 package.json 中添加启动命令：

"scripts": { "start": "electron main.js" }

主进程与渲染进程通信

Electron 分为主进程（控制窗口、菜单等）和渲染进程（页面逻辑）。它们通过 ipcMain 和 ipcRenderer 通信。

例如，在渲染进程中发送消息：

const { ipcRenderer } = require('electron') ipcRenderer.send('request-data', '获取数据')

在主进程中监听并响应：

const { ipcMain } = require('electron') ipcMain.on('request-data', (event, arg) => { event.reply('response-data', '这是返回的数据') })

渲染进程监听回复：

ipcRenderer.on('response-data', (event, data) => { console.log(data) })

打包成可执行文件

开发完成后，使用 electron-builder 或 electron-packager 打包应用。

安装 electron-builder：

npm install electron-builder --save-dev

在 package.json 添加构建配置：

"build": { "productName": "MyApp", "appId": "com.example.myapp", "win": { "target": "nsis" }, "mac": { "target": "dmg" }, "linux": { "target": "AppImage" } }, "scripts": { "dist": "electron-builder" }

运行打包命令：

npm run dist

输出目录会生成对应平台的安装包或可执行文件。