Electron可以让你使用纯JavaScript创建桌面应用程序,它提供了一个包含丰富的原生(操作系统)API的运行时。你可以把它看作是一个Node.js运行时的变体,只不过它是专注于桌面应用程序而不是web服务器。

这并不是说Electron是一个操作图形用户界面(GUI)库的JavaScript工具,实际上,Electron使用网页作为它的GUI,因此你也可以把它看作是一个精简版的Chromium浏览器,通过JavaScript来控制。

主进程

在Electron中,运行package.json中的main脚本的进程叫作主进程(the main process)。主进程中运行的脚本可以通过创建网页来显示一个GUI界面。

渲染进程

由于Electron使用Chromium来显示网页,Chromium的多线程架构也用到了。Electron中的每一个网页都在一个独立的进程中运行,即渲染进程(the renderer process)。

在普通的浏览器中,网页通常是在一个沙箱环境中运行,不允许访问本地资源。不过使用Electron就可以在网页中利用Node.js的API来实现一些初级的操作系统交互。

主进程和渲染进程的区别

主进程通过创建BrowserWindow实例来生成网页,每个BrowserWindow实例在它自己的渲染进程中运行网页。当一个BrowserWindow实例销毁时,对应的渲染进程也被终止。

主进程管理所有的网页和它们相对应的渲染进程,每个渲染进程是独立的,只须关心在它上面运行的网页。

在网页中调用原生的GUI相关API是不允许的,因为在网页中管理原生GUI资源是十分危险的,很容易泄露资源。如果你想在网页中操作GUI,该网页的渲染进程必须要和主进程通信,请求在主进程上进行这些操作。

在Electron中,我们提供了ipc模块用来实现主进程和渲染进程之间的通信。另外还有一个remote模块用来做RPC类型的通信。

编写你的第一个Electron应用

通常一个Electron应用的结构类似这样:

1
2
3
4
your-app/
├── package.json
├── main.js
└── index.html

package.json的格式和Node模块完全一样,main字段指定的脚本就是你的应用的启动脚本,它会运行主进程。一个package.json可能类似这样:

1
2
3
4
5
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}

注意:如果package.json中没有指定main字段,Electron会尝试加载index.js

main.js需要创建窗口并且处理系统事件,一个典型的例子如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
'use strict';
const electron = require('electron');
const app = electron.app; // 控制应用生命周期的模块.
const BrowserWindow = electron.BrowserWindow; // 创建原生浏览器窗口的模块.
// 保存窗口对象的一个全局引用,如果你不这么做,当JavaScript对象被垃圾回收后窗口会自动关闭
var mainWindow = null;
// 当所有窗口关闭后退出应用
app.on('window-all-closed', function() {
// 在OSX通常会让应用和它的菜单栏保持激活直到用户使用Cmd+Q强制退出
if (process.platform != 'darwin') {
app.quit();
}
});
// 这个方法会在Electron完成初始化并准备好创建浏览器窗口时调用
app.on('ready', function() {
// 创建浏览器窗口
mainWindow = new BrowserWindow({width: 800, height: 600});
// 加载应用的index.html
mainWindow.loadURL('file://' + __dirname + '/index.html');
// 打开开发者工具(chromium的控制台)
mainWindow.webContents.openDevTools();
// 当窗口关闭时触发
mainWindow.on('closed', function() {
// 取消对窗口对象的引用,通常如果你的应用支持多窗口,你会将窗口存在一个数组里,这时候你应当删除对应的元素
mainWindow = null;
});
});

最后这个index.html就是你想要展现的网页:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>

运行你的应用

当你创建完最初的main.jsindex.htmlpackage.json文件,你肯定迫不及待想要在本地尝试跑一下你的应用,看看它是不是像预期那样的运行。

electron-prebuilt

如果你通过npm全局安装了electron-prebuilt,你只需要在你的应用目录下运行:

1
electron .

如果你是局部安装的,运行:

1
./node_modules/.bin/electron .

手动下载的Electron程序

如果你是手动下载的Electron,你也可以直接运行你的应用。

Windows

1
$ .\electron\electron.exe your-app\

Linux

1
$ ./electron/electron your-app/

OSX

1
$ ./Electron.app/Contents/MacOS/Electron your-app/

这里的Electron.app是Electron发行包中的一部分,你可以在这里下载。

发布应用

当你完成了应用的开发,你可以根据应用发布指南来创建一个发布,并执行打包程序。

尝试这个例子

atom/electron-quick-start下载并运行这个教程的代码。

注意:运行代码需要系统支持GitNode.js(含npm)。

1
2
3
4
5
6
# Clone the repository
$ git clone https://github.com/atom/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install dependencies and run the app
$ npm install && npm start

原文地址http://electron.atom.io/docs/latest/tutorial/quick-start/