第16章.快速入門 · Electron中文文檔

# 第16章.快速入門 Electron 通過提供一個帶有富原生（操作系統） APIs的運行時，使你可以使用純 JavaScript 來創建桌面應用。你可以把它視為聚焦桌面應用而不是 web 服務的 Node.js 運行時的一個變體。這并不意味著 Electron 是一個 GUI 庫的 JavaScript 綁定。相反，Electron 使用 web 頁面作為它的 GUI，所以你可以把它看作成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。 ### 主進程在 Electron 中，運行 `package.json` 里 `main` 腳本的進程被稱為主進程。在主進程運行的腳本可以以通過創建 web 頁面顯示一個 GUI。 ### 渲染進程由于 Electron 使用 Chromium 來展示頁面，所以 Chromium 的多進程架構也被利用。每個 Electron 中的 web 頁面都在運行在它自己的進程中，這樣的進程我們稱之為渲染進程。在一般瀏覽器中，網頁通常會在沙盒環境下運行，并且不允許訪問原生資源。然而，Electron 用戶擁有在網頁中調用 Node.js 的 APIs 的能力，允許與底層操作系統進行交互。 ### 主進程和渲染進程間的區別主進程通過創建 `BrowserWindow` 實例創建頁面。每個 `BrowserWindow` 實例都在它自己的渲染進程里運行 web 頁面。當一個 `BrowserWindow` 實例被銷毀后，相應的渲染進程也會被終止。主進程管理所有頁面和與之對應的渲染進程。每個渲染進程都是相互獨立的，并且只關心它自己中運行的 web 頁面。由于在 web 頁面里管理原生 GUI 資源是非常危險而且容易造成資源泄露，所以在 web 頁面調用原生 GUI 相關的 APIs 是不被允許的。如果你想在 web 頁面里執行 GUI 操作，web 頁面的渲染進程必須與主進程進行通訊，請求主進程執行這些操作。在 Electron，我們提供幾種方法用于主進程和渲染進程之間的通訊。像 `ipcRenderer` 和 `ipcMain` 模塊用于發送消息， `remote` 模塊用于 RPC 式通訊。這些內容都可以在一個 FAQ 中查看【[如何在頁面中共享數據](http://electron.atom.io/docs/faq#how-to-share-data-between-web-pages)】。 ## 編寫你的第一個Electron 應用大體上，一個 Electron 應用的目錄結構如下： ```text your-app/ ├── package.json ├── main.js └── index.html ``` `package.json` 的格式和 Node 模塊的完全一致，并且那個被 `main` 字段指定的腳本是你應用的啟動腳本，它運行主進程。一個 `package.json` 的例子，如下： ```json { "name" : "your-app", "version" : "0.1.0", "main" : "main.js" } ``` **注意**：如果 `main` 字段沒有出現在 `package.json` 中， Electron 會嘗試加載一個 `index.js`。 `main.js` 應該創建窗口并處理系統事件，一個典型的例子如下： ```javascript const {app, BrowserWindow} = require('electron') const path = require('path') const url = require('url') // 保持一個 window 對象的全局引用，如果不這么做，window 會 // 在 JavaScript 對象被垃圾回收的時候自動關閉 let win function createWindow () { // 創建一個瀏覽器窗口 win = new BrowserWindow({width: 800, height: 600}) // 載入 app 的 index.html win.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) // 打開開發者工具 win.webContents.openDevTools() // 當 window 被關閉時觸發 win.on('closed', () => { // 取消 window 對象的引用，如果你的應用支持多窗口的話， // 通常你會把窗口保存到一個數組，這個時候 // 就是你可以從數組中刪除相應元素的時候 win = null }) } // 這個方法會在 Electron 完成初始化并準備好創建瀏覽器窗口的時候 // 被調用。 // 一些 APIs 只有在這個事件發生后才能使用 app.on('ready', createWindow) // 當所有窗口關閉后退出 app.on('window-all-closed', () => { // 在 macOS 上，這通常用于保持應用和它們的菜單欄 // 是活躍的，直到用戶使用 Cmd + Q 明確退出 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在 macOS 上，這通常用于在應用的 dock icon 被點擊并且沒有其它打開的窗口時， // 在用用中重新創建一個窗口 if (win === null) { createWindow() } }) // 在這個文件中，你可以包含其余你應用的主進程代碼。 // 也可以從單獨的文件中在這里 require 它們。 ``` 最后，是你想顯示的 web 頁面 `index.html` ： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html> ``` ## 運行你的 app 一旦你創建了初始的 `main.js`， `index.html` 和 `package.json` 這幾個文件，你可能會想嘗試在本地運行并測試，看看是不是如預期運行。 ### `electron` [`electron`](https://github.com/electron-userland/electron-prebuilt) 是一個 `npm` 模塊，包括了預編譯版本的 Electron。如果你已經用 npm 全局安裝了它，你只需要在你的 app 的資源目錄運行如下命令： ```bash electron . ``` 如果你是局部安裝的 `electron`，那么： #### macOS / Linux ```bash $ ./node_modules/.bin/electron . ``` #### Windows ```bash $ .\node_modules\.bin\electron . ``` ### 手動下載 Electron 二進制文件如果你手動下載了 Electron ，你也可以直接使用其中的二進制文件直接運行你的應用。 #### Windows ```bash $ .\electron\electron.exe your-app\ ``` #### Linux ```bash $ ./electron/electron your-app/ ``` #### macOS ```bash $ ./Electron.app/Contents/MacOS/Electron your-app/ ``` **注意：** 這里的`Electron.app` 是 Electron 的發行包的一部分，可以從 [這里](https://github.com/electron/electron/releases) 下載。 ### 以發行版本運行在你完成了你的應用編寫后，你可以按照【發行應用】的指導發布一個版本，然后運行打包好的 app。 ### 試試這個例子克隆并運行這個教程中的代碼，使用 [`electron/electron-quick-start`](https://github.com/electron/electron-quick-start) 代碼倉庫。 **注意**：要運行它，需要 [Git](https://git-scm.com) 和 [Node.js](https://nodejs.org/en/download/) （包括 [npm](https://npmjs.org)）已經正確安裝在你的系統上。 ```bash # Clone the repository $ git clone https://github.com/electron/electron-quick-start # Go into the repository $ cd electron-quick-start # Install dependencies $ npm install # Run the app $ npm start ``` 更多示例 apps，查看由 electron 社區創建的 [樣板列表](http://electron.atom.io/community/#boilerplates)。