使用 electron 可基于 javascript 构建跨平台桌面应用；2. 初始化项目后安装 electron 并创建主进程文件 main.js 管理窗口；3. 编写 index.html 作为用户界面；4. 配置启动脚本并通过 npm start 运行；5. 使用 electron-builder 打包为各平台可执行文件，完成应用分发。
构建一个基于 JavaScript 的跨平台桌面应用，Electron 是目前最主流的选择。它允许你使用 HTML、CSS 和 JavaScript 构建可在 Windows、macOS 和 Linux 上运行的桌面程序。下面是如何从零开始搭建一个简单的 Electron 应用。
初始化项目结构
创建一个新的文件夹并进入该目录：
mkdir my-electron-appcd my-electron-app
npm init -y
这会生成一个基础的 package.json 文件，用于管理依赖和脚本。
安装 Electron
在项目中安装 Electron：
立即学习“Java免费学习笔记（深入）”；
npm install electron --save-dev建议将 Electron 作为开发依赖安装，因为它只在开发和打包阶段需要。
创建主进程文件
Electron 应用有一个主进程（main process），负责管理窗口和系统事件。创建 main.js：
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()
})
这个文件定义了如何启动应用窗口，并加载本地 HTML 页面。
创建用户界面
在项目根目录创建 index.html：
欢迎使用 Electron 应用！
你可以像开发网页一样添加 CSS 和 JavaScript 来丰富界面。
配置启动脚本
修改 package.json 中的 scripts 字段：
"scripts": {"start": "electron main.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
现在可以通过命令启动应用：
npm start打包与分发
完成开发后，可以使用 electron-builder 或 electron-packager 打包为可执行文件。
例如，安装 electron-builder：
npm install --save-dev electron-builder然后在 package.json 中添加打包脚本：
"scripts": {"start": "electron main.js",
"pack": "electron-builder --dir",
"dist": "electron-builder"
}
运行 npm run dist 即可生成对应平台的安装包。
基本上就这些。通过以上步骤，你就能用 JavaScript 和 Electron 快速构建一个跨平台的桌面应用。关键是理解主进程与渲染进程的分工，并合理组织项目结构。随着功能扩展，还可以引入 React、Vue 等前端框架提升开发效率。
