介绍

使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序

  • 基于 Chromium 和 Node.js
  • 让你可以使用 HTML, CSS 和 JavaScript 构建应用
  • 开源
  • 跨平台(Windows、Mac、Linux)

Atom、Postman、Notion、Vscode等都是用Electron开发的

快速上手

手动

1.创建文件并初始化

1
2
mkdir Hello-world && cd Hello-world
npm init -y

记得修改入口文件,并在根目录创建入口文件 main.js

1
2
3
4
5
6
// package.json
{
...
"main": "main.js",
...
}

2.安装electron依赖

1
npm install --save-dev electron

3.在package.json配置文件中的scripts字段下增加一条start命令

1
2
3
4
5
6
// package.json
{
"scripts": {
"start": "electron ."
}
}

4.运行

1
npm start

5.空白是因为并没有任何内容,写个 HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- index.html -->
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>

<body>
<h1>Hello World!</h1>
<p>Welcome to your Electron application.</p>
</body>

</html>

6.修改主入口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
// 在文件头部引入 Node.js 中的 path 模块const path = require('path')

// app:控制应用程序事件生命周期的模块// BrowserWindow:创建和管理应用程序窗口模块const { app, BrowserWindow } = require('electron')

function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
},
});

mainWindow.loadFile("index.html");

// 打开开发工具
mainWindow.webContents.openDevTools();
}

// 在 Electron 中,只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口// 类似vue 的生命周期 将会在 Electron 结束后初始化
app.whenReady().then(() => {
createWindow();

// Mac 逻辑 关闭只是隐藏 command + Q 才完全退出
app.on("activate", function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});

// Windows 和 linux 关闭窗口会完全退出窗口
app.on("window-all-closed", function () {
if (process.platform !== "darwin") app.quit();
});

脚手架

1
2
3
4
5
6
7
8
# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
cd electron-quick-start

# 安装依赖并运行
npm install && npm start

如果安装过慢可以设置淘宝源

最新淘宝源地址:

1
2
3
4
5
# Npm 设置淘宝源
npm config set registry https://registry.npmmirror.com/

# 检查是否修改成功
npm config get registry

使用淘宝源运行时如果提示这个错误

地址问题

1
throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')

则设置electron 镜像源地址

1
npm config set electron_mirror https://cdn.npm.taobao.org/dist/electron/

打包

注意:图标格式 Windows 下使用的 icon.ico Mac 使用的是 icon.icns

使用electron-forge

安装

1
2
npm install --save-dev @electron-forge/cli
npx electron-forge import

使用

1
npm run make

打包参数配置 package.json文件里的config => forge => packagerConfig

使用electron-packager

安装

1
npm install --save-dev electron-packager

使用

1
npx electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

具体参数:https://github.com/electron/electron-packager

将网站直接生成桌面应用

用上面手动或者脚手架的方式创建初始化文件

修改 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const { app, BrowserWindow, Menu } = require("electron");

function createWindow() {
const win = new BrowserWindow({
autoHideMenuBar: true,
show: false, // 是否显示窗口,否后,通过对象.show()打开
fullscreen: false,
});

/**
* 优化加载方式 当页面在窗口中直接加载时,用户会看到未完成的页面,
* 这不是一个好的原生应用的体验,使用此事件后显示窗口将没有视觉闪烁
*/
win.on("ready-to-show", () => {
win.show();
});
//生成调试工具栏
// win.webContents.openDevTools()
// 窗口最大化
win.maximize();
// 加载远程URL(网址)
win.loadURL("https://www.iyouhun.com/");
// 设置菜单栏
const template = [
{
label: "文件",
submenu: [
{
label: "关于",
role: "about",
},
{
label: "关闭",
accelerator: "Command+Q",
click: () => {
win.close();
},
},
],
},
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
}

app.on("ready", createWindow);

// Windows 和 linux 关闭窗口会完全退出窗口
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});

app.on("activate", () => {
// Mac 逻辑
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});

Electron的优缺点

优点

  • 原生的接口(菜单、消息提醒、系统托盘等)。
  • 上手难度低,能够使用react、vue等前端框架,能方便地迁移前端组件,构建出漂亮的桌面应用。
  • 方便热更新
  • 调试和测试方便
  • Electron使用node.js。因此,您可以导入Chrome应用程序中不容易使用的许多模块
  • Electron文档要好得多

缺点

  • 不适合开发轻量级的应用。即使一个electron的项目框架,也包含chromium内核。
  • 相比c++开发的桌面应用,性能远远不如后者。
  • 启动速度慢。
  • 每个窗口都是一个新的进程,占据大量内存。

Electron和 PWA

  • 可用性

    • Electron 不能安装在任何设备
    • PWA 只要有网有浏览器记性,甚至不需要网络
  • 性能

    • PWA具有更好性能,使用 Service Worker,减少加载时间
  • 占用空间

    • Electron包过大,毕竟每个包都包含了包含chromium内核
  • 安全性

    • Electron包不加任何混淆加密的话是完全可读的,因为存放在本地
    • PWA存放在服务端且只能通过HTTPS传输
  • 更新和集成

    • 两者都可以做到服务端异步更新
  • 交互

    • Electron可以调用原生的接口

Electron和Flutter

  • 上手难度

    • Electron:会基础的HTML、CSS、JS即可
    • Flutter:需学习Dart语言
  • 侧重点

    • Electron更偏向PC端应用
    • Flutter更偏向移动端应用