最近入手 Electron，發(fā)現(xiàn)本文唱较，覺得很不錯天梧，分享給大家戚丸。
作者：JESSICA LOR
譯者：Xiaohu Zhu 朱小虎
原文地址：http://jlord.us/essential-electro
1. 什么是 Electron？
Electron 是一個可用于使用JavaScript裸违，HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的庫掖桦。這些應(yīng)用程序可以打包為在 Mac，Windows 和 Linux 計算機上運行供汛，也可以放置在 Mac 和 Windows 應(yīng)用程序商店中枪汪。
1.1 定義：
- JavaScript，HTML 和 CSS 是網(wǎng)絡(luò)語言怔昨，這意味著它們是網(wǎng)站的基礎(chǔ)雀久，而 Chrome 之類的瀏覽器知道如何將這些代碼轉(zhuǎn)換為您看到的視覺圖形。
- Electron 是一個庫 Electron 是可以復(fù)用而不必編寫自己的代碼趁舀。您可以使用它在其之上構(gòu)建項目赖捌。
- 基于 Electron 構(gòu)建的應(yīng)用
- Electron API 演示（請參閱對 Electron 可以做什么）
2 為什么這很重要？
通常矮烹，每個操作系統(tǒng)的桌面應(yīng)用程序均以各自的本地語言編寫越庇。這可能意味著要有三個團隊編寫您的應(yīng)用程序的三個版本罩锐。Electron 使您可以一次使用網(wǎng)絡(luò)語言編寫應(yīng)用程序。
2.1 定義：
- 本機（操作系統(tǒng)）語言這些是（主要）使用以下主要操作系統(tǒng)構(gòu)建的語言：Mac卤唉，Objective C涩惑；Linux，C桑驱；Windows竭恬，C ++。
3 怎么做熬的？
Electron 將 Chromium 和 Node.js 與一組自定義 API 結(jié)合在一起痊硕，以用于本機操作系統(tǒng)功能，例如打開文件對話框悦析，通知寿桨，圖標(biāo)等此衅。
3.1 定義：
- API 應(yīng)用程序接口描述了可供您使用庫的一組功能强戴。
- Chromium 由 Google 創(chuàng)建，這是 Google 瀏覽器 Chrome 使用的開源庫挡鞍。
- Node.js（或 Node）一種工具骑歹，用于在服務(wù)器上編寫 JavaScript，訪問文件系統(tǒng)和網(wǎng)絡(luò)（您的計算機也是服務(wù)器Ｄⅰ）道媚。
3.2 資源：
4 情況如何？
使用 Electron 進行開發(fā)就像構(gòu)建可以在其中無縫使用 Node
的網(wǎng)頁翘县，或者構(gòu)建可以在其中構(gòu)建 HTML 和 CSS 界面的 Node 應(yīng)用程序一樣最域。而你只需要設(shè)計一個瀏覽器，在最新的 Chrome锈麸。
4.1 定義：
- Use Node in 還不是全部镀脂！除了無處不在的完整 Node API 之外，您還可以利用 npm（Node 的軟件包管理器）上已編寫和托管的 300,000 多個模塊忘伞。
- 一個瀏覽器并非所有瀏覽器都是相同的薄翅，Web 設(shè)計人員和開發(fā)人員通常必須加倍努力才能使一個站點在每個站點上看起來都相同。
- 最新的 Chrome 使用 ES2015 的 90％ 以上氓奈，JavaScript 的最新更新以及 CSS 變量等出色功能翘魄。
4.2 資源：
5. 先決條件
由于 Electron 的兩個組件是網(wǎng)站和 JavaScript舀奶，因此在開始之前暑竟，您需要具備這兩個方面的經(jīng)驗。查看有關(guān) HTML育勺，CSS 和 JS 的一些教程光羞，然后在計算機上安裝Node绩鸣。
5.1 定義：
- 真實地說，學(xué)習(xí)制作網(wǎng)站和編寫 Node 并不是一朝一夕的事纱兑，但希望下面的鏈接可以幫助您入門呀闻。
5.2 資源：
- 安裝 Node（選擇 LTS 版本）
- NodeSchool教程（嘗試 learningyounode）
- JS for Cat（作者：Max Ogden）
- 學(xué)習(xí)編碼 HTML 和 CSS（Shay Howe 撰寫）
- CSS 技巧（學(xué)習(xí) CSS 最佳實踐和技巧）
- Mozilla 開發(fā)人員網(wǎng)絡(luò)（一個網(wǎng)站和 JavaScript 的詞典）
6 兩個過程
Electron 有兩種類型的過程：主過程和渲染器。有模塊上每一個或兩個過程的工作潜慎。主要過程更多地是在幕后捡多，而渲染器過程是應(yīng)用程序中的每個窗口。
6.1 定義：
-
模塊 Electron 的 API 根據(jù)其功能分組在一起铐炫。例如垒手，該
dialog模塊具有用于本機對話框的所有 API，例如打開文件倒信，保存文件和警報科贬。
6.2 資源：
7. 主進程 Main process
主進程（通常是一個名為的文件 main.js）是每個 Electron 應(yīng)用程序的入口點。它控制著應(yīng)用的壽命鳖悠，從打開到關(guān)閉榜掌。它還會調(diào)用本機元素，并在應(yīng)用程序中創(chuàng)建每個新的渲染器進程乘综。內(nèi)置了完整的 Node API憎账。
7.1 定義：
- 調(diào)用本機元素打開對話框和其他本機操作系統(tǒng)的交互會占用大量資源，因此它是在主進程中完成的卡辰，而渲染器進程不會中斷胞皱。
7.2 資源：
8 渲染器進程
渲染器進程是您應(yīng)用中的瀏覽器窗口。與主進程不同九妈，這些流程可以有多個反砌，并且每個進程都是獨立的。它們也可以被隱藏萌朱。通常以一個命名 index.html宴树。它們就像典型的 HTML 文件一樣，但是在 Electron 中嚷兔，與任何 Web 瀏覽器不同森渐，您在這里也可以使用整個 Node API。
8.1 定義：
- 每個渲染器進程都是獨立的冒晰，每個渲染器進程都是一個單獨的進程同衣，這意味著一個崩潰不會影響另一個。
- 隱藏您可以將窗口設(shè)置為隱藏壶运，并使用它僅在后臺執(zhí)行代碼耐齐。
8.2 資源：
9 像這樣
在 Chrome（或其他網(wǎng)絡(luò)瀏覽器）中，每個選項卡及其網(wǎng)頁都類似于 Electron 中的單個渲染器進程。如果您關(guān)閉所有標(biāo)簽頁埠况，則 Chrome 仍然存在耸携，就像您的主進程一樣，您可以打開新窗口或退出應(yīng)用程序辕翰。
9.1 資源：
10 保持聯(lián)系
主進程和渲染器進程需要能夠通信夺衍，因為它們都負責(zé)不同的任務(wù)。為此喜命，有 IPC沟沙，進程間通信。使用它在主進程和渲染器進程之間傳遞消息壁榕。
10.1 定義：
- IPC主進程和渲染器進程每個都有要使用的 IPC 模塊矛紫。
11 放在一起
Electron 應(yīng)用程序類似于節(jié)點應(yīng)用程序，并使用一個 package.json 文件牌里。您可以在其中定義哪個文件是您的主進程颊咬，從而定義 Electron 在哪里啟動您的應(yīng)用程序。然后牡辽，該主進程可以創(chuàng)建渲染器進程喳篇，您將使用 IPC 在兩者之間傳遞消息。
11.1 定義：
-
package.json文件這是 Node 應(yīng)用程序中的常見文件催享，其中包含有關(guān)項目的元數(shù)據(jù)和依賴項列表杭隙。
12 快速開始
該 Electron 快速啟動庫是一個最基本的 Electron 應(yīng)用與 package.json哟绊，main.js 并且 index.html 您已經(jīng)了解了這里因妙，一個上手偉大的地方！另外票髓，請根據(jù)您選擇的框架查看樣板中的模板攀涵。
12.1 資源：
13 打包
構(gòu)建應(yīng)用后，您可以將其與適用于 Mac洽沟，Windows 或 Linux 的命令行工具 打包在一起 electron-packager以故。為此添加腳本 package.json。請查看以下資源裆操，以在 Mac 和 Windows 應(yīng)用商店中獲取您的應(yīng)用怒详。
13.1 定義：
- 命令行工具 這是一個程序，您可以通過在終端中向其傳遞命令來與之交互踪区。
13.2 資源：
謝謝閱讀
