JavaScript 本身不能直接构建桌面应用，但可通过 Electron 框架将 Web 技术打包为跨平台原生程序；其核心是 Chromium 渲染界面、Node.js 提供系统能力，分主进程（管理窗口与生命周期）和渲染进程（展示 UI），通过 IPC 通信；需 preload 脚本安全调用系统 API；可用 electron-builder 打包为独立可执行文件。
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 应用
从零开始只需几个步骤：
立即学习“Java免费学习笔记（深入）”；
- 初始化项目：
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，双击即可运行。
