Electron简介 #

Electron = Chromium + Node.js + Native APIs

┌─────────────────────────────────────────────────────┐
│                    Electron 应用                     │
├─────────────────────────────────────────────────────┤
│                                                     │
│  ┌─────────────┐              ┌─────────────┐      │
│  │   主进程     │    IPC      │  渲染进程    │      │
│  │  (Main)     │◄────────────►│ (Renderer)  │      │
│  │             │   通信       │             │      │
│  │  Node.js    │              │  Chromium   │      │
│  │  环境       │              │  环境       │      │
│  └─────────────┘              └─────────────┘      │
│        │                             │             │
│        ▼                             ▼             │
│  ┌─────────────┐              ┌─────────────┐      │
│  │  原生 API   │              │   Web 页面   │      │
│  │  文件系统   │              │   HTML/CSS   │      │
│  │  系统集成   │              │   JavaScript │      │
│  └─────────────┘              └─────────────┘      │
│                                                     │
└─────────────────────────────────────────────────────┘

// 渲染进程发送消息
ipcRenderer.send('channel-name', data);

// 主进程接收消息
ipcMain.on('channel-name', (event, data) => {
    console.log(data);
});

主版本.次版本.补丁版本
例如：28.0.0

代码编辑器、IDE、终端工具、设计工具

笔记应用、待办事项、时间管理、剪贴板管理

即时通讯、邮件客户端、团队协作

音乐播放器、视频播放器、图片编辑器

// 使用熟悉的 Web 技术快速开发
const { app, BrowserWindow } = require('electron');

function createWindow() {
    const win = new BrowserWindow({ width: 800, height: 600 });
    win.loadFile('index.html');
}

app.whenReady().then(createWindow);

一套代码，三端运行
- Windows
- macOS
- Linux

- npm 海量包支持
- 活跃的社区
- 完善的文档
- 大量开源项目参考

// 访问文件系统
const fs = require('fs');
fs.readFileSync('/path/to/file');

// 系统对话框
dialog.showOpenDialog({ properties: ['openFile'] });

// 系统通知
new Notification({ title: 'Hello', body: 'World' }).show();

Electron 应用技术栈
├── 前端技术
│   ├── HTML5        页面结构
│   ├── CSS3         样式设计
│   └── JavaScript   交互逻辑
├── Node.js
│   ├── 文件系统      fs 模块
│   ├── 网络请求      http/https
│   ├── 子进程        child_process
│   └── 原生模块      C++ Addons
└── Electron API
    ├── app          应用生命周期
    ├── BrowserWindow 窗口管理
    ├── ipcMain/ipcRenderer 进程通信
    ├── Menu         菜单系统
    ├── Tray         系统托盘
    └── dialog       对话框

基础阶段
├── JavaScript 基础
├── Node.js 基础
├── HTML/CSS 基础
└── Electron 基础 API

进阶阶段
├── 进程间通信
├── 原生 API 使用
├── 界面开发
└── 数据存储

高级阶段
├── 性能优化
├── 安全加固
├── 原生模块开发
└── 打包与发布