Electron基本介绍
Electron基本介绍
Electron是一个使用前端技术（HTML、CSS、JS）来开发桌面应用的框架。
什么是桌面应用？
顾名思义，就是需要安装包安装到电脑上的应用程序，常见的桌面应用：QQ、视频播放器、浏览器、VSCode
桌面应用的特点：
- 平台依赖性
- 需要本地安装
- 可以是瘦客户端，也可以是厚客户端
- 所谓的瘦客户端，指的是严重依赖于服务器，离线状态下没办法使用（QQ、浏览器）
- 厚客户端刚好相反，并不严重依赖服务器，离线状态下也可以使用（视频播放器、VSCode）
- 更新和维护：需要用户重新下载和安装新的版本
在早期的时候，要开发一个桌面应用，能够选择的技术框架并不多：
- Qt
- GTK
- wxWidgets
这三个框架都是基于 C/C++ 语言的，因此就要求开发者也需要掌握 C/C++ 语言，对于咱们前端开发人员来讲，早期是无法涉足于桌面应用的开发的。
StackOverflow 联合创始人 Jeff 说：
凡是能够使用 JavaScript 来书写的应用，最终都必将使用 JavaScript 来实现。
使用前端技术开发桌面应用相关的框架实际上有两个：
- NW.js
- Electron
这两个框架都与中国开发者有极深的渊源。
2011 年左右，中国英特尔开源技术中心的王文睿（Roger Wang）希望能用 Node.js 来操作 WebKit，而创建了 node-webkit 项目，这就是 Nw.js 的前身，但当时的目的并不是用来开发桌面 GUI 应用。
中国英特尔开源技术中心大力支持了这个项目，不仅允许王文睿分出一部分精力来做这个开源项目，还给了他招聘名额，允许他招聘其他工程师来一起完成。
NW.js 官网：https://nwjs.io/
2012 年，故事的另一个主角赵成（Cheng Zhao）加入王文睿的小组，并对 node-webkit 项目做出了大量的改进。
后来赵成离开了中国英特尔开源技术中心，帮助 GitHub 团队尝试把 node-webkit 应用到 Atom 编辑器上，但由于当时 node-webkit 并不稳定，且 node-webkit 项目的走向也不受赵成的控制，这个尝试最终以失败告终。
但赵成和 GitHub 团队并没有放弃，而是着手开发另一个类似 node-webkit 的项目 Atom Shell，这个项目就是 Electron 的前身。赵成在这个项目上倾注了大量的心血，这也是这个项目后来广受欢迎的关键因素之一。再后来 GitHub 把这个项目开源出来，最终更名为 Electron。
Electron 官网：https://www.electronjs.org/
这两个框架实际上都是基于 Chromium 和 Node.js 的，两个框架的对比如下表所示：
| 能力 | Electron | NW.js |
|---|---|---|
| 崩溃报告 | 内置 | 无 |
| 自动更新 | 内置 | 无 |
| 社区活跃度 | 良好 | 一般 |
| 周边组件 | 较多，甚至很多官方提供组件 | 一般 |
| 开发难度 | 一般 | 较低 |
| 知名应用 | 较多 | 一般 |
| 维护人员 | 较多 | 一般 |
从上表可以看出，无论是在哪一个方面，Electron 都是优于 NW.js。
Electron 特点
在 Electron 的内部，集成了两大部件：
- Chromium：为 Electron 提供了强大的 UI 能力，可以在不考虑兼容的情况下，利用 Web 的生态来开发桌面应用的界面。
- Node.js：让 Electron 有了底层的操作能力，比如文件读写，集成 C++，而且还可以使用大量开源的 npm 包来辅助开发。
而且 Chromium 和 Node.js 都是跨平台的，这意味着我们使用 Electron 所开发的应用也能够很轻松的解决跨平台的问题。
搭建 Electron 项目
首先创建一个新的目录，例如 client，然后使用 npm init -y 进行一个初始化。
接下来需要安装 Electron 依赖：
npm install --save-dev electron之后分别创建 index.html 和 index.js 文件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 书写桌面程序界面的 -->
<h1>Hello Electron</h1>
<p>Hello from Electron！！！</p>
</body>
</html>index.html 负责的是我们桌面应用的视图。
// index.js
const { app, BrowserWindow } = require("electron");
// 创建窗口的方法
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile("index.html");
};
// whenReady是一个生命周期方法，会在 Electron 完成应用初始化后调用
// 返回一个 promise
app.whenReady().then(() => {
createWindow();
});该文件就是我们桌面应用的入口文件。
最后需要在 package.json 中添加执行命令：
"scripts": {
"start": "electron ."
},最后通过 npm start 就可以启动了。