electron是基于chromium和node.js的桌面应用开发框架，支持html、css、javascript技术栈，广泛用于vs code、slack等跨平台应用。
用 JavaScript 做跨平台桌面应用，Electron 是目前最成熟的选择。它让前端开发者能用熟悉的 HTML、CSS 和 JavaScript 技术栈构建 Windows、macOS 和 Linux 上的桌面程序。从 VS Code 到 Slack，不少知名应用都基于 Electron 开发。
Electron 是什么？
Electron 由 GitHub 开发并开源，核心原理是结合了 Chromium 渲染引擎和 Node.js 运行时。这意味着你可以同时访问浏览器 API 和系统底层功能（如文件操作、窗口管理）。每个 Electron 应用包含两个主要进程：
- 主进程：负责创建窗口、管理生命周期，拥有完整的 Node.js 环境。
- 渲染进程：每个窗口中的网页运行在独立的渲染进程中，可使用 DOM 操作，但默认受限于沙箱安全策略。
主进程和渲染进程通过 IPC（进程间通信）机制交换数据，这是开发中必须掌握的基础技能。
快速搭建一个 Electron 应用
开始前确保已安装 Node.js。然后初始化项目并安装 Electron：
立即学习“Java免费学习笔记（深入）”；
npm init -y npm install electron --save-dev
在项目根目录创建入口文件 main.js：
eSiteGroup站群管理系统是基于eFramework低代码开发平台构建，是一款高度灵活、可扩展的智能化站群管理解决方案，全面支持SQL Server、SQLite、MySQL、Oracle等主流数据库，适配企业级高并发、轻量级本地化、云端分布式等多种部署场景。通过可视化建模与模块化设计，系统可实现多站点的快速搭建、跨平台协同管理及数据智能分析，满足政府、企业、教育机构等组织对多站点统一管控的
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 页面：
<html>
<body>
<h1>Hello from Electron!</h1>
</body>
</html>
最后在 package.json 中添加启动命令：
"scripts": {
"start": "electron main.js"
}
运行 npm start，就能看到窗口弹出。
实战技巧与优化建议
实际开发中会遇到性能、安全和打包等问题，以下是一些关键点：
- 避免启用 nodeIntegration：默认关闭更安全。如需调用 Node API，可通过预加载脚本（preload）暴露有限接口。
- 使用 preload 脚本桥接能力：在 webPreferences 中配置 preload 文件，利用 contextBridge 向渲染进程安全注入方法。
- 合理使用 IPC：主进程处理文件读写、系统通知等敏感操作，渲染进程只负责界面交互。
- 控制资源占用：Electron 应用内存消耗较高，尽量减少页面复杂度，避免加载大型第三方库。
- 打包发布应用：推荐使用 electron-builder 或 electron-packager，支持多平台一键打包成安装包。
扩展方向
Electron 可结合 React、Vue 等框架提升开发效率。比如用 Vue CLI 插件快速集成 Electron，或使用 Vite 构建高性能桌面应用。也可以接入本地硬件（如串口设备）、调用系统托盘、实现自动更新等功能。
基本上就这些。Electron 降低了桌面开发门槛，虽然体积偏大，但在跨平台一致性、开发速度上有明显优势。只要注意安全和性能，完全可以用于生产级项目。
