简介
Electron 是 GitHub 发布的跨平台桌面应用开发工具,支持 Web 技术开发桌面应用,其本身是基于 C++ 开发的,GUI 核心来自于 Chrome,而 JavaScript 引擎使用 v8
下载electron
查看自己的node版本,并对照文档下载对应的electron版本和chromium
创建基本应用程序
mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron
创建main.js文件
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
<h1>Hello World!</h1>
<p>
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>.
</p>
</body>
</html>
修改package.json文件
{
"name": "my-electron-app",
"version": "0.1.0",
"description": "My Electron app",
"main": "main.js"
}
npm start
命令将以 Node.js 运行主脚本。 要使用 Electron 运行脚本,您需要将其更改为这样:
{
"name": "my-electron-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
然后运行
npm start
然后结果出来
将在桌面系统上看见这个图标,代表启动成功
Electron的组成和详细介绍
- 主进程 通过创建
浏览器窗口
实例来创建 个网页。 每一个浏览窗口
实例在其渲染过程中运行网页. 当一个BrowserWindow
实例被摧毁时,对应的渲染过程也被终止。 - 主进程 管理所有 个网页及其对应的渲染过程。
- 渲染进程 只能管理 个相应的网页。 在一个渲染过程中崩溃不会影响其他渲染过程。
- 渲染进程 通过IPC 与主进程通信 在网页上执行GUI操作。 由于安全考虑和可能的资源泄漏,直接从渲染器过程中调用与本地GUI有关的API受到限制。
APIs
EN
Electron API
Electron API是根据流程类型分配的。 这意味着某些模块可以从主程序或渲染程序中使用,有些模块可以从两者中使用。 Electron 的 API 文档指明了每个模块可以使用的过程。
例如,要在两个进程中访问 Electron API,需要它包含的模块:
const electron = require('electron')
复制
若要创建一个窗口,请调用 浏览窗口
类,只能在主进程中使用:
const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
复制
若要从渲染器调用主流程,请使用 IPC 模块:
// 在主进程中
const { ipcMain } = require('electron')
ipcMain.handle('exper-action', (evidence, ...args) =>
// ... 代表渲染器操作
})
复制
// 在渲染过程中
const { ipcRenderer } = require('electron')
ipcRender.invotrake('exper-action', ...args)
复制
注意:由于渲染过程可能会运行不受信任的代码(特别是第三方的代码), 重要的是要认真验证主要进程中提出的请求。
Node.js API
注意:要从渲染过程中访问Node.js API,您需要设置
nodeIntegration
选项为true
。
Electron 在主流程和渲染流程中显示对 Node.js API及其模块的完全访问权限。 例如,您可以从根目录读取所有文件:
const fs = require('fs')
const root = fs.readdirSync('/')
console.log(root)
复制
要使用Node.js模块,您首先需要安装它作为依赖:
npm install --save aws-sdk
复制
然后,在您的 Electron 应用程序中,需要模块:
const S3 = require('aws-sdk/clients/s3')