Electron项目开发实战 pdf下载

《Electron项目开发实战》将引领读者设置、配置、构建和发布Electron应用程序，并提供进一步的实战经验。其间，我们将构建多个项目、处理各种挑战和问题，并将JavaScript框架与底层工具链集成。

《Electron项目开发实战》详细阐述了与Electron项目开发相关的基本解决方案，主要包括构建Markdown编辑器，与Angular、React和Vue集成，构建屏幕截图剪裁工具，制作2D游戏，构建音乐播放器，分析、Bug跟踪和许可机制，利用Firebase构建群聊应用程序，构建eBook编辑器和生成器，构建桌面数字钱包等内容。此外，本书还提供了相应的示例、代码，以帮助读者进一步理解相关方案的实现过程。

本书适合作为高等院校计算机及相关专业的教材和教学参考书，也可作为相关开发人员的自学用书和参考手册

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

第1章 构建第1个Electron应用程序 1

1.1 技术需求 1

1.2 Electron是什么 1

1.3 准备开发环境 2

1.3.1 安装Visual Studio Code 2

1.3.2 针对macOS设置环境 3

1.3.3 针对Ubuntu Linux设置环境 5

1.3.4 针对Windows设置环境 6

1.3.5 在Windows上安装Node.js 7

1.4 创建一个简单的应用程序 8

1.5 多平台的打包机制 13

1.5.1 macOS包机制 13

1.5.2 Ubuntu包机制 16

1.5.3 Windows的包机制 18

1.6 本章小结 20

第2章 构建Markdown编辑器 21

2.1 技术需求 21

2.2 配置新的项目 22

2.3 适配屏幕尺寸 26

2.4 集成应用程序菜单 28

2.4.1 创建一个自定义菜单项 29

2.4.2 定义菜单项角色 32

2.4.3 菜单分隔符 33

2.4.4 键盘加速键 35

2.4.5 特定平台的菜单 36

2.4.6 配置菜单中的应用程序名称 38

2.4.7 隐藏菜单项 39

2.4.8 进程间的消息发送 41

2.4.9 将文件保存至本地系统 46

2.4.10 从本地系统中加载文件 53

2.4.11 创建一个文件菜单 57

2.5 添加拖曳功能 59

2.6 支持自动更新功能 62

2.7 修改应用程序的标题 71

2.8 本章小结 72

第3章 与Angular、React和Vue集成 73

3.1 技术需求 73

3.2 利用Angular构建Electron应用程序 73

3.2.1 生成Angular项目 74

3.2.2 将Angular项目与Electron集成 76

3.2.3 配置实时重载 81

3.2.4 设置生产版本 83

3.2.5 设置条件加载 85

3.2.6 使用Angular Material组件 87

3.2.7 Anguar路由机制 91

3.3 利用React构建Electron应用程序 98

3.3.1 创建React项目 98

3.3.2 实时重载 102

3.3.3 设置产品发布版本 105

3.3.4 设置条件加载 107

3.3.5 使用Blueprint UI工具箱 108

3.4 利用Vue.js构建Electron应用程序 113

3.4.1 创建一个Vue配置文件 117

3.4.2 实时重载 119

3.4.3 产品发布版本 121

3.4.4 设置条件加载 122

3.4.5 添加路由机制 123

3.4.6 配置Vue Material 125

3.5 本章小结 129

第4章 构建屏幕截图剪裁工具 131

4.1 技术需求 131

4.2 准备项目 132

4.3 配置无框窗口 133

4.3.1 macOS的附加选项 135

4.3.2 使用隐藏的titleBarStyle 135

4.3.3 titleBarStyle属性的hiddenInset值 136

4.3.4 titleBarStyle的customButtonsOnHover值 137

4.4 透明窗口 138

4.5 可拖曳的应用程序窗口 141

4.6 添加截图工具栏按钮 142

4.7 使用desktopCapturer API 144

4.8 计算主显示尺寸 145

4.9 生成并保存缩略图 146

4.10 重置图像尺寸并剪裁图像 148

4.11 测试应用程序的行为 151

4.12 集成系统托盘 152

4.13 启动时隐藏主应用程序菜单 154

4.14 注册全局键盘快捷方式 155

4.15 本章小结 157

第5章 制作2D游戏 159

5.1 技术需求 159

5.2 配置游戏项目 160

5.3 运行Hello World示例 163

5.4 渲染背景图像 166

5.5 禁止窗口尺寸变化 168

5.6 渲染精灵对象 168

5.7 缩放精灵对象 169

5.8 处理键盘输入 171

5.9 根据方向翻转飞船对象 173

5.10 控制精灵对象的坐标 174

5.11 控制精灵对象的速度 177

5.12 本章小结 179

第6章 构建音乐播放器 181

6.1 技术需求 181

6.2 创建项目 182

6.3 音乐播放器组件 184

6.3.1 下载音乐文件 185

6.3.2 基本的播放器设置 188

6.3.3 样式按钮 192

6.4 播放控制按钮 195

6.4.1 Stop按钮 195

6.4.2 静音和非静音按钮 197

6.4.3 音量按钮 199

6.5 实现歌曲的进度栏 202

6.6 显示音乐元数据 203

6.7 改进用户界面 208

6.8 最终的结构 210

6.9 本章小结 213

第7章 分析、Bug跟踪和许可机制 215

7.1 技术需求 215

7.2 连接分析和跟踪机制 216

7.3 构建自身方案或使用已有服务 216

7.3.1 创建自己的分析服务 217

7.3.2 使用第三方分析服务 217

7.4 针对Electron应用程序使用Nucleus 218

7.5 创建一个新的Nucleus账户 219

7.6 创建基于跟踪支持的新项目 222

7.7 安装Nucleus Electron库 224

7.8 查看实时分析数据 226

7.9 禁用每个用户请求的跟踪机制 230

7.10 验证实时用户统计结果 231

7.11 支持离线模式 232

7.12 处理应用程序更新 232

7.13 加载全局服务器设置 235

7.14 许可检查机制和政策 237

7.14.1 创建新策略和许可 237

7.14.2 检查应用程序中的证书 240

7.15 本章小结 241

第8章 利用Firebase构建群聊应用程序 243

8.1 技术需求 243

8.2 创建一个Angular项目 245

8.3 创建新的Firebase账户 248

8.4 创建一个Firebase应用程序 252

8.5 配置Angular Material组件 254

8.5.1 添加Browser Animations模块 255

8.5.2 配置默认的主题 255

8.5.3 添加Material Icons库 255

8.5.4 添加导航栏 256

8.5.5 利用材质工具栏测试应用程序 257

8.6 构建登录对话框 258

8.6.1 实现Material界面 259

8.6.2 错误处理机制 261

8.6.3 准备聊天组件占位符 262

8.7 将登录对话框连接至Firebase Authentication 263

8.7.1 启用注册供应商 264

8.7.2 创建示例账户 266

8.7.3 集成Login对话框和Firebase 268

8.8 配置实时数据库 271

8.9 渲染聊天群列表 275

8.10 实现群消息页面 279

8.11 显示群消息 281

8.12 发送群消息 285

8.12.1 更新消息列表界面 288

8.12.2 进一步改进 288

8.13 验证Electron Shell 289

8.14 本章小结 290

第9章 构建eBook编辑器和生成器 291

9.1 技术需求 291

9.2 创建项目结构 292

9.2.1 生成新的React应用程序 292

9.2.2 安装编辑器组件 293

9.2.3 测试Web应用程序 298

9.2.4 与Electron Shell集成 300

9.3 升级代码并使用React Hooks 301

9.4 控制键盘快捷方式 302

9.4.1 加载文件 303

9.4.2 保存文件 306

9.5 集成应用程序菜单 308

9.6 设置电子书生成器 311

9.6.1 安装Docker 312

9.6.2 运行Pandoc容器 315

9.6.3 将文档发送至主进程（Node.js） 317

9.7 从Electron中调用Docker命令 320

9.7.1 将标记文本发送至Node.js进程 320

9.7.2 将标记文本保存至本地磁盘 320

9.8 生成PDF电子书 323

9.9 生成ePub电子书 325

9.10 本章小结 328

第10章 构建桌面数字钱包 329

10.1 技术需求 329

10.2 利用React生成项目 330

10.3 集成Ant Design库 332

10.4 设置个人以太坊区块链 334

10.5 配置Ethereum JavaScript API 338

10.6 显示以太坊节点信息 340

10.6.1 获取节点信息 340

10.6.2 在Header中渲染节点信息 341

10.7 集成应用程序菜单 342

10.8 渲染账户列表 344

10.9 显示账户余额 347

10.10 将以太转至另一个账户中 350

10.11 打包应用程序并发布 355

10.12 本章小结 358

前 言

本书将引领读者设置、配置、构建和发布Electron应用程序，并提供进一步的实战经验。其间，我们将构建多个项目、处理各种挑战和问题，并将JavaScript框架与底层工具链集成。

适用读者

本书面向初学者或有经验的Web开发人员。读者应具备HTML、CSS和JavaScript方面的基础知识，并熟悉React、Angular或Vue.js框架之一。

另外，本书不要求桌面开发方面的前期知识。

本书内容

第1章准备开发环境并开始Electron开发。

第2章引领读者熟悉典型Electron应用程序的主要构造模块。

第3章介绍前端JavaScript框架，如Angular、React.js和Vue.js，以及如何将其集成至Electron应用程序中，以构建跨平台的桌面应用程序，进而通过站点共享代码库。

第4章考查如何与Electron中的本地图像捕捉API协调工作、系统托盘集成和键盘处理机制。

第 5 章讨论一个有趣的JavaScript游戏引擎，并处理游戏循环、加载外资源，以及处理Main和Renderer进程间的通信。

第6章将构建一个包含播放列表和定制专辑封面的桌面音乐播放器。

第7章针对在生产中监控Electron应用程序、跟踪错误和崩溃、分析实时用户群提供了必要的信息。

第 8 章创建一个具有群聊功能的Electron应用程序，针对移动应用程序集成Google Firebase服务、配置Google Authentication，并在云中存储应用程序数据。

第9章将创建一个简单的跨平台图书编辑器，并利用Docker生成PDF和ePub图书，随后在独立的Electron窗口中预览PDF文件。

第 10 章将开发一个简单的数字钱包应用程序（与外部服务集成），并连接至运行于本地的服务器。

发布周期

从2019年5月13日开始，Electron项目的发布周期改为12周。读者可访问官方文档查看详细内容，对应网址为https://electronjs.org/blog/12-week-cadence。

缩短发布周期意味着我们可更快地获取新特性、修复Bug和安全问题。当然，这也意味着，本书出版后很可能会发布新的Electron版本。

好消息是，Electron团队支持最近的3个主要版本。对此，读者可访问https://electronjs. org/docs/tutorial/support#supported-versions查看时间表和更多细节内容。另外，通过输入下列命令，我们还可以方便地将应用程序项目更新至Electron的最新版本：

npm install electron@latest

关于每个版本的详细信息，这里建议关注Electron团队的博客，对应网址为https:// www.electronjs.org/blog。

背景知识

读者应了解Node.js（https://nodejs.org/en/）及其基本命令，如npm install。

偏好Angular的读者需要了解与Angular CLI相关的细节信息（https://cli.angular.io/）及其命令。

针对React开发，读者应了解Create React App（https://github.com/facebook/create-react- app）工具。

对于Electron开发，当使用Vue.js框架时，Vue CLI（https://cli.vuejs.org/）应用程序文档包含了丰富的细节信息和示例。

下载示例代码文件

读者可访问www.packt.com并通过个人账户下载本书的示例代码文件。无论读者在何处购买了本书，均可访问www.packt.com/support，经注册后我们会直接将相关文件通过电子邮件的方式发送给您。

下载代码文件的具体操作步骤如下。

（1）访问www.packt.com并注册。

（2）选择Support选项卡。

（3）单击Code Downloads。

（4）在Search搜索框中输入书名。

当文件下载完毕后，可利用下列软件的最新版本解压或析取文件夹中的内容。

 WinRAR/7-Zip（Windows环境）。

 Zipeg/iZip/UnRarX（Mac环境）。

 7-Zip/PeaZip（Linux环境）。

另外，本书的代码包也托管于GitHub上，对应网址为https://github.com/PacktPublishing/ Electron-Projects。若代码被更新，现有的GitHub库也会保持同步更新。

读者还可访问https://github.com/PacktPublishing/并从对应分类中查看其他代码包和视频内容。

图标表示警告或重要的注意事项。

图标表示提示信息和操作技巧。

读者反馈和客户支持

欢迎读者对本书提出建议或意见。

对此，读者可向customercare@packtpub.com发送邮件，并以书名作为邮件标题。

勘误表

尽管我们希望做到尽善尽美，但不足依然在所难免。如果读者发现谬误之处，无论是文字错误抑或代码错误，还望不吝赐教。对此，读者可访问http://www.packtpub.com/submit- errata，选取对应书籍，输入并提交相关问题的详细内容。

版权须知

一直以来，互联网上的版权问题从未间断，Packt出版社对此类问题异常重视。若读者在互联网上发现本书任意形式的副本，请告知我们网络地址或网站名称，我们将对此予以处理。关于盗版问题，读者可发送邮件至copyright@packtpub.com。

若读者针对某项技术具有专家级的见解，抑或计划撰写书籍或完善某部著作的出版工作，可访问authors.packtpub.com。

问题解答

若读者对本书有任何疑问，均可发送邮件至questions@packtpub.com，我们将竭诚为您服务。