当前位置:   article > 正文

Electron 小白介绍,你能看懂吗?_electron框架

electron框架


在这里插入图片描述

前言

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


一、Electron是什么

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

1.官网介绍

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

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

2.小白介绍

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

我们可以使用 HTMLCSS 创建一个漂亮的用户界面,使用 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 等)上运行,可以有效地减少开发者在不同平台上开发应用程序的工作量和时间。一套代码多平台运行,这点很重要。
  • 前端技术支持:通过使用 HTMLCSSJavaScript 等前端技术栈进行开发,拥有大量的UI组件和模板,开发出来的桌面应用界面更加美观、交互体验更好。
  • 本地能力支持:Electron 除了支持 Web API,而且还允许调用很多操作系统底层 API 来访问计算机的硬件设备,甚至可以自己用 C++Go 来编写本地模块,可以完成很多 Web 应用无法做到的事情。
  • 调试测试支持:Electron 框架开发的应用程序是基于Chrome内核的,可以直接使用Chrome内核的开发者工具进行调试和测试,提高了开发效率。
  • 自动更新支持:Electron 应用程序在发布后可以自动更新,这意味着当有新版本可用时,用户会自动收到更新提示,无需手动下载和安装更新文件。

2.带给我们什么优势

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

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

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

四、Electron如何学习

1.前置知识

学习 Electron 框架,需要有一些技术的储备:

  • Web前端技术:Electron 应用程序是基于前端技术进行构建的,能够使用 HTMLCSSJavaScript 等 Web 技术实现应用程序。

  • Node.js和npm:Node.js 是一个基于 JavaScript 的后端编程语言,是 Electron 框架的基础之一。npm 可以用于安装和管理 Node.js` 环境中使用的包和库。

  • 前端框架:了解一些流行的前端框架,如 ReactVue.jsAngular 等,这有助于更好地应用Electron 框架开发出更优质的桌面应用程序。

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

2.学习建议

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

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

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

五、Electron的乐趣

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

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

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

总结

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/452972
推荐阅读
  

闽ICP备14008679号