跨平台桌面应用开发:基于ELECTRON与NW.JS

本书是一本同时介绍 Electron和 NW.js的图书，这两者是目前流行的支持使用 HTML、CSS 和 JavaScript 进行桌面应用开发的框架。书中包含大量的编码示例，而且每个示例都是五脏俱全的实用应用，作者对示例中的关键代码都做了非常详细的解释和说明，可让读者通过实际的编码体会使用这两款框架开发桌面应用的切实感受。除此之外，在内容上，本书非常系统，分为４大部分：第１部分介绍两个框架的历史背景，并教大家编写第一个桌面应用，让读者对这两个框架有一个初步的感受；第 2部分深入讲解 NW.js和 Electron 的内部工作原理，帮助大家剖析这两个框架的底层机制，让读者对它们有更深入的理解；第 3部分介绍使用框架提供的大量 API 来构建多款实用的桌面应用，全方位地让读者体会使用这两个框架开发桌面应用带来的舒适体验；第 4部分为大家讲解了，当开发完成后，如何对应用进行测试、跨平台打包和发布。可以说这 4部分结合起来将开发桌面应用的整个流程系统化地讲解得非常清楚、到位。相信结合书中大量的示例，读者一定能很快掌握并自己使用 Electron和 NW.js构建出跨平台的桌面应用。

Paul Jensen是英国伦敦一家名为Starcount公司的高级售前顾问。他曾在创业公司工作过，网路代理商New Bamboo（现在属于Thoughtbot），AOL，以及他自己的咨询公司，Anephenix Ltd。他在一些大会（伦敦Ruby用户组，2013年的Cukeup以及伦敦用户组）上做过演讲，创建了他自己的实时仪表盘（Dashku），也曾是web框架Socketstream的项目带头人。他喜欢麦芽酒和骑行。

目录第1部分  欢迎来到 Node.js 桌面应用开发的世界第1章  Electron和NW.js入门 .......................3 1.1  为什么要用 Node.js 构建桌面应用 ...4 1.1.1  桌面应用到 Web 应用，再回到桌面应用 ..............................................4 1.1.2  Node.js 桌面应用相比 Web 应用有什么优势 ........................................6 1.2  NW.js 和 Electron 的起源 ..................8 1.3  NW.js 介绍 ..........................................9 1.3.1  使用 NW.js 构建 Hello World 应用 .......................................................10 1.3.2  NW.js 有哪些特性................15 1.4  Electron 介绍 ....................................18 1.4.1  Electron 是如何工作的以及它和 NW.js 的区别是什么 ......................19 1.4.2  使用 Electron 开发 Hello World 应用 ....................................................19 1.4.3  Electron 有哪些特性 ............25 1.5  NW.js 和 Electron 支持创建哪类应用 ..............................................................25 1.5.1  Slack ......................................26 1.5.2  Light Table ............................26 1.5.3  Game Dev Tycoon .................27 1.5.4  Gitter......................................28 1.5.5  Macaw ...................................29 1.5.6  Hyper .....................................30 1.6  小结 ...................................................31第2章  为你的首款桌面应用搭建基础架构.32 2.1  我们将构建什么应用 .......................33 2.2  创建应用 ...........................................34 2.2.1  安装 NW.js 和 Electron ........34 2.2.2  为 NW.js 版本的应用创建文件和文件夹.............................................35 2.2.3  为 Electron 版本的应用创建文件和文件夹 .........................................37 2.3  实现启动界面 ...................................39 2.3.1  在工具条中展示用户个人文件夹信息 .................................................40 2.3.2  显示用户个人文件夹中的文件和文件夹 .............................................44 2.4  小结 ...................................................54第3章  构建你的首款桌面应用...................56 3.1  浏览文件夹 .......................................57 3.1.1  重构代码 ...............................57 3.1.2  处理对文件夹的双击操作 ...61 3.2  实现快速搜索 ...................................64 3.2.1  在工具条中增加搜索框 .......65 3.2.2  引入一个内存搜索库 ...........65 3.2.3  在界面上触发搜索功能 .......67 3.3  改进应用内的导航功能 ...................71 3.3.1  实现当前文件夹路径可单击 .................................................................71 3.3.2  让应用随着文件夹路径的改变显示对应的文件夹内容 .....................74 3.3.3  实现使用默认应用打开对应的文件 .....................................................75 3.4  小结 ...................................................77 第4章  分发你的首款桌面应用...................79 4.1  对应用进行与分发相关的设置 .......80 4.2  对要分发的应用进行打包 ...............83 4.2.1  使用一种 NW.js 的构建工具.................................................................83 4.2.2  使用一种 Electron的构建工具 .............................................................84 4.2.3  设置应用的图标 ...................85 4.3  在多个操作系统中测试应用 ...........91 4.3.1  Windows 操作系统 ...............91 4.3.2  Linux 操作系统 ....................92 4.3.3  Mac OS 系统.........................92 4.4  小结 ...................................................92第2部分  深度剖析第5章  在NW.js和Electron中使用Node.js..97 5.1  什么是 Node.js ..................................98 5.1.1  同步与异步 ...........................98 5.1.2  流是一等公民 .....................101 5.1.3  事件 .....................................105 5.1.4  模块 .....................................106 5.2  Node 包管理器 ...............................109 5.2.1  寻找应用需要的模块 .........109 5.2.2  使用 package.json记录安装的模块 ....................................................109 5.2.3  使用 npm 打包模块和应用 111 5.3  小结 ................................................. 114第6章  探索NW.js和Electron的内部机制 .115 6.1  NW.js 内部是如何工作的 .............. 116 6.1.1  使用同一个 V8 实例 .......... 117 6.1.2  集成主事件循环 ................. 118 6.1.3  桥接 Node.js 和 Chromium 的 JavaScript 上下文............................... 119 6.2  Electron 内部是如何工作的 .......... 119 6.2.1  libchromiumcontent 介绍 ...120 6.2.2  Electron 中的组件 ..............120 6.2.3  Electron 是如何将应用运行起来的 ....................................................121 6.3  Node.js是如何与NW.js以及Electron一起工作的 ...........................................122 6.3.1  Node.js 集成在 NW.js 的哪个位置......................................................122 6.3.2  在 NW.js中使用 Node.js 的缺点.........................................................123 6.3.3  Electron 是怎么使用 Node.js 的 ..........................................................123 6.4  小结 .................................................124第3部分  精通Node.js桌面应用开发第7章  自定义桌面应用的外观.................127 7.1  视窗的尺寸和模式 .........................127 7.1.1  配置 NW.js 应用的视窗尺寸...............................................................128 7.1.2  配置 Electron 应用的视窗尺寸 ...........................................................129 7.1.3  在 NW.js 中限制视窗的尺寸...............................................................131 7.1.4  在 Electron 中限制视窗的尺寸 ...........................................................133 7.2  无边框应用以及全屏应用 .............134 7.2.1  NW.js 中的全屏应用..........135 7.2.2  Electron 中的全屏应用 ......138 7.2.3  无边框应用 .........................140 7.2.4  kiosk 应用 ...........................145 7.3  小结 .................................................149第8章  创建托盘应用 ...............................150 8.1  使用 NW.js 创建简单的托盘应用 .151 8.2  使用 Electron 创建托盘应用 .........156 8.3  小结 .................................................159 第9章  创建应用菜单以及上下文菜单......161 9.1  为应用添加菜单 .............................162 9.1.1  应用视窗菜单 .....................162 9.1.2  使用 NW.js 为 Mac OS的应用创建菜单 ............................................162 9.1.3  使用 Electron 为 Mac OS的应用创建菜单 ........................................163 9.1.4  为 Windows 和 Linux的应用创建菜单 ..............................................166 9.1.5  基于操作系统来选择渲染具体的菜单 ...............................................173 9.2  上下文菜单 .....................................174 9.2.1  使用 NW.js 创建上下文菜单...............................................................174 9.2.2  NW.js 中的上下文菜单是如何工作的................................................179 9.2.3  设置菜单项图标 .................180 9.2.4  使用 Electron 创建上下文菜单 ...........................................................181 9.2.5  使用 Electron 添加上下文菜单 ...........................................................184 9.3  小结 .................................................185第10章  拖曳文件以及定制界面...............186 10.1  在应用中拖曳文件 .......................186 10.1.1  使用 NW.js 实现在应用中拖曳文件 ...............................................187 10.1.2  使用 Electron 实现拖曳功能 ...........................................................190 10.2  模拟操作系统原生样式 ...............191 10.2.1  检测用户的操作系统 .....191 10.2.2  使用 NW.js检测操作系统 ...............................................................191 10.2.3  使用 Electron检测操作系统 ...........................................................192 10.2.4  使用 CSS匹配用户操作系统的样式 .............................................194 10.3  小结 ...............................................197第11章  在应用中使用网络摄像头 ...........198 11.1  使用 HTML5 媒体捕捉 API 来实现相片快照..............................................198 11.1.1  解读 NW.js 版的应用 .....199 11.1.2  使用 Electron 构建 Facebomb 应用.................................................205 11.2  小结 ...............................................210 第12章  存储应用数据 .............................211 12.1  应该使用哪种数据存储方案 ....... 211 12.2  使用 localStorage API 存储便笺数据 ............................................................212 12.2.1  使用 Electron开发 Let Me Remember应用 ...................................213 12.2.2  使用 NW.js开发 Let Me Remember应用 ......................................216 12.3  将待办事项应用移植为桌面应用 .................................................................219 12.3.1  使用 NW.js 移植 TodoMVC Web 应用 ...........................................219 12.3.2  使用 Electron 移植 TodoMVC 应用 ................................................220 12.4  小结 ...............................................222第13章  从剪贴板复制和粘贴数据 ...........223 13.1  访问剪贴板数据 ...........................223 13.1.1  使用 NW.js 创建 Pearls 应用 ...........................................................224 13.1.2  使用 Electron 创建 Pearls 应用 .......................................................228 13.1.3  使用 Electron 将不同类型的数据写入剪贴板 ...............................231 13.2  小结 ...............................................232第14章  绑定键盘快捷键 .........................233 14.1  使用 NW.js 创建贪吃蛇游戏 .......234 14.1.1  使用 NW.js 在视窗获取焦点的时候实现键盘快捷键 ...................242 14.1.2  使用 NW.js 来创建全局键盘快捷键 ...............................................243 14.2  使用 Electron 为贪吃蛇游戏创建全局快捷键 .............................................245 14.3  小结 ...............................................247第15章  制作桌面通知 .............................248 15.1  关于你要构建的应用 ...................249 15.2  使用 Electron 构建 Watchy 应用 .249 15.3  使用 NW.js 构建 Watchy 应用 .....254 15.4  小结 ...............................................257 第4部分  准备发布第16章  测试桌面应用 .............................261 16.1  测试应用的不同方法 ...................262 16.1.1  测试驱动开发 .................262 16.1.2  行为驱动开发 .................264 16.1.3  不同层面的测试 .............265 16.2  单元测试 .......................................265 16.2.1  使用 Mocha 编写测试 ...266 16.2.2  让待完成的测试变成执行通过的测试 ...........................................268 16.3  功能测试 .......................................271 16.3.1  功能测试实践 .................272 16.3.2  使用 NW.js 和 ChromeDriver 进行测试 .........................................272 16.4  使用Spectron测试Electron应用 ...273 16.5  集成测试 .......................................275 16.5.1  Cucumber 介绍 ...............276 16.5.2  使用 Cucumber和 Spectron对 Electron应用进行自动化测试 ....277 16.6  小结 ...............................................280第17章  调试并提升应用性能 ..................281 17.1  了解你要调试的是什么 ...............282 17.1.1  确定问题根本原因的位置 ...............................................................283 17.1.2  使用浏览器开发者工具进行调试 ...................................................284 17.2  修复 bug ........................................287 17.2.1  使用 Node.js 的调试器来调试应用 ................................................288 17.2.2  使用 NW.js 的开发者工具来调试应用 ...........................................291 17.3  解决性能问题 ...............................296 17.3.1  Network选项卡 ..............296 17.3.2  Timeline选项卡 .............297 17.3.3  Pro.les选项卡 ...............299 17.4  调试 Electron 应用 .......................301 17.5  小结 ...............................................307 第18章  为多平台打包应用......................308 18.1  为应用创建可执行文件 ...............309 18.1.1  为 Windows 系统创建 NW.js 应用的可执行文件..........................309 18.1.2  安装虚拟机 .....................309 18.1.3  为一个 NW.js应用创建针对 Windows系统的 .exe文件 .............310 18.1.4  为一个 Electron 应用创建 Windows 系统的可执行文件 .............. 311 18.2  为 Windows 的应用创建启动安装器............................................................314 18.2.1  使用 NW.js 创建 Windows 系统启动安装器..................................314 18.2.2  使用 Electron创建 Windows系统启动安装器 ..............................321 18.3  为 Mac OS 创建 NW.js 应用的可执行文件 ..................................................324 18.3.1  创建 Mac 可执行应用 ...324 18.3.2  为 Mac OS 创建 Electron 应用的可执行文件 ................................327 18.4  为 Linux 创建可执行应用 ...........329 18.4.1  为 Linux 创建独立的 NW.js 应用文件 ...........................................330 18.4.2  为 Linux 创建独立的 Electron 应用文件 .......................................331 18.5  小结 ...............................................333附录A  安装 Node.js................................335