Electron入门与实战

谨以此书献给热爱技术的你。
机缘巧合，笔者在2016年初次接触到Electron技术，从那时起到现在已有六年左右的时间。当时，公司迫切需要开发出一款能运行在计算机上的桌面客户端产品，但由于我们的开发组人员绝大部分精通的是Web前端技术栈，缺少传统桌面客户端技术栈的开发经验，因此我们不得不去寻找一款基于Web前端开发的桌面客户端技术。后在众多相关技术中，我们选择了Electron。选择Electron的原因，你在阅读本书的过程中可以找到相应的答案。
Electron是一个开源的，能让开发人员使用JavaScript、HTML以及CSS等Web前端技术实现桌面应用的框架。Electron巧妙地将Chromium和Node.js结合在一起，使得开发桌面应用不再是C#、C 等技术栈开发人员的专利，Web前端开发者也能使用他们熟悉的技术开发桌面应用。Chromium和Node.js在Windows、Mac、Linux都有对应的版本，因此它们本身都是跨平台的技术，这使得用Electron框架开发的应用具有较强的跨平台性，也就是大家熟知的“Write once, run everywhere”。
Electron对于Web前端开发人员来说是非常友好的，它将大部分与系统层交互的逻辑封装了起来，免去了开发时对接系统底层的烦琐事务，让开发者在开发桌面应用时有着与开发Web相近的体验。大部分情况下，只要你掌握了前端常说的“三板斧”（JavaScript、HTML、CSS）以及Node.js技术，下载并运行过官方的Demo，稍加探索，就能比较容易地理解Electron框架中的奥秘，很快地掌握这门技术并构建一款桌面应用。
在了解和学习Electron之前，你可能没有意识到，平时接触到的或经常使用的桌面应用中，有很多是使用Electron实现的，例如常用的代码编辑器Visual Studio Code、Atom等，又或者是迅雷。你会惊讶地发现这些应用运行得如此流畅，从而让你感觉不到它们是用Web前端技术实现的。到目前为止，已经有1000多个应用使用Electron技术开发并被世界各地的用户使用。但这不算多，我相信这只是刚刚开始。
随着Electorn的流行，越来越多的开发人员开始学习和使用Electron框架。在笔者这些年与一些开发者接触的过程中发现，一些会让初学者感到困惑的问题，总结为如下几点。
官方文档缺乏场景案例。虽然官方文档详尽地列举了Electron提供的API以及其调用的方式和参数说明，你可以清晰地知道这些API该如何调用。但是在实际项目中使用时你会发现，只了解API如何调用还不足以支撑你实现想要的功能。例如，官方文档虽然提供了在Electron崩溃时如何收集崩溃日志的API，但是在实际项目中，开发者获取崩溃日志并不是终目的，接下来还需要将记录崩溃信息的文件上传服务器，并从崩溃信息中分析出问题的原因。由于官方文档中没有对收集日志和分析的整个场景进行说明，开发人员对此感到困惑，需要去搜索更多的资料来解决问题。
讲解基本原理的中文资料偏少。对于初学者来说，如果不了解Electron的基本组成、Electron是如何将Chromium与Node.js结合起来的，以及主进程与渲染进程的概念等知识，会在应用开发的过程中感到困惑。在缺少这些知识的情况下，开发人员容易分不清一个业务逻辑应该实现在主进程还是渲染进程。如果错误地将原本应该实现在渲染进程的逻辑实现在了主进程，或者反之，往往会造成意想不到的错误或崩溃，对于程序的稳定性和可维护性来说将非常不利。
多窗口应用的案例偏少。无论是网上关于Electron应用开发的教学Demo，还是使用Electron开发的正式产品，大多数为单窗口加载SPA页面的架构。关于需要使用到多窗口并存且窗口之间需要联动的业务场景的介绍和讲解非常少。这两个场景的不同点在于，单窗口加载SPA页面只需要考虑SPA页面本身的可靠性以及可维护性，而多窗口并存且联动的场景不仅要考虑上述问题，还需要考虑如何保证多个窗口能稳定运行及如何实现它们之间的相互配合。例如，在多窗口应用场景中，当其中一个窗口崩溃后，要保证它能自动重新打开并恢复崩溃前的状态，其他窗口需要得到通知做相应的处理。目前这方面的实践文档是偏少的，当开发者遇到需要考虑这种场景的产品时，也会感到困惑。
本书特点
本书是一本简单易学、实践性强的Electron技术图书，具有如下特点。
循序渐进，简单易学。本书的目标读者为对JavaScript、HTML、CSS以及Node.js已经有一定基础，并准备学习或是使用Electron开发桌面应用的Web前端开发人员。因此，本书不会用较长的篇幅对JavaScript、HTML、CSS以及Node.js等相关技术进行讲解，大部分内容将围绕Electron本身展开，从介绍Electron基础概念，再到概念与案例结合，后学习一个基于Electron的开源框架。
理论与案例结合。本书不是单纯地对理论知识进行讲解，也不会深入探讨某个知识点的底层实现。通篇将以通俗易懂的案例辅助理论知识的讲解，使读者能快速地掌握Electron的基本使用方法。
整洁且清晰的代码示例。俗话说，“Take is cheap, show me your code”。我相信一本好的实战类书籍，整洁清晰的代码是主要的。一段好的代码示例能胜过一堆的文字描述。你不用担心看不懂本书中的代码示例，因为第段代码旁都有着编写详尽的注释和描述。如果一遍看不懂，可以再看一遍，同时可以亲手编写代码并运行，直到理解并掌握为止。
在阅读本书的过程中，你能对Electron的基本概念、基本原理有一个较为全面的了解，从而能在开发过程中更合理地实现业务逻辑。与此同时，你能在场景代码示例中学习到高频使用的API是如何被调用的，而不仅仅是从官网文档中了解API的作用。
本书目标读者
类读者：从事Web前端开发，有一定的前端知识基础，出于兴趣开始学习Electron框架，或是项目即将使用Electron进行开发，想快速上手Electron的开发人员。
第二类读者：从事传统桌面客户端开发，想了解Electron框架，对扩展自己技术广度有诉求的开发人员。
第三类读者：已经使用Electron框架开发过项目，熟悉Electron的基本使用，但想学习更多案例实践的开发人员。
本书主要内容
本书共包含10章，各章的主要内容如下。
第1章介绍Electron的由来以及同类技术，让你对Electron有一个大概的了解。
第2章通过讲解一个系统信息展示应用的实现，让你了解用Electron框架开发应用的目录结构。这个过程中你会初步接触到Electron的一些重要概念，如主进程、渲染进程以及窗口等。如果你在阅读本章节时对这些概念感到困惑，不用担心，后面章节会重点讲解它们。
第3章讲解开发人员在使用Electron框架开发应用时必须要掌握的重要概念—主进程、渲染进程以及进程间通信。掌握这些概念之后，将第2章中的系统信息展示应用独立实现一遍，你就可以基本掌握Electron框架的使用了。
第4章讲解窗口相关的知识。在该章节中，你不仅可以学习如何在应用中使用Electron提供的API实现一个简单的窗口，还可以学习一些复杂窗口的实现方式，如组合窗口、透明圆角窗口以及可伸缩窗口等。与此同时，学习完本章，你还可以了解到Windows窗口的运行机制。
第5章讲解应用启动过程中涉及的相关知识，包括启动参数设置、自定义启动协议、设置开机启动以及优化应用启动速度等。
第6章讲解应用如何与本地能力进行交互，包括在应用中操作Windows注册表、调用C或C 语言实现模块以及利用本地存储来存储应用数据。本章内容会大量涉及Node.js、C以及C 相关的知识。如果你先了解相关知识再阅读本章节，将会更容易理解。
第7章讲解应用如何使用硬件设备和系统UI组件。涉及的硬件设备包括常见的键盘、显示器、麦克风以及打印机。系统UI组件包括托盘菜单和系统通知。
第8章讲解开发人员在应用研发的过程中保障应用质量所使用的方法。将涉及如何在开发过程中编写单元测试和集成测试，以及当应用出问题时常见的处理方式。
第9章讲解在应用准备发布时，将源代码打包成安装包并上架到应用商店的方法。应用升级是一个非常重要的功能，本章也将详细讲解。本章的内容对于开发一个正式的、完整的应用来说非常重要，如果你现阶段还未涉及要发布正式应用的场景，可以先跳过本章节的学习。
第10章属于进阶内容，介绍一个基于Electron实现的应用层框架Sugar-Electron。内容上首先会讲解该框架的使用场景、设计原则及其核心模块的使用方式，然后讲解如何运用该框架开发应用。

《Electron入门与实战》围绕Electron核心的功能展开，讲解了如何使用Electron技术快速开发桌面应用。本书内容简单易学，从实际场景引入，由浅入深，循序渐进，带领读者一步步地去理解、运用Electron的核心功能。本书理论与案例相结合，不仅对Electron的核心功能及其原理进行了详细讲解，还将它们融合到真实场景的案例中，通过项目实战来让读者深入地理解Electron并将学会的知识完美地应用于实践。书中的代码示例整洁且清晰，为便于读者更好地理解，笔者对这些代码做了详尽的注释和描述。

潘潇，公司高级技术经理，主要负责前端方向，同时负责跨技术栈的技术管理工作。从事前端方向8年，在前端业务研发和管理上有一定的经验。同时对其他技术方向如客户端开发等，也有不少涉猎。其中使用Electron进行夸端开发有3年，对Electron的基础知识、特性、优化及进阶使用有一定心得。

第1章 初识Electron 1
1.1 Web应用与桌面客户端 1
1.2 初识Electron 4
1.3 Electron与NW.js 7
1.4 跨平台新星Flutter 11
1.5 总结 13
第2章 尝试构建个Electron程序 15
2.1 Node.js环境搭建 15
2.1.1 下载Node.js 15
2.1.2 安装Node.js 15
2.1.3 配置环境变量 18
2.2 Electron环境搭建 19
2.3 实现一个系统信息展示应用 20
2.3.1 初始化项目 20
2.3.2 程序目录结构 22
2.3.3 应用主进程 23
2.3.4 窗口页面 27
2.4 总结 33
第3章 进程 35
3.1 主进程与渲染进程 35
3.1.1 进程与线程 36
3.1.2 主进程 39
3.1.3 渲染进程 42
3.2 进程间通信 49
3.2.1 主进程与渲染进程通信 51
3.2.2 渲染进程互相通信 59
3.3 总结 65
第4章 窗口 67
4.1 窗口的基础知识 67
4.1.1 窗口的结构 67
4.1.2 重要的窗口配置 68
4.2 组合窗口 73
4.3 特殊形态的窗口 75
4.3.1 无标题栏、菜单栏及边框 76
4.3.2 圆角与阴影 76
4.4 窗口的层级 80
4.4.1 Windows窗口层级规则 80
4.4.2 置顶窗口 81
4.5 多窗口管理 82
4.5.1 使用Map管理窗口 82
4.5.2 关闭所有窗口 87
4.5.3 窗口分组管理 88
4.6 可伸缩窗口 91
4.6.1 单窗口方案 91
4.6.2 多窗口方案 96
4.7 总结 101
第5章 应用启动 103
5.1 启动参数 103
5.1.1 命令行参数 103
5.1.2 根据命令行参数变更应用配置 104
5.1.3 给可执行文件加上启动参数 109
5.2 Chromium配置开关 109
5.2.1 在命令行后追加参数 110
5.2.2 使用commandLine 111
5.3 通过协议启动应用 112
5.3.1 应用场景 112
5.3.2 实现自定义协议 113
5.3.3 通过自定义协议启动时的事件 115
5.3.4 应用首次启动前注册自定义协议 117
5.4 开机启动 118
5.5 启动速度优化 120
5.5.1 优化的重要性 120
5.5.2 使用V8 snapshots优化启动速度 121
5.6 总结 131
第6章 本地能力 132
6.1 注册表 132
6.1.1 reg命令 133
6.1.2 查询注册表项 135
6.1.3 添加或修改注册表项 139
6.1.4 删除注册表 142
6.2 调用本地代码 143
6.2.1 node-ffi 144
6.2.2 N-API 149
6.3 本地存储 154
6.3.1 操作文件存储数据 155
6.3.2 使用indexedDB 172
6.4 总结 181
第7章 硬件设备与系统UI 183
7.1 键盘快捷键 183
7.2 屏幕 189
7.2.1 屏幕截图 190
7.2.2 屏幕录制 201
7.3 录制声音 211
7.4 使用打印机 220
7.5 系统托盘与通知 228
7.6 总结 231
第8章 应用质量 232
8.1 单元测试 232
8.2 集成测试 239
8.3 异常处理 244
8.3.1 全局异常处理 244
8.3.2 日志文件 247
8.3.3 上报异常信息文件 252
8.3.4 Sentry 256
8.4 崩溃收集与分析 260
8.4.1 生成与分析Dump文件 260
8.4.2 在服务器端管理Dump文件 263
8.5 总结 268
第9章 打包与发布 269
9.1 应用打包 269
9.1.1 asar 269
9.1.2 生成可执行程序 271
9.1.3 安装包 273
9.2 应用签名 278
9.3 应用升级 279
9.3.1 自动升级 279
9.3.2 差分升级 282
9.4 发布应用到商店 287
9.5 总结 291
第10章 Sugar-Electron 293
10.1 应用环境的切换 294
10.1.1 集中管理多环境配置 294
10.1.2 基础配置与扩展 295
10.1.3 设置应用环境 296
10.2 进程间通信 299
10.2.1 请求响应模式 299
10.2.2 发布订阅模式 302
10.2.3 向主进程发送消息 304
10.3 窗口管理 305
10.4 数据共享 307
10.5 插件扩展 309
10.5.1 实现自定义插件 310
10.5.2 安装插件到框架 311
10.5.3 在代码中使用插件 312
10.6 服务进程 312
10.7 总结 314

《Electron入门与实战》围绕Electron核心的功能展开，讲解了如何使用Electron技术快速开发桌面应用。本书内容简单易学，从实际场景引入，由浅入深，循序渐进，带领读者一步步地去理解、运用Electron的核心功能。本书理论与案例相结合，不仅对Electron的核心功能及其原理进行了详细讲解，还将它们融合到真实场景的案例中，通过项目实战来让读者深入地理解Electron并将学会的知识完美地应用于实践。书中的代码示例整洁且清晰，为便于读者更好地理解，笔者对这些代码做了详尽的注释和描述。

潘潇，公司高级技术经理，主要负责前端方向，同时负责跨技术栈的技术管理工作。从事前端方向8年，在前端业务研发和管理上有一定的经验。同时对其他技术方向如客户端开发等，也有不少涉猎。其中使用Electron进行夸端开发有3年，对Electron的基础知识、特性、优化及进阶使用有一定心得。