快速入门

优质

小牛编辑

136浏览

2023-12-01

Electron允许您使用JavaScript轻松创建桌面应用程序,并且可以调用丰富的操作系统级原生API.你可以把它当成Node.js变体,只不过它更专注于桌面应用而非Web服务器.
但这并不意味着Electron将JavaScript绑定到图形用户界面(GUI)库,恰恰相反,Electron使用网页作为其GUI,因此你可以将其当成由JavaScript控制的迷你精简版Chromium浏览器.

主进程

在 Electron中, 把 'package.json'中设定的 main 脚本的所在进程称为 主进程. 这个进程中运行的脚本也可通过创建网页这种方式来展现其GUI.

渲染进程

因为Electron是通过Chromium来显示页面,所以Chromium自带的多进程架构也一同被利用. 这样每个页面都运行着一个独立的进程,它们被统称为 渲染进程.
通常来说,浏览器中的网页会被限制在沙盒环境中运行并且不允许访问系统原生资源.但是由于Eelectron用户可在页面中调用Node.js API,所以可以和底层操作系统直接交互.

主进程与渲染进程的区别

主进程通过创建 BrowserWindow实例来创建网页.每个 BrowserWindow实例都在自己的渲染进程中运行页面. 一旦 BrowserWindow实例被销毁,相应的渲染进程也会被终止.
主进程管理着所有的页面及其对应的渲染进程.每个渲染进程是相互独立的,它只关心在其中运行的页面.
Electron 在页面中禁用了原生GUI相关的API,这是因为在页面中管理原生 GUI是非常危险并容易泄露资源.
不过,如果需要在页面中执行GUI操作,则页面所在的渲染进程必须与主进程通信并请求由主进程执行相关的 GUI 操作.
在Electron中,主进程和渲染进程有多种通信方式,如ipcRenderer 和 ipcMain模块可进行消息处理, remote 模块可进行 RPC 方式通信. 详情可参考FAQ章节中的如何在页面之间共享数据?.

打造您的第一个 Electron 应用

Electron应用的结构通常如下:
1
your-app/
2
├── package.json
3
├── main.js
4
└── index.html
Copied!

package.json文件格式和Node模块完全一致,其中main字段所标明的脚本即启动脚本,示例如下:
1
{
2
"name" : "your-app",
3
"version" : "0.1.0",
4
"main" : "main.js"
5
}
Copied!

注意: 如果 package.json中未标明main字段, Electron 将默认加载 index.js.
main.js 应该用于创建窗口与处理系统事件,例子如下:
1
const {app, BrowserWindow} = require('electron')
2
const path = require('path')
3
const url = require('url')
4

5
// 保持win对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
6
let win
7

8
function createWindow () {
9
//创建浏览器窗口
10
win = new BrowserWindow({width: 800, height: 600})
11

12
// 加载应用的 index.html
13
win.loadURL(url.format({
14
pathname: path.join(__dirname, 'index.html'),
15
protocol: 'file:',
16
slashes: true
17
}))
18

19
// 打开开发者工具
20
win.webContents.openDevTools()
21

22
// 关闭window时触发下列事件.
23
win.on('closed', () => {
24
// 取消引用 window 对象，通常如果应用支持多窗口，则会将
25
// 窗口存储在数组中,现在应该进行删除了.
26
win = null
27
})
28
}
29

30

31
// 当Electron完成初始化并准备创建浏览器窗口时调用此方法
32
// 部分 API 只能使用于 ready 事件触发后。
33
app.on('ready', createWindow)
34

35
// 所有窗口关闭时退出应用.
36
app.on('window-all-closed', () => {
37
// macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
38
if (process.platform !== 'darwin') {
39
app.quit()
40
}
41
})
42

43
app.on('activate', () => {
44
// macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
45
if (win === null) {
46
createWindow()
47
}
48
})
49

50
// 你可以在这个脚本中续写或者使用require引入独立的js文件.
Copied!

最后,你想展示的index.html 页面:
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="UTF-8">
5
<title>Hello World!</title>
6
</head>
7
<body>
8
<h1>Hello World!</h1>
9
We are using node <script>document.write(process.versions.node)</script>,
10
Chrome <script>document.write(process.versions.chrome)</script>,
11
and Electron <script>document.write(process.versions.electron)</script>.
12
</body>
13
</html>
Copied!

运行应用

当你已创建 main.js, index.html, 和 package.json 文件, 你可以按以下方式尝试在本地运行或测试.

`electron`

electron 是一个包含Electron预编译版本的 npm 模块,如果你已使用npm全局安装了它,那么你只需在应用所在目录执行以下命令:
1
electron .
Copied!

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

macOS / Linux

1
$ ./node_modules/.bin/electron .
Copied!

Windows

1
$ .\node_modules\.bin\electron .
Copied!

手动下载 Electron 二进制文件

如果您手动下载了Electron，您也可以使用随附的二进制文件直接运行应用.

macOS

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

Linux

1
$ ./electron/electron your-app/
Copied!

Windows

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

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

以发行版运行

在完成你的应用之后,请参照应用分发章节分发已封装的应用.

参考示例

复制和运行这个库:electron/electron-quick-start.
注意: 运行前确保系统已安装Git 和 Node.js (包括npm) .
1
# 克隆库
2
$ git clone https://github.com/electron/electron-quick-start
3
# 进入库
4
$ cd electron-quick-start
5
# 安装依赖项
6
$ npm install
7
# 运行应用
8
$ npm start
Copied!

更多的例子,请参考list of boilerplates.