Electron

Build cross platform desktop apps with JavaScript, HTML, and CSS Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 比你想象的更简单 如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。 Web 技术 Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。 开源 Electron is an open source project maintained by the OpenJS Foundation and an active community of contributors. 跨平台 Electron 兼容 Mac、Windows 和 Linux,可以构建出三个平台的应用程序。 https://www.electronjs.org/ https://www.electronjs.org/docs/ https://github.com/electron/electron

指南:开始使用 Electron

本指南将会通过使用Electron创建一个极简的 Hello World 应用一步步的带你了解,该应用与electron/electron-quick-start类似。 通过这个教程,你的app将会打开一个浏览器窗口,来展示包含当前正在运行的 Chromium, Node.js, and Electronweb等版本信息的web界面 在使用Electron进行开发之前,您需要安装 Node.js。 我们建议您使用最新的LTS版本。 请使用为你平台预构建的 Node.js 安装器来进行安装, 否则,您可能会遇到与不同开发工具不兼容的问题。 注意 因为 Electron 将 Node.js 嵌入到其二进制文件中,你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。

详细信息

安装 要安装预编译的 Electron 二进制文件,请使用 npm。 首选方法是在你的应用程序中安装 Electron 作为开发依赖。 查看versioning doc获取如何在你的应用中管理Electron的相关信息。 运行 Electron ad-hoc 如果你不想在本地工程上使用 npm install 同时又没用其它选择时,你也可以使用 npm 捆绑的 npx 命令来运行 Electron ad-hoc 上面的命令会在当前工作目录下运行Electron。 需要注意的是,你的应用中的任何依赖将不会被安装。 自定义 如果想修改下载安装的位版本(例如, 在x64机器上安装ia32位版本), 你可以使用npm install中的--arch标记,或者设置npm_config_arch 环境变量 ASAR ASAR 表示 Atom Shell Archive Format。 一个 asar 档案就是一个简单的 tar 文件 - 比如将那些有关联的文件放至一个单独的文件格式中。 Electron 能够任意读取其中的文件并且不需要解压整个文件。 ASAR 格式主要是为了提高Windows性能... TODO CRT C 运行时库 (CRT) 是包含了 ISO C99 标准库的 c + + 标准库的一部分。 实现了 CRT 的 Visual c++ 库支持本机代码开发, 以及混合的本机和托管代码, 以及用于. NET 开发的纯托管代码。 DMG 是指在 macOS 上使用的苹果系统的磁盘镜像打包格式。 DMG 文件通常被用来分发应用的 "installers"(安装包)。 electron-builder 支持使用 dmg 来作为编译目标。 IME 输入法编辑器. 是一个允许用户输入在键盘上找不到的字符和符号的程序。 例如,使用户可以用拉丁语键盘输入中文,日文,韩文和印度文字。 IDL 界面描述语言。 将函数签名和数据类型写入一个格式,可以用来在 Java、C++、JavaScript 等中生成接口。 IPC IPC 代表进程间交流。 Electron 使用 IPC 来在main(主进程)和renderer(渲染进程)之间传递序列化后的 JSON 信息。 libchromiumcontent 包含 Chromium Content module 及其所有依赖项 (例如, Blink、 V8 等) 的共享链接库。 也称为 “libcc”。 github.com/electron/libchromiumcontent main process The main process, commonly a file named main.js, is the entry point to every Electron app. It controls the life of the app, from open to close. 它也管理着系统原生元素比如菜单,菜单栏,Dock 栏,托盘等。 The main process is responsible for creating each new renderer process in the app. The full Node API is built in. 每个应用的主进程文件都在 中的 个主 属性中指定package.json。 这是 电子版。 知道启动时要执行什么文件。 在Chromium中,此进程被称为“浏览器进程”。 它在 Electron 中重新命名为 以避免与渲染器过程混淆。 参见: process, renderer process MAS Apple's Mac App Store的缩写。 For details on submitting your app to the MAS, see the Mac App Store Submission Guide. Mojo 一种用于进程内部或进程间通信的 IPC 系统, 这很重要, 因为 Chrome会依据内存压力等来决定是否将其工作分拆给不同的进程。 可参考chromium.googlesource.com/chromium/src/+/master/mojo/README.md native modules Native modules (also called addons in Node.js) are modules written in C or C++ that can be loaded into Node.js or Electron using the require() function, and used as if they were an ordinary Node.js module. 它主要用于桥接在 JavaScript 上运行 Node.js 和 C/C++ 的库。 Electron 支持了原生的 Node 模块,但是 Electron 非常可能安装一个不一样的 V8 引擎通过 Node 二进制编码,所以在打包原生模块的时候你需要在 指定具体的 Electron 本地头文件。 参见: Using Native Node Modules. NSIS Nullsoft Scriptable Install System 是一个微软 Windows 平台上的脚本驱动的安装制作工具。 它发布在免费软件许可证书下,是一个被广泛使用的替代商业专利产品类似于 InstallShield。 electron-builder 支持使用 NSIS 作为编译目标。 OSR OSR (Off-screen 渲染) 可以在 背景下加载重页面然后在其后显示(它将更快) 它允许您渲染页面而不在屏幕上显示它。 进程 一个进程是计算机程序执行中的一个实例。 Electron 应用同时使用了 main(主进程) 和一个或者多个 rendere(渲染进程) 来运行多个程序。 在 Node.js 和 Electron 里面,每个运行的进程包含一个 process 对象。 这个对象作为一个全局的提供当前进程的相关信息和操作方法。 作为一个全局变量,它在应用内能够不用 require() 来随时取到。 参见: main process, renderer process renderer process The renderer process is a browser window in your app. Unlike the main process, there can be multiple of these and each is run in a separate process. 它们也可以被掩盖。 在普通的浏览器中,web页面通常在沙盒环境中运行,并且无法访问操作系统的原生资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。 参见: process, main process Squirrel Squirrel 是一个开源的框架来让 Electron 的应用能够自动的更新到发布的新的版本。 详见 autoUpdater API 了解如何开始使用 Squirrel。 userland "userland" 或者 "userspace" 术语起源于 Unix 社区,当程序运行在操作系统内核之外。 最近这个术语被推广到 Node 和 npm 社区,用于区分 "Node 内核"功能与在 npm 上注册的"用户" 们所发布的包的功能。 就像 Node ,Electron 致力于使用一些少量的设置和 API 来提供所有的必须的支持给开发中的跨平台应用。 这个设计理念让 Electron 能够保持灵活而不被过多的规定有关于如何应该被使用。 Userland 让用户能够创造和分享一些工具来提额外的功能在这个能够使用的 "core(核心)"之上。 V8 V8 是 Google开源的 JavaScript 引擎。 它是在 C++ 中写的,并在 Google Chrome 中使用 。 V8可以单独运行,或者可以嵌入任何C++应用程序。 Electron将 V8 作为Chromium的一个部分进行构建,然后在构建Node时也指向那个 V8 V8的版本号总是与 Google Chrome 的版本号相对应。 Chrome 59 包括V8 5.9, Chrome 58 包括V8 5.8等。 v8.dev nodejs.org/api/v8.html docs/development/v8-development.md webview webview tags are used to embed 'guest' content (such as external web pages) in your Electron app. They are similar to iframes, but differ in that each webview runs in a separate process. 作为页面它拥有不一样的权限并且所有的嵌入的内容和你应用之间的交互都将是异步的。 这将保证你的应用对于嵌入的内容的安全性。

API 参考

如何使用 Node.js 和 Electron APIs Node. js 的所有 内置模块 都在Electron中可用, 第三方 node 模块中也完全支持 (包括 原生模块 )。 Electron 还为开发原生桌面应用程序提供了一些额外的内置模块。 某些模块仅在主进程中可用, 有些仅在渲染进程 (web 页) 中可用, 而有些在这两个进程中都可以使用。 基本规则是: 如果一个模块是 GUI 或底层系统相关的, 那么它应该只在主进程中可用。 You need to be familiar with the concept of main process vs. renderer process scripts to be able to use those modules. API Processes Description 快捷键 定义键盘快捷键。 app Main 控制你的应用程序的生命周期事件。 autoUpdater Main Enable apps to automatically update themselves. BrowserView 创建和控制视图 BrowserWindow Main 创建并控制浏览器窗口。 类: BrowserWindowProxy 操纵子浏览器窗口 类: ClientRequest 发起HTTP/HTTPS请求. 剪贴板 在系统剪贴板上执行复制和粘贴操作。 类: CommandLine 操作Chromium读取的应用程序的命令行参数 支持的命令行开关 Electron支持的命令行开关. contentTracing Main 从Chromium收集追踪数据以找到性能瓶颈和慢操作。 contextBridge 在隔离的上下文中创建一个安全的、双向的、同步的桥梁。 类:Cookies 查询和修改一个会话的cookies crashReporter Main and Renderer 将崩溃日志提交给远程服务器 类: Debugger 备用的 Chrome 远程调试接口。 desktopCapturer Renderer 访问关于使用navigator.mediaDevices.getUserMedia API 获取的可以用来从桌面捕获音频和视频的媒体源的信息。 对话框 显示用于打开和保存文件、警报等的本机系统对话框。 类: Dock 在 macOS dock中控制您的应用 类:downloadItem 控制来自于远程资源的文件下载。 环境变量 在不更改代码的情况下控制应用程序配置和行为。 Chrome 扩展支持 注意:Electron 不支持商店中的任意 Chrome 扩展,Electron 项目的目标不是与 Chrome 的扩展实现完全兼容。 File 对象 在文件系统中,使用HTML5 File 原生API操作文件 无边框窗口 打开一个无工具栏、边框、和其它图形化外壳的窗口。 系统快捷键 在应用程序没有键盘焦点时,监听键盘事件。 inAppPurchase Mac App Store中的应用内购买 类:IncomingMessage 处理 HTTP/HTTPS 请求的响应。 ipcMain Main 从主进程到渲染进程的异步通信。 ipcRenderer Renderer 从渲染器进程到主进程的异步通信。 Menu Main 创建原生应用菜单和上下文菜单。 菜单项 添加菜单项到应用程序菜单和上下文菜单中 MessageChannelMain 主进程中用于通道消息传递的通道接口。 MessagePortMain 主进程中用于通道消息传递的端口接口。 nativeImage Main and Renderer 使用 PNG 或 JPG 文件创建托盘、dock和应用程序图标。 本地主题 读取并响应Chromium本地色彩主题中的变化。 net Main 使用Chromium的原生网络库发出HTTP / HTTPS请求 netLog Logging network events for a session. 通知 创建OS(操作系统)桌面通知 电源监视器 监视电源状态的改变。 省电拦截器 | powerSaveBlocker 阻止系统进入低功耗 (休眠) 模式。 进程 处理对象的扩展 protocol Main 注册自定义协议并拦截基于现有协议的请求。 remote Renderer 在渲染进程中使用主进程模块。 screen Main and Renderer 检索有关屏幕大小、显示器、光标位置等的信息。 ServiceWorkers Query and receive events from a sessions active service workers. session Main 管理浏览器会话、cookie、缓存、代理设置等。 ShareMenu Create share menu on macOS. shell Main and Renderer 使用默认应用程序管理文件和 url。 简介 如何使用 Node.js 和 Electron APIs systemPreferences Main 获取system preferences. 触控板 为原生macOS应用创建TouchBar布局 类: TouchBarButton 为mac os应用在touch bar中创建一个按钮组件 类: TouchBarColorPicker 在macOS 应用程序中,为触控栏创建拾色器 类: TouchBarGroup 为本地mac os创建一个触控条组 类: TouchBarLabel 在原生macOS应用程序的触摸栏中创建一个标签 TouchBarOtherItemsProxy Instantiates a special "other items proxy", which nests TouchBar elements inherited from Chromium at the space indicated by the proxy. By default, this proxy is added to each TouchBar at the end of the input. For more information, see the AppKit docs on NSTouchBarItemIdentifierOtherItemsProxy Note: Only one instance of this class can be added per TouchBar. 类: TouchBarPopover 为macOS原生应用在触摸栏中创建一个弹出控件 类: TouchBarScrubber 创建一个scrubber (可滚动的选择程序) 类: TouchBarSegmentedControl 创建一个分段控件(按钮组),其中一个按钮具有选定状态 类: TouchBarSlider 为本机 macOS 应用程序在触摸栏中创建滑块 类: TouchBarSpacer 在mac os应用中,为touch bar中的相邻项之间留白 Tray Main 添加图标和上下文菜单到系统通知区 webContents Main 渲染以及控制 web 页面 webFrame Renderer 自定义渲染当前网页 webFrameMain Control web pages and iframes. 类:WebRequest 在一个请求生命周期的不同阶段,截取和修改其内容。 <webview>标签 在一个独立的 frame 和进程里显示外部 web 内容。 从渲染进程打开窗口

API 结构

API Processes BluetoothDevice Object 蓝牙设备 Certificate Object 证书对象 CertificatePrincipal Object 证书主体 Cookie 对象 CPUUsage 对象 崩溃报告对象 CustomScheme 对象 DesktopCapturerSource 对象 Display对象 事件对象扩展 通用事件 Extension 对象 扩展信息对象 FileFilter 对象 FilePathWheaders 对象 GPU 特性状态对象 InputEvent Object 输入事件 IOCounters 对象 IpcMainEvent Object extends Event IpcRendererEvent对象继承Event IpcRendererEvent对象继承Event JumpListCategory 对象 JumpListItem 对象 键盘事件对象 KeyboardInputEvent 对象继承InputEvent MemoryInfo 对象 MemoryUsageDetails 对象 MimeTypedBuffer对象 MouseInputEvent 对象扩展自 InputEvent MouseWheelInputEvent Object extends MouseInputEvent NewWindowWebContentsEvent 对象继承 Event NotificationAction 对象 NotificationResponse 对象 Point 对象 PostBody 对象 PrinterInfo 对象 ProcessMemoryInfo 对象 ProcessMetric 对象 Product 对象 ProtocolRequest 对象 ProtocolResponse 对象 ProtocolResponseUploadData Object Rectangle Object Main and Renderer Referrer Object ScrubberItem 对象 SegmentedControlSegment 对象 SerialPort 对象 ServiceWorkerInfo 对象 SharedWorkerInfo 对象 SharingItem 对象 ShortcutDetails 对象 Size 对象 Task 对象 ThumbarButton 对象 TraceCategoriesAndOptions 对象 TraceConfig 对象 事务对象 UploadData 对象 UploadFile 对象 UploadRawData 对象 WebSource Object

高级

更新 Appveyor Azure 镜像 构建指南 构建步骤(Linux) 构建步骤(macOS) 构建步骤(Windows) 构建系统概览 Chromium 开发 在 C++ 代码中使用clang-tidy 在 C++ 代码中使用clang-tidy 代码规范 在 Windows 中调试 在 macOS 中调试 使用 XCode 调试 Electron 和 NW.js 之间的技术差异 Goma Electron中的问题 Patches in Electron 拉取请求 对 Electron 进行开发 在调试器中设置 Symbol 服务器 源码目录结构 测试 V8 开发