Electron.js - 学习记录

Posted by 陈陈君 on 2020-12-03
Estimated Reading Time 4 Minutes
Words 940 In Total
Viewed Times

Electron.js 是一个跨平台的 JavaScript 桌面应用开发框架。可用 HTML + CSS + JavaScript 的方式来开发系统桌面应用。不仅易用,而且对多平台的支持也非常不错。如果你厌倦了用 C# 和 C++ 或者苹果的(swift)来构建桌面应用,不妨可以试试下这个 JavaScript 框架。

对这框架使用前需要安装 Node.js 和 Git ,可以到官网 https://nodejs.org/zh-cnhttps://git-scm.com 来获取。

在学这个框架之前只需要会 前端三件套(HTML,CSS,JavaScript)即可。同时为了方便编程 和 Debug。可以去下载 VSCode 来作为开发主要工具。

安装完 Node.js 和 Git 并配置环境变量后(为了更方便的从任意目录调用)使用命令

1
git clone https://github.com/electron/electron-quick-start

可以从 GitHub 上克隆一个 Electron.js 的 Hello World 项目。随后,再使用命令

1
npm install

下载安装 Electron.js 的相关依赖。这个时间不会很长,(如果是的话)你可以设置 npm 的镜像源。以提高你下载安装的速度。

有关镜像源:

淘宝 https://npm.taobao.org/mirrors/npm/
设置源的 npm 命令:

1
npm install 包名 --registry=镜像库地址

运行 Electron 项目

当项目克隆和安装相关依赖后,可以使用 npm start 命令来运行 Electron 项目。

1

开发工具及Debug

接下来我们可以准备一个方便开发的工具 Vscdoe 并且为其配置 Electron.js 的开发环境。有关 Vscode,可以前往官网 https://code.visualstudio.com 获取。

如果已经安装 Vscode,我们可以接下来在 Electron 项目目录下新建一个名为 .vscode 的文件夹。并在里面自行新建一个配置文件 launch.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"args": [
"."
],
"outputCapture": "std"
}
]
}

回到 Vscode ,我们就可以直接通过这里来运行 Electron 项目,从而不需要命令行的繁琐步骤。

2

在运行的程序中的此菜单栏里找到 开发者工具 以用于 Debug 。

3

创建基本Electron应用的另一种方法

从开发的角度来看,Electron应用基本上是一种Node.js应用。可以使用 npm 直接进行 构建。
1.创建 json

1
2
npm init -y
npm i --save-dev electron

2.创建脚本 index.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
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()
}
})

3.创建 index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>

4.根据个人更改 package.json 文件信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"name": "项目名",
"version": "版本号",
"description": "公司",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"keywords": [关键字],
"author": "作者",
"license": "许可",
"devDependencies": {
"electron": "electron版本"
}
}

打包 Electron 应用

当项目完成时,可以使用 Electron Forge 来打包。键入以下命令来导入 Electron Forge。

1
npx @electron-forge/cli import

导入 Electron Forge 后键入命令

1
npm run make

进行应用打包工作。最后,输出 out 文件夹,里面即是打包出来的软件。

Electron.js 工程主要文件结构

结构 说明
node_modules 依赖文件
index.html 页面
index.js 脚本
package.json 工程信息