Electron 小白介绍，你能看懂吗？

怼烎@ 2024-03-17 09:26 80阅读 0赞

#### 目录 ####

*  前言
 *  一、Electron是什么
 *   *  1.官网介绍
     *  2.小白介绍
 *  二、Electron开发了哪些应用
 *  三、Electron的优势在哪里
 *   *  1.优势
     *  2.带给我们什么优势
 *  四、Electron如何学习
 *   *  1.前置知识
     *  2.学习建议
 *  五、Electron的乐趣
 *  总结

--------------------

![在这里插入图片描述][505e3f38e8014731a1646e5980c49d0a.png_pic_center]

## 前言 ##

在最近的学习中，我接触了 `Electron` 这个前端框架，尽管学习进程断断续续，但我仍想分享一下我对它的了解。本文将带着真正小白的视角，向大家介绍 `Electron` 是什么、它的应用场景、学习方法以及为我们带来的好处。

--------------------

## 一、Electron是什么 ##

`Electron` 是什么呢？它是一个框架，框架大家应该都明白的。框架就像是一套工具箱，里面有很多工具可以帮助程序员更快、更方便地编写应用程序。我们需要按照既定的规则使用这些工具就可以了。（所以学习框架很容易，就是按照作者的规则来编写代码，基础功能就实现啦）

### 1.官网介绍 ###

我们来看官网如何介绍自己吧

> Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS 和 Linux——不需要本地开发 经验。

### 2.小白介绍 ###

`Electron` 是一个前端框架，可用于构建跨平台的桌面应用程序，桌面应用程序指的是可以在电脑上安装的软件（如QQ、浏览器、酷狗音乐等）。与 `Java`、`C++` 等语言相同，前端技术也可用于桌面应用程序的开发。开发者可使用 `JavaScript`、`HTML` 和 `CSS` 等前端基础技术，结合 `Node.js` 进行开发。最重要的是，使用 `Electron` 开发的桌面应用程序，可以在 Windows、macOS 和 Linux 系统上无缝运行，实现跨平台开发。

我们可以使用 `HTML` 和 `CSS` 创建一个漂亮的用户界面，使用 `JavaScript` 处理用户输入和数据，使用 `Node.js` 处理系统调用和后台任务等等，使用 `Electron` 构建桌面应用程序就像在编写网页一样，相当容易上手。

说白了，就是我们使用前端技术写个 Web 应用，然后套上 `Electron` 这个外套，就变成了桌面应用程序。

## 二、Electron开发了哪些应用 ##

哪些我们熟知的软件是 `Electron` 开发的呢？  
![在这里插入图片描述][1617e3db7ad74c599618f77c5be6b9df.png_pic_center]

*  Visual Studio Code：微软推出的跨平台轻量级代码编辑器。对于前端小伙伴来说，VSCode 并不陌生，没错，它是使用了 `Electron` 框架。
 *  Skype：微软推出的跨平台在线通讯工具，支持语音和视频通话。小伙伴的 Windows 系统中就有，大家也不陌生吧。
 *  Postman：跨平台的 API 开发和测试工具。测试人员/开发人员测试的利器。
 *  微信开发者工具：为开发者提供的用于微信小程序开发的开发工具。微信公众号/小程序开发人员肯定知道。
 *  迅雷X：据说 10.1版本开始，采用 `Electron` 软件框架完全重写了迅雷主界面。

还有钉钉、网易云音乐、有道翻译、Typora（Markdown编辑器），据说都是 `Electron` 的影子。

## 三、Electron的优势在哪里 ##

### 1.优势 ###

很多著名的桌面应用程序都在使用 `Electron`，那么它有哪些优势呢？

*  跨平台支持：首先便是跨平台，`Electron` 框架可在主流的操作系统（例如 Windows、Mac OS 和 Linux 等）上运行，可以有效地减少开发者在不同平台上开发应用程序的工作量和时间。一套代码多平台运行，这点很重要。
 *  前端技术支持：通过使用 `HTML`、`CSS` 和 `JavaScript` 等前端技术栈进行开发，拥有大量的UI组件和模板，开发出来的桌面应用界面更加美观、交互体验更好。
 *  本地能力支持：`Electron` 除了支持 `Web API`，而且还允许调用很多操作系统底层 API 来访问计算机的硬件设备，甚至可以自己用 `C++`、`Go` 来编写本地模块，可以完成很多 Web 应用无法做到的事情。
 *  调试测试支持：`Electron` 框架开发的应用程序是基于Chrome内核的，可以直接使用Chrome内核的开发者工具进行调试和测试，提高了开发效率。
 *  自动更新支持：`Electron` 应用程序在发布后可以自动更新，这意味着当有新版本可用时，用户会自动收到更新提示，无需手动下载和安装更新文件。

### 2.带给我们什么优势 ###

学习对我们可谓是一项有力的竞争优势。举例而言，很多企业都有开发桌面应用的需求，而过去这需要专业技术人员来完成，同样，Web 网站的开发也需要专门技术人员，但现在随着 Web 开发技术的发展，这些工作可以通过 Web 开发一并完成，而且这些应用还支持跨平台使用。这种便利与实用性让老板们感到十分满意。

还能有更高的开发效率和产出效率。开发者利用 `Electron` 框架可以快速构建出符合需求的桌面应用程序，同时也能够减少应用程序中与相关企业数据和功能的代码量，降低开发难度。

作为一名 Web 开发者，如果学会开发桌面应用，会非常显著地提升自己的竞争力，目前国内外一些著名的软件都是使用 `Electron` 开发，这个不能忽视，说明它的市场份额逐步增大。

## 四、Electron如何学习 ##

### 1.前置知识 ###

学习 `Electron` 框架，需要有一些技术的储备：

*  Web前端技术：`Electron` 应用程序是基于前端技术进行构建的，能够使用 `HTML`、`CSS`、`JavaScript` 等 Web 技术实现应用程序。
 *  Node.js和npm：`Node.js` 是一个基于 `JavaScript` 的后端编程语言，是 `Electron` 框架的基础之一。`npm 可以用于安装和管理`Node.js\` 环境中使用的包和库。
 *  前端框架：了解一些流行的前端框架，如 `React`、`Vue.js`、`Angular` 等，这有助于更好地应用`Electron` 框架开发出更优质的桌面应用程序。

总之，掌握 `Electron` 技术栈前需要具备前端编程技术、`Node.js` 环境和 `npm` 包管理技术等相关编程语言和工具基础知识，同时也需要进行深入的操作系统和调试工具学习。

### 2.学习建议 ###

首先要掌握的是 Web 前端基础技术，包括`HTML`、`CSS` 和 `JavaScript`，而后要理解并掌握 `Node.js` 及其相关工具的使用，特别要注意 `Electron` 在底层使用了 `Node.js`，深入理解 `Node.js` 的工作原理并掌握 `npm` 的应用会更有帮助。

在选择教程时，要注重细节，但也不要忽视官网。官网是核心资源，其中包含详细的文档。

一般教程都会提供一个小 demo 进行实操练习，而在学习结束后，可以尝试在实践中设计一个小型应用，以帮助真正理解 `Electron` 的知识，并以最佳实践的方式进行掌握。

## 五、Electron的乐趣 ##

学习 `Electron` 是比较有趣的，它可以帮我们快速落地一些想法，也就是比较容易让自己有成就感，让乐趣成为学习的动力。你可以畅想或构思一些桌面应用小工具。

比如我在学习 `Electron` 的时候构思并想要落地的小工具：

*  本地网站收藏：就是简单的收藏一些网站的入口，存储在本地文件中，换电脑我只需要将该文件拷贝就可以了。为什么要开发这样的小功能，一个原因是练手，另一个原因是不想在浏览器注册账号，没有账号那么收藏的网站也就不会‘移动’了。
 *  账号密码管理：说实话，现在每个人至少有好几十个账号，不可能每个密码都一样，就那我来举例，网站、APP、桌面应用注册的很多，不说账号，就是注册了哪些应用我可能都忘记了，更别说账号密码了。这些数据我们肯定要进行记录备份的，那么账号密码管理器可以进行记录，再提供加密服务，当别人看到时是经过加密的，我们想不起来密码时再解密查看。在比如提供随机密码功能，就是工具随机密码，提高账号的安全性。

--------------------

## 总结 ##

当我们学会了 Web 开发相关技术，Web 网站拿下了。  
学习 `Electron` 框架，桌面应用程序可以开发了。  
学习 `uni-app` 框架，移动端（APP、H5、小程序）可以开发了。

[505e3f38e8014731a1646e5980c49d0a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/1558602923da47aaa0ea686baf7592bd.png
[1617e3db7ad74c599618f77c5be6b9df.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/14c83802bd534680a6048965950a7f1d.png