第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)。