跨平台桌面應用開發：基於Electron與NW.js

本書是一本同時介紹 Electron和 NW.js的圖書，這兩者是目前流行的支持使用 HTML、CSS 和 JavaScript進行桌面應用開發的框架。

書中包含大量的編碼示例，而且每個示例都是五臟俱全的實用應用，作者對示例中的關鍵代碼都做了非常詳細的解釋和說明，可讓讀者通過實際的編碼體會使用這兩款框架開發桌面應用的切實感受。

除此之外，在內容上，本書非常系統，分為４大部分：

第1部分介紹兩個框架的歷史背景，並教大家編寫個桌面應用，讓讀者對這兩個框架有一個初步的感受；

第2部分深入講解 NW.js和 Electron 的內部工作原理，幫助大家剖析這兩個框架的底層機制，讓讀者對它們有更深入的理解；

第3部分介紹使用框架提供的大量 API 來構建多款實用的桌面應用，全方位地讓讀者體會使用這兩個框架開發桌面應用帶來的舒適體驗；

第4部分為大家講解了，當開發完成后，如何對應用進行測試、跨平台打包和發布。可以說這4部分結合起來將開發桌面應用的整個流程系統化地講解得非常清楚、到位。

相信結合書中大量的示例，讀者一定能很快掌握並自己使用 Electron和 NW.js構建出跨平台的桌面應用。

第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