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

---

前言

在最近的学习中，我接触了 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 开发的呢？

• 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、小程序）可以开发了。