小识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 攻击风险)
相关推荐
zwjapple6 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
AA-代码批发V哥8 小时前
HTML之语义化标签与多媒体标签
html
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem8 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术9 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing9 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止9 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall9 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴9 小时前
简单入门Python装饰器
前端·python