跨平臺桌面應(yīng)用開發(fā)：基于Electron與NW.js

第1部分　歡迎來到 Node．js 桌面應(yīng)用開發(fā)的世界
第1章　Electron和NW．js入門 3
1．1　為什么要用 Node．js 構(gòu)建桌面應(yīng)用 4
1．1．1　桌面應(yīng)用到 Web 應(yīng)用，再回到桌面應(yīng)用 4
1．1．2　Node．js 桌面應(yīng)用相比 Web 應(yīng)用有什么優(yōu)勢 6
1．2　NW．js 和 Electron 的起源 8
1．3　NW．js 介紹 9
1．3．1　使用 NW．js 構(gòu)建 Hello World 應(yīng)用 10
1．3．2　NW．js 有哪些特性 15
1．4　Electron 介紹 18
1．4．1　Electron 是如何工作的以及它和 NW．js 的區(qū)別是什么 19
1．4．2　使用 Electron 開發(fā) Hello World 應(yīng)用 19
1．4．3　Electron 有哪些特性 25
1．5　NW．js 和 Electron 支持創(chuàng)建哪類應(yīng)用 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　小結(jié) 31
第2章　為你的首款桌面應(yīng)用搭建基礎(chǔ)架構(gòu)．32
2．1　我們將構(gòu)建什么應(yīng)用 33
2．2　創(chuàng)建應(yīng)用 34
2．2．1　安裝 NW．js 和 Electron 34
2．2．2　為 NW．js 版本的應(yīng)用創(chuàng)建文件和文件夾 35
2．2．3　為 Electron 版本的應(yīng)用創(chuàng)建文件和文件夾 37
2．3　實現(xiàn)啟動界面 39
2．3．1　在工具條中展示用戶個人文件夾信息 40
2．3．2　顯示用戶個人文件夾中的文件和文件夾 44
2．4　小結(jié) 54
第3章　構(gòu)建你的首款桌面應(yīng)用 56
3．1　瀏覽文件夾 57
3．1．1　重構(gòu)代碼 57
3．1．2　處理對文件夾的雙擊操作 61
3．2　實現(xiàn)快速搜索 64
3．2．1　在工具條中增加搜索框 65
3．2．2　引入一個內(nèi)存搜索庫 65
3．2．3　在界面上觸發(fā)搜索功能 67
3．3　改進(jìn)應(yīng)用內(nèi)的導(dǎo)航功能 71
3．3．1　實現(xiàn)當(dāng)前文件夾路徑可單擊 71
3．3．2　讓應(yīng)用隨著文件夾路徑的改變顯示對應(yīng)的文件夾內(nèi)容 74
3．3．3　實現(xiàn)使用默認(rèn)應(yīng)用打開對應(yīng)的文件 75
3．4　小結(jié) 77
第4章　分發(fā)你的首款桌面應(yīng)用 79
4．1　對應(yīng)用進(jìn)行與分發(fā)相關(guān)的設(shè)置 80
4．2　對要分發(fā)的應(yīng)用進(jìn)行打包 83
4．2．1　使用一種 NW．js 的構(gòu)建工具 83
4．2．2　使用一種 Electron的構(gòu)建工具 84
4．2．3　設(shè)置應(yīng)用的圖標(biāo) 85
4．3　在多個操作系統(tǒng)中測試應(yīng)用 91
4．3．1　Windows 操作系統(tǒng) 91
4．3．2　Linux 操作系統(tǒng) 92
4．3．3　Mac OS 系統(tǒng) 92
4．4　小結(jié) 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　尋找應(yīng)用需要的模塊 109
5．2．2　使用 package．json記錄安裝的模塊 109
5．2．3　使用 npm 打包模塊和應(yīng)用 111
5．3　小結(jié) 114
第6章　探索NW．js和Electron的內(nèi)部機(jī)制 115
6．1　NW．js 內(nèi)部是如何工作的 116
6．1．1　使用同一個 V8 實例 117
6．1．2　集成主事件循環(huán) 118
6．1．3　橋接 Node．js 和 Chromium 的 JavaScript 上下文 119
6．2　Electron 內(nèi)部是如何工作的 119
6．2．1　libchromiumcontent 介紹 120
6．2．2　Electron 中的組件 120
6．2．3　Electron 是如何將應(yīng)用運行起來的 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　小結(jié) 124
第3部分　精通Node．js桌面應(yīng)用開發(fā)
第7章　自定義桌面應(yīng)用的外觀 127
7．1　視窗的尺寸和模式 127
7．1．1　配置 NW．js 應(yīng)用的視窗尺寸 128
7．1．2　配置 Electron 應(yīng)用的視窗尺寸 129
7．1．3　在 NW．js 中限制視窗的尺寸 131
7．1．4　在 Electron 中限制視窗的尺寸 133
7．2　無邊框應(yīng)用以及全屏應(yīng)用 134
7．2．1　NW．js 中的全屏應(yīng)用 135
7．2．2　Electron 中的全屏應(yīng)用 138
7．2．3　無邊框應(yīng)用 140
7．2．4　kiosk 應(yīng)用 145
7．3　小結(jié) 149
第8章　創(chuàng)建托盤應(yīng)用 150
8．1　使用 NW．js 創(chuàng)建簡單的托盤應(yīng)用 151
8．2　使用 Electron 創(chuàng)建托盤應(yīng)用 156
8．3　小結(jié) 159
第9章　創(chuàng)建應(yīng)用菜單以及上下文菜單 161
9．1　為應(yīng)用添加菜單 162
9．1．1　應(yīng)用視窗菜單 162
9．1．2　使用 NW．js 為 Mac OS的應(yīng)用創(chuàng)建菜單 162
9．1．3　使用 Electron 為 Mac OS的應(yīng)用創(chuàng)建菜單 163
9．1．4　為 Windows 和 Linux的應(yīng)用創(chuàng)建菜單 166
9．1．5　基于操作系統(tǒng)來選擇渲染具體的菜單 173
9．2　上下文菜單 174
9．2．1　使用 NW．js 創(chuàng)建上下文菜單 174
9．2．2　NW．js 中的上下文菜單是如何工作的 179
9．2．3　設(shè)置菜單項圖標(biāo) 180
9．2．4　使用 Electron 創(chuàng)建上下文菜單 181
9．2．5　使用 Electron 添加上下文菜單 184
9．3　小結(jié) 185
第10章　拖曳文件以及定制界面 186
10．1　在應(yīng)用中拖曳文件 186
10．1．1　使用 NW．js 實現(xiàn)在應(yīng)用中拖曳文件 187
10．1．2　使用 Electron 實現(xiàn)拖曳功能 190
10．2　模擬操作系統(tǒng)原生樣式 191
10．2．1　檢測用戶的操作系統(tǒng) 191
10．2．2　使用 NW．js檢測操作系統(tǒng) 191
10．2．3　使用 Electron檢測操作系統(tǒng) 192
10．2．4　使用 CSS匹配用戶操作系統(tǒng)的樣式 194
10．3　小結(jié) 197
第11章　在應(yīng)用中使用網(wǎng)絡(luò)攝像頭 198
11．1　使用 HTML5 媒體捕捉 API 來實現(xiàn)相片快照 198
11．1．1　解讀 NW．js 版的應(yīng)用 199
11．1．2　使用 Electron 構(gòu)建 Facebomb 應(yīng)用 205
11．2　小結(jié) 210
第12章　存儲應(yīng)用數(shù)據(jù) 211
12．1　應(yīng)該使用哪種數(shù)據(jù)存儲方案 211
12．2　使用 localStorage API 存儲便箋數(shù)據(jù) 212
12．2．1　使用 Electron開發(fā) Let Me Remember應(yīng)用 213
12．2．2　使用 NW．js開發(fā) Let Me Remember應(yīng)用 216
12．3　將待辦事項應(yīng)用移植為桌面應(yīng)用 219
12．3．1　使用 NW．js 移植 TodoMVC Web 應(yīng)用 219
12．3．2　使用 Electron 移植 TodoMVC 應(yīng)用 220
12．4　小結(jié) 222
第13章　從剪貼板復(fù)制和粘貼數(shù)據(jù) 223
13．1　訪問剪貼板數(shù)據(jù) 223
13．1．1　使用 NW．js 創(chuàng)建 Pearls 應(yīng)用 224
13．1．2　使用 Electron 創(chuàng)建 Pearls 應(yīng)用 228
13．1．3　使用 Electron 將不同類型的數(shù)據(jù)寫入剪貼板 231
13．2　小結(jié) 232
第14章　綁定鍵盤快捷鍵 233
14．1　使用 NW．js 創(chuàng)建貪吃蛇游戲 234
14．1．1　使用 NW．js 在視窗獲取焦點的時候?qū)崿F(xiàn)鍵盤快捷鍵 242
14．1．2　使用 NW．js 來創(chuàng)建全局鍵盤快捷鍵 243
14．2　使用 Electron 為貪吃蛇游戲創(chuàng)建全局快捷鍵 245
14．3　小結(jié) 247
第15章　制作桌面通知 248
15．1　關(guān)于你要構(gòu)建的應(yīng)用 249
15．2　使用 Electron 構(gòu)建 Watchy 應(yīng)用 249
15．3　使用 NW．js 構(gòu)建 Watchy 應(yīng)用 254
15．4　小結(jié) 257
第4部分　準(zhǔn)備發(fā)布
第16章　測試桌面應(yīng)用 261
16．1　測試應(yīng)用的不同方法 262
16．1．1　測試驅(qū)動開發(fā) 262
16．1．2　行為驅(qū)動開發(fā) 264
16．1．3　不同層面的測試 265
16．2　單元測試 265
16．2．1　使用 Mocha 編寫測試 266
16．2．2　讓待完成的測試變成執(zhí)行通過的測試 268
16．3　功能測試 271
16．3．1　功能測試實踐 272
16．3．2　使用 NW．js 和 ChromeDriver 進(jìn)行測試 272
16．4　使用Spectron測試Electron應(yīng)用 273
16．5　集成測試 275
16．5．1　Cucumber 介紹 276
16．5．2　使用 Cucumber和 Spectron對 Electron應(yīng)用進(jìn)行自動化測試 277
16．6　小結(jié) 280
第17章　調(diào)試并提升應(yīng)用性能 281
17．1　了解你要調(diào)試的是什么 282
17．1．1　確定問題根本原因的位置 283
17．1．2　使用瀏覽器開發(fā)者工具進(jìn)行調(diào)試 284
17．2　修復(fù) bug 287
17．2．1　使用 Node．js 的調(diào)試器來調(diào)試應(yīng)用 288
17．2．2　使用 NW．js 的開發(fā)者工具來調(diào)試應(yīng)用 291
17．3　解決性能問題 296
17．3．1　Network選項卡 296
17．3．2　Timeline選項卡 297
17．3．3　Pro．les選項卡 299
17．4　調(diào)試 Electron 應(yīng)用 301
17．5　小結(jié) 307
第18章　為多平臺打包應(yīng)用 308
18．1　為應(yīng)用創(chuàng)建可執(zhí)行文件 309
18．1．1　為 Windows 系統(tǒng)創(chuàng)建 NW．js 應(yīng)用的可執(zhí)行文件 309
18．1．2　安裝虛擬機(jī) 309
18．1．3　為一個 NW．js應(yīng)用創(chuàng)建針對 Windows系統(tǒng)的 exe文件 310
18．1．4　為一個 Electron 應(yīng)用創(chuàng)建 Windows 系統(tǒng)的可執(zhí)行文件 311
18．2　為 Windows 的應(yīng)用創(chuàng)建啟動安裝器 314
18．2．1　使用 NW．js 創(chuàng)建 Windows 系統(tǒng)啟動安裝器 314
18．2．2　使用 Electron創(chuàng)建 Windows系統(tǒng)啟動安裝器 321
18．3　為 Mac OS 創(chuàng)建 NW．js 應(yīng)用的可執(zhí)行文件 324
18．3．1　創(chuàng)建 Mac 可執(zhí)行應(yīng)用 324
18．3．2　為 Mac OS 創(chuàng)建 Electron 應(yīng)用的可執(zhí)行文件 327
18．4　為 Linux 創(chuàng)建可執(zhí)行應(yīng)用 329
18．4．1　為 Linux 創(chuàng)建獨立的 NW．js 應(yīng)用文件 330
18．4．2　為 Linux 創(chuàng)建獨立的 Electron 應(yīng)用文件 331
18．5　小結(jié) 333
附錄A　安裝 Node．js 335