Electron 学习文档
快速上手
Electron可以提供丰富的操作系统接口,使用户利用纯JavaScript来创建桌面应用。Electron可以看做是Node.js的一种桌面应用的运行,而非网页服务。
Electron并不是捆绑了图形用户界面(GUI)的JavaScript程序。相反,Electron利用网页作为GUI,可以看做是由JavaScript控制的精简Chromium浏览器。
主进程
在Electron中,运行package.json
中main
的脚本的程序叫做主进程。主进程运行的脚本可通过创建网页展示GUI。
渲染进程
Electron使用Chromium展示网页,同时Chromium的多进程架构也被使用。每个运行在Electron的网页都有独立的进程,即渲染进程。
在主流浏览器中,网页通常运行在沙箱(sandbox)环境中,不允许连接原生资源。然而,Electron使用者可以在网页内利用Node.js的接口允许低水平的操作系统交互。
主进程与渲染进程的区别
主进程通过创建BrowserWindow
实例来创建网页。每个BrowserWindow
实例都在自己的渲染进程中运行网页。当一个BrowserWindow
实例被破坏,对应的的渲染进程也会中断。
主进程管理所有的网页和网页对应的渲染进程。每个渲染进程都是独立工作的,只关心运行在其中的网页,与其他渲染进程毫无关联。
由于在网页中管理原生GUI资源很危险,并且会造成资源泄露,所以不允许调用原生GUI相关的接口。如果想要在一个网页内执行GUI操作,必须以利用网页的渲染进程连接主进程,请求让主进程执行GUI操作的方式执行。
Electron有几种方式实现渲染进程与主进程的连接。例如ipcRenderer
和[ipcMain
][4]用来发送消息,remote模块可以实现RPC通信。还有一个常见问题:[如何实现网页间的数据共享][6]。
创建你的第一个Electron应用
通常,一个Electron应用的结构如下:
your-app/
├── package.json
├── main.js
└── index.html
实际上package.json
的格式与Node的模块相同,main
指定的是应用的启动脚本,即主进程。一个package.json
例子如下:
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
注意:如果package.json
中main
没有指定脚本,Electron则会尝试加载index.js
文件。
main.js
用来创建窗口和处理事件,例如:
const {app, BrowserWindow} = require('electron')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL(`file://${__dirname}/index.html`)
// Open the DevTools.
win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
index.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>
运行程序
创建好初始化文件package.json
、main.js
和index.html
就可以启动程序了。
electron-prebuilt
electron-prebuilt
是一个包含了Electron预编译版本的npm模块。
国内可使用淘宝镜像全局安装,-g
为全局选项:
sudo ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install -g electron-prebuilt
若失败可去掉全局选项-g
运行,运行后再执行全局安装命令即可成功:
sudo ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install electron-prebuilt
sudo ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm -g install electron-prebuilt
全局安装后即可在项目目录下启动程序:
electron .
局域安装用以下命令启动:
./node_modules/.bin/electron .
通常npm
安装目录为/usr/local/bin
,则上述命令为:
/usr/local/bin/electron .
手动下载Electron版本文件
可以用下载的Electron版本文件执行程序。
Windows
\electron\electron.exe your-app\
Linux
./electron/electron your-app/
macOS
./Electron.app/Contents/MacOS/Electron your-app/
Electron.app
即为Electron版本文件,点击下载。
可通过淘宝npm镜像下载。
作为发布版本运行
完成应用后,可按照http://electron.atom.io/docs/tutorial/application-distribution“>发布应用创建发布版本,并执行打包的应用。
实例
克隆并运行[electron/electron-quick-start][11]版本库。
注意:需要系统装有Git和Node.js (内置npm)。
# Clone the repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install dependencies and run the app
$ npm install && npm start
获取更多实例,可查看由牛逼的Electron社区创建的样本列表。
本文为原创文章,转载请写明出处,谢谢。