小识electron - 技术栈

一、Electron 本质解析

‌Electron ‌ 是一个基于 ‌Chromium + Node.js ‌ 的跨平台桌面应用开发框架，允许使用 HTML/CSS/JavaScript 构建 Windows/macOS/Linux 原生应用。其核心实现了 ‌Web 技术与操作系统 API 的无缝融合‌。

技术架构拆解

层级	功能	技术组成
‌GUI 层‌	界面渲染与交互	Chromium 内核
‌逻辑层‌	系统级操作（文件/网络/硬件等）	Node.js 运行时
‌桥接层‌	进程间通信（IPC）与原生 API 调用	Electron 核心模块

二、核心功能与使用场景

1. 典型能力矩阵

功能模块	实现方式	应用案例
‌窗口管理‌	`BrowserWindow` 类	多文档编辑器、分屏工具
‌系统托盘‌	`Tray` + `MenuItem`	后台音乐播放器、即时通讯软件
‌本地文件操作‌	`fs` 模块 + `dialog.showOpenDialog`	代码编辑器、数据备份工具
‌硬件控制‌	`serialport`/`usb` 等 npm 模块	IoT 设备监控、打印机管理

2. 适用场景

‌需要混合 Web 与原生体验的应用‌（如 VS Code、Figma）
‌快速原型开发‌（3 天内完成 MVP）
‌企业级工具‌（内部管理系统、数据可视化平台）

三、开发模式详解（含代码示例）

1. ‌基础工程结构

bash 复制代码

electron-app/  
├── main.js          # 主进程（Node.js 环境）  
├── preload.js       # 预加载脚本（安全隔离层）  
├── src/  
│   ├── index.html   # 渲染进程入口  
│   └── renderer.js  # 前端业务逻辑  
└── package.json

2. ‌主进程开发‌（main.js）

csharp 复制代码

const { app, BrowserWindow, ipcMain } = require('electron');  
const path = require('path');  

let mainWindow;  

function createWindow() {  
  mainWindow = new BrowserWindow({  
    width: 1200,  
    height: 800,  
    webPreferences: {  
      preload: path.join(__dirname, 'preload.js')  
    }  
  });  

  // 加载本地文件或远程 URL  
  mainWindow.loadFile('src/index.html');  

  // 接收渲染进程消息  
  ipcMain.on('request-file', (event, filePath) => {  
    const content = fs.readFileSync(filePath, 'utf-8');  
    event.sender.send('file-content', content);  
  });  
}  

app.whenReady().then(createWindow);

3. ‌预加载脚本‌（preload.js）

javascript 复制代码

const { contextBridge, ipcRenderer } = require('electron');  

// 安全暴露 API 给渲染进程  
contextBridge.exposeInMainWorld('electronAPI', {  
  openFile: () => ipcRenderer.invoke('dialog:openFile'),  
  onFileContent: (callback) => ipcRenderer.on('file-content', callback)  
});

4. ‌渲染进程‌（renderer.js）

dart 复制代码

document.getElementById('open-file').addEventListener('click', async () => {  
  const content = await window.electronAPI.openFile();  
  document.getElementById('editor').value = content;  
});

四、实战案例：Markdown 编辑器

功能实现步骤

‌双向数据绑定

javascript 复制代码

// 监听编辑器输入  
document.getElementById('editor').addEventListener('input', (e) => {  
  window.electronAPI.saveDraft(e.target.value);  
});

‌实时预览

javascript 复制代码

// 使用 marked.js 转换 Markdown  
import { marked } from 'marked';  
function updatePreview(md) {  
  document.getElementById('preview').innerHTML = marked.parse(md);  
}

‌PDF 导出

dart 复制代码

// 调用主进程打印功能  
window.electronAPI.exportPDF(() => {  
  window.print();  
});

五、Electron 的优劣对比

‌优势‌	‌劣势‌
开发成本低（复用 Web 技术栈）	内存占用高（每个窗口独立 Chromium 实例）
跨平台编译（一套代码三端运行）	安装包体积大（基础 80MB+）
可访问完整系统 API	需特别注意安全性问题（XSS 攻击风险）