概述

截止目前，最新稳定版 v26.1.0

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架，框架嵌入了 Chromium 和 Node.js。

官网地址：https://www.electronjs.org/ 可能经常会被 GFW 干扰
文档地址：https://www.electronjs.org/zh/docs/latest/
接口地址：https://www.electronjs.org/zh/docs/latest/api/app
相关词汇：https://www.electronjs.org/zh/docs/latest/glossary
Node.js Api：https://nodejs.cn/api/

1015-sHLerI

Chromium 负责页面 UI 渲染，Node.js 负责业务逻辑，Native API 则提供原生能力和跨平台。

与我们常规的 web 开发而言，主要不同点有：

区分主进程与渲染进程
进程间通信方式
有原生能力
无兼容问题
无跨域问题

Electron 技术体系

Node.js
- 原⽣ API：⽂件读写、操作系统、加解密
- Node.js 扩展：集成第三⽅ C++ 库等
Electron Native API
- 客户端 GUI：右键菜单、窗⼝定制、系统托盘、Dock..
- 桌⾯环境集成：系统通知、剪切板、系统快捷键、⽂件拖放
- 设备 API：电源监视、内存、CPU、屏幕
OS
- AppleScript(macOS)：系统原⽣应⽤调⽤
- Windows RT：USB、蓝牙、预览⽂件

1713-4Ij8VB

Electron 技术体系
- 基础知识
  - 主进程（创建原生 GUI、系统底层能力）
    - app 模块，它控制应用程序的事件生命周期
    - BrowserWindow 模块，它创建和管理应用程序窗口
      - Preload 脚本
    - contextBridge 上下文隔离，类似 App 中的 JSBridge/DSBridge。
    - ipcMain
    - Tray
    - Notification
    - Menu
    - Dock
    - dialog
    - clipboard
    - desktopCapture
    - screen
    - shell
    - ...
  - 渲染进程
    - remote
    - ipcRenderer
  - IPC 通信
- Node.js 底层能力
  - fs 进行文件读写
  - crypto 进行加解密
  - npm 上 Node.js 库扩展
  - N-API
  - node-ffi（dll）
  - WinRT（Windows Runtime）
  - AppleScript
  - 原生模块编译
  - ...
- 工程化
  - 工程框架（react 技术栈 or vue 技术栈）
  - 打包
  - 软件更新
  - 质量监控
    - 崩溃系统
      - 日志分析
    - 异常监控
      - 主进程异常
  - 自动化测试
  - 安全
  - 性能优化

快速尝试

Electron Fiddle 是由 Electron 开发并由其维护者支持的沙盒程序。我们强烈建议将其作为一个学习工具来安装，以便在开发过程中对 Electron 的 api 进行实验或对特性进行原型化。

Fiddle 已经完美的集成到我们的帮助文档之中。当你浏览我们 tutorial 中的例子的时候，你会发现有个"Open In Electron Fiddler" 按钮在代码示例中。如果你已经安装了 Fiddle, “Open In Electron Fiddle" 按钮回打开一个 fiddle.electronjs.org 链接并加载示例。

Electron Fiddle

Electron Fiddle 因为网络原因，需要走国内镜像（比如此处用的淘宝源）才能正常下载 Electron。可以设置全局环境的 ELECTRON_MIRROR 值，也可以直接命令行打开 Fiddle。

安装指导》自定义镜像和缓存

以下针对 Mac 平台：

# 设置全局的ELECTRON_MIRROR值
ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

# 命令行方式打开
env ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/" open /Applications/Electron\ Fiddle.app

PS：个人感觉只适合简单的体验和功能尝试

Electron 基础

Electron 应用程序有三大基础模块：

主进程
渲染进程
进程间通信

基于 electron 的机制，一般会对主进程进行一些封装，特别是窗口（如果涉及多窗口）和通信。

常用其他依赖

electron-is An 'is' utility for Electron
electron-builder electron 打包工具，版本升级
forge 官方主推工具
fs-extra nodejs api 的 Promise 化封装
electron-store 主进程和渲染层通用的 k-v 存储
electron-devtools-installer electron 插件安装工具
electron-updater 来自 electron-builder
electron-store 系统永久储存，默认位置在 ~/Library/Application Support/AppName/。package.json 中 productName 属性配置 AppName。

通用型依赖

pnpm 包管理工具，代替 npm 甚至 yarn
axios 请求库
dayjs 时间操作库，Moment.js 的 2kB 轻量化方案
前端添加水印

react 技术栈额外依赖

PS：公司现有项目是用 react

ahooks 一套高质量可靠的 React Hooks 库
antd react UI 库

Electron 技术体系​

快速尝试​

Electron 基础​

常用其他依赖​

通用型依赖​

react 技术栈额外依赖​

启动模板​