Electron 功能示例指南总览Examples Overview用最小化示例与 Fiddle 一键跑通常用功能实战【免费下载链接】electron:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS项目地址: https://gitcode.com/GitHub_Trending/el/electron导读Electron 的「功能示例」Examples是一套围绕真实常用需求收集的实战指南集合位于仓库docs/tutorial/与docs/fiddles/每一篇指南都附带一个最小化、可独立运行的示例应用把「MessagePorts 进程通信」「蓝牙/USB/HID 设备访问」「键盘快捷键」「Web Worker 多线程」「离屏渲染」「拼写检查」「嵌入第三方网页」等高频场景做成可直接复制、运行甚至一键在 Electron Fiddle 中打开的代码。读完本文你将掌握这套示例体系的使用方式、七大专题的核心实现要点以及如何在仓库中按图索骥找到可运行的 fiddle 源码作为你自己的应用骨架。这套示例体系是什么仓库中的 Examples Overview 是这一整套示例指南的入口与索引。它的核心主张非常朴素与其在文档里贴一段脱离上下文的代码片段不如为每个常见功能提供一个最小、自包含、可运行的示例应用a minimal, self-contained example app让开发者直接看到完整上下文并立即运行。这套体系由三部分组成专题指南分布在 docs/tutorial 下的若干篇 Markdown每篇讲透一个功能主题可运行 fiddle分布在 docs/fiddles 下的示例应用目录名与指南一一对应每个目录都包含main.js主进程、index.html、preload.js、renderer.js等常规 Electron 应用文件索引总览页examples.md 本身用一张表格把七大专题指南串起来方便快速定位。如果你实现了某个常见功能但文档里还没有对应的指南官方还建议直接在 API 文档 中查找该能力是否已有记载并可以向官方提出 issue 补充指南——可见这套体系的定位就是对 API 文档的实战补充。用 Fiddle 一键运行示例示例代码块以fiddle语言类型出现在文档中例如总览页开头就展示了 docs/fiddles/quick-start 这个最简示例fiddle docs/fiddles/quick-start 其中docs/fiddles/quick-start指向的就是仓库中一个真实目录。打开该目录可以看到一个教科书式的最小 Electron 应用main.js创建BrowserWindow、加载页面并按 macOS 惯例处理activate应用激活时若无窗口则重建窗口与window-all-closed非 darwin 平台全部窗口关闭即退出index.html展示应用正在使用哪个版本的 Node.js、Chromium 与 Electronpreload.js作为渲染进程与主进程之间的安全桥接。运行这类示例最省事的方式是安装Electron FiddleFiddle 会为这些代码块渲染「Open in Fiddle」按钮点击后即可把示例载入 Fiddle 直接运行。Fiddle 本质上是一个「即写即跑」的 Electron 沙盒非常适合逐行调试这些最小示例。如果你的需求用不到整个 fiddle也可以直接把示例目录下的文件复制到自己的工程中作为起点。值得注意的是这种fiddle代码块在整个文档集中被广泛使用例如设备访问指南中fiddle docs/fiddles/features/web-bluetooth、离屏渲染指南中fiddle docs/fiddles/features/offscreen-rendering、键盘快捷键指南中fiddle docs/fiddles/features/keyboard-shortcuts/web-apis|focusrenderer.jsfocus参数表示把阅读焦点定位到某个具体文件。在仓库里阅读原始 Markdown 时这些fiddle路径都是可以直接跳转的真实目录。七大专题指南速览总览页用一张表格索引了当前收集的七篇常见功能指南指南核心主题Message ports如何在应用内使用 MessagePorts 实现不同进程间的通信Device access如何访问设备硬件蓝牙、USB、HID、串口Keyboard shortcuts为 Electron 应用配置本地与全局键盘快捷键Multithreading借助 Web Workers 在操作系统级线程中运行 JavaScriptOffscreen rendering将 BrowserWindow 内容以位图形式取出渲染到任意地方Spellchecker使用内置拼写检查、设置语言等Web embeds在应用内嵌入第三方 Web 内容的多种方式下面逐一展开各指南的核心技术要点并结合仓库源码说明其实际用法。一、MessagePorts跨进程消息通道Message ports 指南 讲述的是一种 Web 标准的通信方式MessagePort像window.postMessage一样可以在不同上下文之间传递消息但它是建立在独立通道Channel之上的。它的核心模型是new MessageChannel()会成对产生port1与port2往一端发送的消息会从另一端收到且允许在对方注册监听器之前就发送消息消息会排队等待。Electron 对这套模型的扩展点是主进程渲染进程里的MessagePort行为与浏览器完全一致但主进程并非网页、没有 Blink 集成因此 Electron 新增了 MessagePortMain 与MessageChannelMain两个类来承载同样的语义。端口在不同进程间转移只能通过ipcRenderer.postMessage与 WebContents.postMessage 完成——常规的send、invoke无法携带 MessagePort。由此可以做一件浏览器里很棘手的事经由主进程中转把两个本来无法通信例如受同源策略限制的页面连接起来。指南中给出了将渲染进程端口转交主进程的最小示例// renderer.js渲染进程 const channel new MessageChannel() const port1 channel.port1 const port2 channel.port2 port2.postMessage({ answer: 42 }) // 把 channel 的另一端交给主进程 ipcRenderer.postMessage(port, null, [port1])// main.js主进程 ipcMain.on(port, (event) { const port event.ports[0] port.on(message, (event) { const data event.data // { answer: 42 } }) port.start() // MessagePortMain 需要显式 start() 才开始派发消息 })除此之外 Electron 还给 MessagePort 增加了一个 Web 标准没有的能力close事件当通道另一端关闭时触发端口也可能因被垃圾回收而隐式关闭。渲染进程中可赋port.onclose或addEventListener(close, ...)主进程中用port.on(close, ...)监听。指南后半部分还演示了四个实战用例两个 renderer 之间建立通道、Worker 进程、回复流、以及主进程与 context-isolation 页面 main world 之间的直连通信适合深入学习端口编排模式。二、Device access硬件设备访问Device access 指南 说明 Electron 与浏览器一样通过 Web API 访问硬件但权限交互模型不同浏览器会弹出系统级授权弹窗让用户选择具体设备而 Electron 提供 API 让开发者自动选中设备或通过开发者自建界面引导用户选择。仓库中docs/fiddles/features/目录下与之对应的一组示例web-bluetooth、web-hid、web-serial、web-usb。以蓝牙为例使用 Web Bluetooth API 时开发者需要处理 webContents 上的select-bluetooth-device事件Windows/Linux 下当配对需要 PIN 等额外校验时还可调用 session.setBluetoothPairingHandler 接管配对流程。仓库中的真实示例 web-bluetooth/main.js 演示了完整链路在主进程中监听select-bluetooth-device从deviceList里按deviceName test自动找出目标设备并直接回调其deviceId找不到时则等待用户通过cancel-bluetooth-request取消请求同时用setBluetoothPairingHandler把配对请求转发到渲染进程弹窗确认。对于 HIDElectron 则提供 Session 级别的select-hid-device事件配合hid-device-added/hid-device-removed处理设备的动态插拔以及select-serial-port、select-usb-device等对应机制。这类「设备授权事件」都属于 Electron「把权限 UI 留给开发者」这一设计哲学的体现是编写设备类桌面应用时绕不开的主进程逻辑。三、Keyboard shortcuts本地与全局快捷键Keyboard shortcuts 指南 把快捷键体系拆成几个层次。首先是Accelerator 字符串语法多个修饰键加一个按键码用连接且大小写不敏感。可用修饰键包括CommandCmd、ControlCtrl、CommandOrControlCmdOrCtrl、Alt、Option、AltGr、Shift、Super别名Meta。可用按键码包括数字0-9、字母A-Z、功能键F1-F24、各类标点!、、#、、等、Space、Tab、Capslock、方向键、Home/End、PageUp/PageDown、EscapeEsc、媒体键VolumeUp/MediaPlayPause等以及完整的小键盘键num0-num9、numdec、numadd等。跨平台差异是配置快捷键时的关键陷阱官方给出的映射关系如下修饰键macOSWindows / LinuxCommandOrControlCommand⌘ControlCommandCommand⌘无效果ControlControl^ControlAltOption⌥AltOptionOption⌥无效果SuperMetaCommand⌘Windows⊞由此得出两条实用经验Windows/Linux 上Command无效应优先用CommandOrControlmacOS 映射 ⌘其余平台映射 Ctrl跨平台应统一使用Alt而非Option。本地快捷键只在应用聚焦时生效实现方式是给应用主菜单中的MenuItem配置accelerator属性并关联click处理器菜单项即使被隐藏加速键通常仍可工作macOS 可用acceleratorWorksWhenHidden: false关闭该行为。全局快捷键则通过globalShortcut.register(CommandOrControlAltR, callback)注册即使应用失焦也能触发并可调用globalShortcut.unregister(...)注销仓库的 docs/api/global-shortcut.md 有完整 API 记载。此外还可以走渲染进程 DOM 的keyup/keydown事件或利用before-input-event在主进程派发keydown/keyup之前拦截按键——文档里演示了用该方法捕获并preventDefault()掉CtrlI的例子。仓库中 keyboard-shortcuts/web-apis 目录下的 fiddle 演示了纯 Web API 的做法另一个interception-from-main目录则演示主进程拦截。四、MultithreadingWeb Worker 多线程Multithreading 指南 聚焦于让 Electron 也能享受 OS 级线程的能力通过Web Workers运行 JavaScript。关键开关是webPreferences中的nodeIntegrationInWorkerconst win new BrowserWindow({ webPreferences: { nodeIntegrationInWorker: true } })启用后Worker 里就能使用 Node.js 的全部内置模块且依然可以读取asar归档。但要注意限制条件该选项可以独立于nodeIntegration开启不过sandbox不能设为true并且此选项对 SharedWorker 与 Service Worker 不可用与沙箱策略不兼容。一个重要的边界是Node 的全局能力被允许进入 Worker但Electron 自身的任何内置模块都不能在多线程环境使用。对于原生 Node 模块指南措辞强烈建议不要直接在 Web Worker 中加载——绝大多数原生模块都按单线程假设编写在 Worker 中使用会导致崩溃与内存破坏即便模块本身线程安全由于process.dlopen并非线程安全依然不安全。目前唯一稳妥的做法是确保 Web Worker 启动后应用不再加载任何原生模块。五、Offscreen rendering离屏渲染Offscreen rendering 指南 介绍如何把BrowserWindow的内容以位图或共享 GPU 纹理的形式取出来从而渲染到任意目标例如 3D 场景中的贴图。Electron 的实现思路与 Chromium Embedded FrameworkCEF类似且有这些行为特征只把脏区域dirty area传给paint事件以提高效率可以随时停止/继续渲染并设置帧率页面无变化时不产生新帧离屏窗口始终以无边框窗口创建。渲染模式分为两类GPU 加速模式由 GPU 参与合成支持 WebGL 与 3D CSS 动画。依据webPreferences.offscreen.useSharedTexture再细分两种取帧方式useSharedTexture: true共享 GPU 纹理帧被直接拷贝进 GPU 纹理没有 CPU-GPU 内存拷贝开销因此速度非常快但属于高级特性需要配合你自己的原生模块使用可将共享纹理直接导入自有渲染管线useSharedTexture: false默认CPU 共享内存位图通过NativeImageAPI 取到帧帧需要从 GPU 拷回 CPU开销更大、速度更慢但仍支持 GPU 相关功能。软件输出设备模式用纯 CPU 软件输出设备渲染帧生成比共享内存位图模式更快代价是需要通过app.disableHardwareAcceleration()关闭 GPU 加速即不支持 WebGL/GPU 能力。指南中的 fiddle 示例位于 offscreen-rendering/main.js可配合 browser-window.md 中的paint事件、setContentProtection等 API 一并实践。六、Spellchecker内置拼写检查Spellchecker 指南 介绍从 Electron 8 起内置的 Chromium 拼写检查能力Windows/Linux 上由Hunspell 词典驱动macOS 上使用系统原生拼写检查 API。启用Electron 9 及以上默认启用若使用 Electron 8需在webPreferences中显式设置spellcheck: true。设置语言macOS 走原生 API、无法手动指定系统会自动检测语言Windows/Linux 则通过会话级 API 控制语言例如session.setSpellCheckerLanguages([en-US, fr])同时启用美式英语与法语session.availableSpellCheckerLanguages可列出全部可用语言码。默认情况下启用与当前 OS 语言环境匹配的语言。接入右键菜单webContents的context-menu事件参数中携带了构建菜单所需的全部信息仓库 docs/api/web-contents.md 有详细字段说明。示例做法是遍历params.dictionarySuggestions把每条建议渲染为MenuItem点击时调用webContents.replaceMisspelling(suggestion)若params.misspelledWord存在再追加一个「Add to dictionary」菜单项点击后调用session.addWordToSpellCheckerDictionary(word)加入用户词典。此外该文档还明确澄清拼写检查不会使用任何 Google 服务——Windows/Linux 由 Electron 维护的 Hunspell 词典数据提供服务这在该仓库的补丁与构建文件如filenames.hunspell.gni、patches 中针对 spellchecker 的下载 URL 覆盖支持中也有佐证。七、Web embeds嵌入第三方网页Web embeds 指南 对比了在 Electron 中嵌入第三方 Web 内容的三种方式iframe标准 Web 方式受同源策略与常规浏览器行为约束最简单但能力受限webview标签Electron 专用标签把子页面隔离在自己的进程中适合嵌入不可信或异构内容但要留意其安全边界与相关事件/方法体系仓库中 docs/api/webview-tag.md 以及lib/browser/guest-window-manager.ts、lib/renderer/web-view/下的实现文件都围绕它展开WebContentsView更现代的 View 体系直接把另一个WebContents作为原生层视图嵌入具有更强的布局与生命周期控制力相关 API 记载于 docs/api/web-contents-view.md 与 docs/api/view.md。选型时要综合考虑安全性webview 的进程隔离 vs iframe 的同源限制、渲染层级与交互成本。该指南对于处理 OAuth 登录、内嵌地图、帮助中心等场景具有很强的参考价值。仓库内的 fiddle 应用组织结构要在仓库里快速找到某个示例可以遵循这样的规律指南正文中的fiddle代码块路径就是 docs/fiddles 下的真实目录。整体目录按主题分类组织features/功能主题示例包括dark-mode、drag-and-drop、keyboard-shortcuts、navigation-history、notifications、offscreen-rendering、online-detection、progress-bar、recent-documents、represented-file、web-bluetooth、web-hid、web-serial、web-usb以及window-customization含自定义标题栏、自定义窗口样式等细分ipc/主进程-渲染进程通信的几种模式pattern-1/pattern-2/pattern-3与 webview 新窗口处理media/、menus/、native-ui/、screen/、system/分别覆盖截图、上下文菜单/托盘菜单/Dock 菜单、对话框与通知等原生 UI、屏幕适配、剪贴板/系统信息/协议处理等系统能力quick-start/、tutorial-first-app/、tutorial-preload/配合入门教程使用的逐步示例windows/窗口管理无边框窗口、状态管理、新窗口、窗口事件。每个 fiddle 目录的文件命名也高度一致main.js负责创建窗口与主进程逻辑index.html提供页面结构preload.js在启用了 context isolation 的场景下通过contextBridge暴露受限 APIrenderer.js承载页面交互逻辑。因此把任意一个 fiddle 目录复制到新工程、替换main.js中的业务逻辑就能快速得到一条可运行的开发基线。当示例不够用时怎么办总览页的最后一部分是How to...?完整清单在侧边栏即 docs/tutorial 目录中维护。当你需要实现的能力在侧边栏中找不到对应指南时有两个可行路径到仓库的 API 文档例如 app.md、browser-window.md、web-contents.md里查找对应模块的完整说明——总览页明确指出很多功能其实在 API 文档中已有记载向官方提出 issue 请求补充该主题的指南让示例体系随着开发者需求持续生长。对普通开发者而言这套「示例总览 → 专题指南 → 可运行 fiddle」的三层结构本身就是很好的学习路径先从 总览页 找到主题再精读对应的专题指南理解原理与参数最后把 fiddle 跑起来观察真实行为必要时再结合 docs/api 目录下的 API 参考查阅全部选项与边界条件。相比零散的网络教程这套仓库内自洽的示例体系能让你始终基于当前版本的真实行为进行学习与验证。【免费下载链接】electron:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS项目地址: https://gitcode.com/GitHub_Trending/el/electron创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Electron 功能示例指南总览Examples Overview用最小化示例与 Fiddle 一键跑通常用功能实战【免费下载链接】electron:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS项目地址: https://gitcode.com/GitHub_Trending/el/electron导读Electron 的「功能示例」Examples是一套围绕真实常用需求收集的实战指南集合位于仓库docs/tutorial/与docs/fiddles/每一篇指南都附带一个最小化、可独立运行的示例应用把「MessagePorts 进程通信」「蓝牙/USB/HID 设备访问」「键盘快捷键」「Web Worker 多线程」「离屏渲染」「拼写检查」「嵌入第三方网页」等高频场景做成可直接复制、运行甚至一键在 Electron Fiddle 中打开的代码。读完本文你将掌握这套示例体系的使用方式、七大专题的核心实现要点以及如何在仓库中按图索骥找到可运行的 fiddle 源码作为你自己的应用骨架。这套示例体系是什么仓库中的 Examples Overview 是这一整套示例指南的入口与索引。它的核心主张非常朴素与其在文档里贴一段脱离上下文的代码片段不如为每个常见功能提供一个最小、自包含、可运行的示例应用a minimal, self-contained example app让开发者直接看到完整上下文并立即运行。这套体系由三部分组成专题指南分布在 docs/tutorial 下的若干篇 Markdown每篇讲透一个功能主题可运行 fiddle分布在 docs/fiddles 下的示例应用目录名与指南一一对应每个目录都包含main.js主进程、index.html、preload.js、renderer.js等常规 Electron 应用文件索引总览页examples.md 本身用一张表格把七大专题指南串起来方便快速定位。如果你实现了某个常见功能但文档里还没有对应的指南官方还建议直接在 API 文档 中查找该能力是否已有记载并可以向官方提出 issue 补充指南——可见这套体系的定位就是对 API 文档的实战补充。用 Fiddle 一键运行示例示例代码块以fiddle语言类型出现在文档中例如总览页开头就展示了 docs/fiddles/quick-start 这个最简示例fiddle docs/fiddles/quick-start 其中docs/fiddles/quick-start指向的就是仓库中一个真实目录。打开该目录可以看到一个教科书式的最小 Electron 应用main.js创建BrowserWindow、加载页面并按 macOS 惯例处理activate应用激活时若无窗口则重建窗口与window-all-closed非 darwin 平台全部窗口关闭即退出index.html展示应用正在使用哪个版本的 Node.js、Chromium 与 Electronpreload.js作为渲染进程与主进程之间的安全桥接。运行这类示例最省事的方式是安装Electron FiddleFiddle 会为这些代码块渲染「Open in Fiddle」按钮点击后即可把示例载入 Fiddle 直接运行。Fiddle 本质上是一个「即写即跑」的 Electron 沙盒非常适合逐行调试这些最小示例。如果你的需求用不到整个 fiddle也可以直接把示例目录下的文件复制到自己的工程中作为起点。值得注意的是这种fiddle代码块在整个文档集中被广泛使用例如设备访问指南中fiddle docs/fiddles/features/web-bluetooth、离屏渲染指南中fiddle docs/fiddles/features/offscreen-rendering、键盘快捷键指南中fiddle docs/fiddles/features/keyboard-shortcuts/web-apis|focusrenderer.jsfocus参数表示把阅读焦点定位到某个具体文件。在仓库里阅读原始 Markdown 时这些fiddle路径都是可以直接跳转的真实目录。七大专题指南速览总览页用一张表格索引了当前收集的七篇常见功能指南指南核心主题Message ports如何在应用内使用 MessagePorts 实现不同进程间的通信Device access如何访问设备硬件蓝牙、USB、HID、串口Keyboard shortcuts为 Electron 应用配置本地与全局键盘快捷键Multithreading借助 Web Workers 在操作系统级线程中运行 JavaScriptOffscreen rendering将 BrowserWindow 内容以位图形式取出渲染到任意地方Spellchecker使用内置拼写检查、设置语言等Web embeds在应用内嵌入第三方 Web 内容的多种方式下面逐一展开各指南的核心技术要点并结合仓库源码说明其实际用法。一、MessagePorts跨进程消息通道Message ports 指南 讲述的是一种 Web 标准的通信方式MessagePort像window.postMessage一样可以在不同上下文之间传递消息但它是建立在独立通道Channel之上的。它的核心模型是new MessageChannel()会成对产生port1与port2往一端发送的消息会从另一端收到且允许在对方注册监听器之前就发送消息消息会排队等待。Electron 对这套模型的扩展点是主进程渲染进程里的MessagePort行为与浏览器完全一致但主进程并非网页、没有 Blink 集成因此 Electron 新增了 MessagePortMain 与MessageChannelMain两个类来承载同样的语义。端口在不同进程间转移只能通过ipcRenderer.postMessage与 WebContents.postMessage 完成——常规的send、invoke无法携带 MessagePort。由此可以做一件浏览器里很棘手的事经由主进程中转把两个本来无法通信例如受同源策略限制的页面连接起来。指南中给出了将渲染进程端口转交主进程的最小示例// renderer.js渲染进程 const channel new MessageChannel() const port1 channel.port1 const port2 channel.port2 port2.postMessage({ answer: 42 }) // 把 channel 的另一端交给主进程 ipcRenderer.postMessage(port, null, [port1])// main.js主进程 ipcMain.on(port, (event) { const port event.ports[0] port.on(message, (event) { const data event.data // { answer: 42 } }) port.start() // MessagePortMain 需要显式 start() 才开始派发消息 })除此之外 Electron 还给 MessagePort 增加了一个 Web 标准没有的能力close事件当通道另一端关闭时触发端口也可能因被垃圾回收而隐式关闭。渲染进程中可赋port.onclose或addEventListener(close, ...)主进程中用port.on(close, ...)监听。指南后半部分还演示了四个实战用例两个 renderer 之间建立通道、Worker 进程、回复流、以及主进程与 context-isolation 页面 main world 之间的直连通信适合深入学习端口编排模式。二、Device access硬件设备访问Device access 指南 说明 Electron 与浏览器一样通过 Web API 访问硬件但权限交互模型不同浏览器会弹出系统级授权弹窗让用户选择具体设备而 Electron 提供 API 让开发者自动选中设备或通过开发者自建界面引导用户选择。仓库中docs/fiddles/features/目录下与之对应的一组示例web-bluetooth、web-hid、web-serial、web-usb。以蓝牙为例使用 Web Bluetooth API 时开发者需要处理 webContents 上的select-bluetooth-device事件Windows/Linux 下当配对需要 PIN 等额外校验时还可调用 session.setBluetoothPairingHandler 接管配对流程。仓库中的真实示例 web-bluetooth/main.js 演示了完整链路在主进程中监听select-bluetooth-device从deviceList里按deviceName test自动找出目标设备并直接回调其deviceId找不到时则等待用户通过cancel-bluetooth-request取消请求同时用setBluetoothPairingHandler把配对请求转发到渲染进程弹窗确认。对于 HIDElectron 则提供 Session 级别的select-hid-device事件配合hid-device-added/hid-device-removed处理设备的动态插拔以及select-serial-port、select-usb-device等对应机制。这类「设备授权事件」都属于 Electron「把权限 UI 留给开发者」这一设计哲学的体现是编写设备类桌面应用时绕不开的主进程逻辑。三、Keyboard shortcuts本地与全局快捷键Keyboard shortcuts 指南 把快捷键体系拆成几个层次。首先是Accelerator 字符串语法多个修饰键加一个按键码用连接且大小写不敏感。可用修饰键包括CommandCmd、ControlCtrl、CommandOrControlCmdOrCtrl、Alt、Option、AltGr、Shift、Super别名Meta。可用按键码包括数字0-9、字母A-Z、功能键F1-F24、各类标点!、、#、、等、Space、Tab、Capslock、方向键、Home/End、PageUp/PageDown、EscapeEsc、媒体键VolumeUp/MediaPlayPause等以及完整的小键盘键num0-num9、numdec、numadd等。跨平台差异是配置快捷键时的关键陷阱官方给出的映射关系如下修饰键macOSWindows / LinuxCommandOrControlCommand⌘ControlCommandCommand⌘无效果ControlControl^ControlAltOption⌥AltOptionOption⌥无效果SuperMetaCommand⌘Windows⊞由此得出两条实用经验Windows/Linux 上Command无效应优先用CommandOrControlmacOS 映射 ⌘其余平台映射 Ctrl跨平台应统一使用Alt而非Option。本地快捷键只在应用聚焦时生效实现方式是给应用主菜单中的MenuItem配置accelerator属性并关联click处理器菜单项即使被隐藏加速键通常仍可工作macOS 可用acceleratorWorksWhenHidden: false关闭该行为。全局快捷键则通过globalShortcut.register(CommandOrControlAltR, callback)注册即使应用失焦也能触发并可调用globalShortcut.unregister(...)注销仓库的 docs/api/global-shortcut.md 有完整 API 记载。此外还可以走渲染进程 DOM 的keyup/keydown事件或利用before-input-event在主进程派发keydown/keyup之前拦截按键——文档里演示了用该方法捕获并preventDefault()掉CtrlI的例子。仓库中 keyboard-shortcuts/web-apis 目录下的 fiddle 演示了纯 Web API 的做法另一个interception-from-main目录则演示主进程拦截。四、MultithreadingWeb Worker 多线程Multithreading 指南 聚焦于让 Electron 也能享受 OS 级线程的能力通过Web Workers运行 JavaScript。关键开关是webPreferences中的nodeIntegrationInWorkerconst win new BrowserWindow({ webPreferences: { nodeIntegrationInWorker: true } })启用后Worker 里就能使用 Node.js 的全部内置模块且依然可以读取asar归档。但要注意限制条件该选项可以独立于nodeIntegration开启不过sandbox不能设为true并且此选项对 SharedWorker 与 Service Worker 不可用与沙箱策略不兼容。一个重要的边界是Node 的全局能力被允许进入 Worker但Electron 自身的任何内置模块都不能在多线程环境使用。对于原生 Node 模块指南措辞强烈建议不要直接在 Web Worker 中加载——绝大多数原生模块都按单线程假设编写在 Worker 中使用会导致崩溃与内存破坏即便模块本身线程安全由于process.dlopen并非线程安全依然不安全。目前唯一稳妥的做法是确保 Web Worker 启动后应用不再加载任何原生模块。五、Offscreen rendering离屏渲染Offscreen rendering 指南 介绍如何把BrowserWindow的内容以位图或共享 GPU 纹理的形式取出来从而渲染到任意目标例如 3D 场景中的贴图。Electron 的实现思路与 Chromium Embedded FrameworkCEF类似且有这些行为特征只把脏区域dirty area传给paint事件以提高效率可以随时停止/继续渲染并设置帧率页面无变化时不产生新帧离屏窗口始终以无边框窗口创建。渲染模式分为两类GPU 加速模式由 GPU 参与合成支持 WebGL 与 3D CSS 动画。依据webPreferences.offscreen.useSharedTexture再细分两种取帧方式useSharedTexture: true共享 GPU 纹理帧被直接拷贝进 GPU 纹理没有 CPU-GPU 内存拷贝开销因此速度非常快但属于高级特性需要配合你自己的原生模块使用可将共享纹理直接导入自有渲染管线useSharedTexture: false默认CPU 共享内存位图通过NativeImageAPI 取到帧帧需要从 GPU 拷回 CPU开销更大、速度更慢但仍支持 GPU 相关功能。软件输出设备模式用纯 CPU 软件输出设备渲染帧生成比共享内存位图模式更快代价是需要通过app.disableHardwareAcceleration()关闭 GPU 加速即不支持 WebGL/GPU 能力。指南中的 fiddle 示例位于 offscreen-rendering/main.js可配合 browser-window.md 中的paint事件、setContentProtection等 API 一并实践。六、Spellchecker内置拼写检查Spellchecker 指南 介绍从 Electron 8 起内置的 Chromium 拼写检查能力Windows/Linux 上由Hunspell 词典驱动macOS 上使用系统原生拼写检查 API。启用Electron 9 及以上默认启用若使用 Electron 8需在webPreferences中显式设置spellcheck: true。设置语言macOS 走原生 API、无法手动指定系统会自动检测语言Windows/Linux 则通过会话级 API 控制语言例如session.setSpellCheckerLanguages([en-US, fr])同时启用美式英语与法语session.availableSpellCheckerLanguages可列出全部可用语言码。默认情况下启用与当前 OS 语言环境匹配的语言。接入右键菜单webContents的context-menu事件参数中携带了构建菜单所需的全部信息仓库 docs/api/web-contents.md 有详细字段说明。示例做法是遍历params.dictionarySuggestions把每条建议渲染为MenuItem点击时调用webContents.replaceMisspelling(suggestion)若params.misspelledWord存在再追加一个「Add to dictionary」菜单项点击后调用session.addWordToSpellCheckerDictionary(word)加入用户词典。此外该文档还明确澄清拼写检查不会使用任何 Google 服务——Windows/Linux 由 Electron 维护的 Hunspell 词典数据提供服务这在该仓库的补丁与构建文件如filenames.hunspell.gni、patches 中针对 spellchecker 的下载 URL 覆盖支持中也有佐证。七、Web embeds嵌入第三方网页Web embeds 指南 对比了在 Electron 中嵌入第三方 Web 内容的三种方式iframe标准 Web 方式受同源策略与常规浏览器行为约束最简单但能力受限webview标签Electron 专用标签把子页面隔离在自己的进程中适合嵌入不可信或异构内容但要留意其安全边界与相关事件/方法体系仓库中 docs/api/webview-tag.md 以及lib/browser/guest-window-manager.ts、lib/renderer/web-view/下的实现文件都围绕它展开WebContentsView更现代的 View 体系直接把另一个WebContents作为原生层视图嵌入具有更强的布局与生命周期控制力相关 API 记载于 docs/api/web-contents-view.md 与 docs/api/view.md。选型时要综合考虑安全性webview 的进程隔离 vs iframe 的同源限制、渲染层级与交互成本。该指南对于处理 OAuth 登录、内嵌地图、帮助中心等场景具有很强的参考价值。仓库内的 fiddle 应用组织结构要在仓库里快速找到某个示例可以遵循这样的规律指南正文中的fiddle代码块路径就是 docs/fiddles 下的真实目录。整体目录按主题分类组织features/功能主题示例包括dark-mode、drag-and-drop、keyboard-shortcuts、navigation-history、notifications、offscreen-rendering、online-detection、progress-bar、recent-documents、represented-file、web-bluetooth、web-hid、web-serial、web-usb以及window-customization含自定义标题栏、自定义窗口样式等细分ipc/主进程-渲染进程通信的几种模式pattern-1/pattern-2/pattern-3与 webview 新窗口处理media/、menus/、native-ui/、screen/、system/分别覆盖截图、上下文菜单/托盘菜单/Dock 菜单、对话框与通知等原生 UI、屏幕适配、剪贴板/系统信息/协议处理等系统能力quick-start/、tutorial-first-app/、tutorial-preload/配合入门教程使用的逐步示例windows/窗口管理无边框窗口、状态管理、新窗口、窗口事件。每个 fiddle 目录的文件命名也高度一致main.js负责创建窗口与主进程逻辑index.html提供页面结构preload.js在启用了 context isolation 的场景下通过contextBridge暴露受限 APIrenderer.js承载页面交互逻辑。因此把任意一个 fiddle 目录复制到新工程、替换main.js中的业务逻辑就能快速得到一条可运行的开发基线。当示例不够用时怎么办总览页的最后一部分是How to...?完整清单在侧边栏即 docs/tutorial 目录中维护。当你需要实现的能力在侧边栏中找不到对应指南时有两个可行路径到仓库的 API 文档例如 app.md、browser-window.md、web-contents.md里查找对应模块的完整说明——总览页明确指出很多功能其实在 API 文档中已有记载向官方提出 issue 请求补充该主题的指南让示例体系随着开发者需求持续生长。对普通开发者而言这套「示例总览 → 专题指南 → 可运行 fiddle」的三层结构本身就是很好的学习路径先从 总览页 找到主题再精读对应的专题指南理解原理与参数最后把 fiddle 跑起来观察真实行为必要时再结合 docs/api 目录下的 API 参考查阅全部选项与边界条件。相比零散的网络教程这套仓库内自洽的示例体系能让你始终基于当前版本的真实行为进行学习与验证。【免费下载链接】electron:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS项目地址: https://gitcode.com/GitHub_Trending/el/electron创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
