JavaScript桌面应用Electron开发

狼影

发布： 2025-11-01 21:37:36

原创

390人浏览过

Electron使用HTML、CSS、JavaScript构建跨平台桌面应用，结合Chromium与Node.js，支持主渲染进程通信，通过electron-builder打包，适合前端开发者快速开发工具类应用。

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 页面作为界面：

立即学习“Java免费学习笔记（深入）”；

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', '这是返回的数据') })

渲染进程监听回复：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

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

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