Electron通过结合Chromium和Node.js使前端开发者能用HTML、CSS、JavaScript构建跨平台桌面应用，其核心由主进程（管理窗口与系统功能）和渲染进程（展示UI）组成，两者通过预加载脚本与IPC安全通信，使用electron-builder可打包为各平台可执行文件，关键在于理清进程分工与通信机制。
Electron 让前端开发者可以用熟悉的 HTML、CSS 和 JavaScript 构建跨平台的桌面应用，支持 Windows、macOS 和 Linux。它结合了 Chromium 渲染引擎和 Node.js 运行环境，让你既能写网页，又能访问系统底层功能。
Electron 核心架构
Electron 应用由两个主要进程组成：
- 主进程（Main Process）：负责创建窗口、管理应用生命周期和调用系统原生功能（如菜单、托盘图标）。每个应用只有一个主进程。
- 渲染进程（Renderer Process）：每个窗口都是一个独立的渲染进程，运行在 Chromium 中，负责 UI 展示。可以有多个渲染进程，彼此隔离。
主进程使用 BrowserWindow 创建窗口，每个窗口加载一个 HTML 页面，就像打开一个网页一样，但这个页面能通过预加载脚本与 Node.js 通信。
快速搭建开发环境
初始化项目并安装 Electron：
立即学习“Java免费学习笔记（深入）”；
npm init -y npm install electron --save-dev
在 package.json 中添加启动命令：
"scripts": {
"start": "electron main.js"
}
创建 main.js 作为入口文件：
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: __dirname + '/preload.js'
}
})
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()
})
安全与进程通信
直接在渲染进程中启用 Node.js 有安全风险。推荐做法是通过预加载脚本暴露有限接口：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
创建 preload.js：
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
send: (channel, data) => ipcRenderer.send(channel, data),
on: (channel, func) => ipcRenderer.on(channel, (event, ...args) => func(...args))
})
在渲染进程中发送消息：
window.electronAPI.send('msg-from-renderer', 'Hello Main')
在主进程中监听：
ipcMain.on('msg-from-renderer', (event, data) => {
console.log(data)
})
打包与发布
使用 electron-builder 打包应用：
npm install --save-dev electron-builder
配置 package.json：
"build": {
"productName": "MyApp",
"appId": "com.example.myapp",
"win": { "target": "nsis" },
"mac": { "target": "dmg" },
"linux": { "target": "AppImage" }
}
添加打包命令：
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder"
}
运行 npm run dist 即可生成对应平台的可执行文件。
基本上就这些。Electron 降低了桌面开发门槛，只要会写网页就能做出跨平台应用，关键是理清主进程和渲染进程的分工，合理设计通信机制，注意安全设置。不复杂但容易忽略细节。
