初探Electron，从入门到实践
刘涛—— GrapeCity SpreadJS 项目组高级开发工程师在前端开发领域工作多年，热衷于研究前沿技术，注重通过实用方法提高开发效率。马苏。
本次技术分享会，我们将从《初探Electron》开始，通过在线直播的方式详细讲解Electron的入门技能和实际应用。在线直播地址：http://live.vhall.com/878864086
在开始学习Electron之前，您可能有以下困惑。 “Electron 是什么？Electron 能做什么？”为什么这么多伟大的公司都使用Electron 框架？
如果您有这些疑问和疑惑，本文讲师的介绍和技术分享将帮助您全面了解Electron 的新技术，快速找到入门方法，并了解Electron 如何是开发桌面应用程序的最佳方式。它将帮助您理解为什么这么说。今天就做出选择。
初探Electron
1. 什么是e-（为什么叫“跨平台桌面浏览器”）
前端开发的吸引力在于开发者总是要尝试新技术。
作为一名前端开发人员，您是否想过如何使用HTML、CSS 和JavaScript 构建跨平台桌面应用程序？ Electron 使这项任务变得比您想象的更容易。
作为使用JavaScript、HTML 和CSS 等新技术创建桌面应用程序的框架，Electron 管理硬件，以便开发人员可以专注于应用程序的核心并从根本上改变他们的设计。
作为一个跨平台的“集成框架”，Electron 从一开始就被设计为充分集成现代Web 技术，并且轻松兼容Mac、Windows 和Linux。所谓“一体化框架”，就是“Chromium”和“Node.js”很好地结合在一起，分工明确，硬件部分是Electron，“Chromium”和“Node.js”负责。 ” 负责硬件部分。它已经成为了。负责接口和逻辑，大家组织得很好，形成了一个低成本但非常高效的解决方案，在快速交付方面甚至比原生还要快。
电子发展里程碑
2013 年4 月11 日，Electron 作为Atom Shell 推出。 2014 年5 月6 日，Atom 和Atom Shell 在MIT 许可证下开源。 2015 年4 月17 日，Atom Shell 更名为Electron。 1.0版本于2016年5月11日发布。 2016 年5 月20 日，您的程序包被接受并提交到Mac App Store。 2016年8月2日，支持Windows应用商店。 简而言之，Electron JS 是一个运行时框架，允许用户使用HTML5、CSS 和JavaScript 创建桌面套件应用程序，它是流行技术的混合体。因此，您创建的任何Web 应用程序都可以在Electron JS 上正常运行。
Electron 的内置功能包括：
自动更新- 允许应用程序自动更新和升级本机菜单和通知- 创建本机应用程序菜单和上下文菜单应用程序崩溃报告- 允许您将崩溃报告发送到远程服务器调试和分析- Chromium 内容模块可以检测性能瓶颈和速度慢手术的原因。此外，您还可以在您的应用程序中使用您最喜欢的Chrome 开发者工具Windows 安装程序。快速轻松地创建安装包。
二、Electron 可以用来做什么？（哪些场景需要使用Electron）
在考虑Windows 平台的应用程序开发时，大多数人首先想到的是使用成熟的开发。 QT (C++)、WPF (C#) 等解决方案。但这些解决方案在面对以下使用场景时都存在局限性：
Slack Desktop融合了很多技术，但大多数资源文件和代码都是使用Chromium的渲染引擎结合Node.js运行时和模块系统远程加载的。
5.Whatsapp
下载次数最多的通讯应用程序WhatsApp 也是基于Electron 框架构建的。 Electron 帮助WhatsApp 开发者以更低的成本完成几乎所有工作，通过更精简和创新的技术为用户提供全新的桌面体验。
三、为什么选择 Electron？（Electron的出现为前端开发者谋得了一份好差事）
Electron 基本文件结构
Electron 的基本文件结构与创建网页时使用的类似。
电子快速启动
-index.html 这是一个HTML5 网页，旨在提供画布。
- main.js 创建窗口并处理系统事件
- package.json 是应用程序启动脚本。它在主进程中运行并包含有关应用程序的所有信息。
- render.js 处理应用程序的渲染过程
四、使用Electron框架的大型应用成功案例
如果回顾过去的Web 开发，您的所有代码，无论是HTML、CSS 还是JavaScript，都在浏览器的沙箱内运行，无法访问超出浏览器权限的系统自身资源，并且无法实现功能。代码有限。在您的浏览器中。浏览器这样做是出于安全原因。想象一下，当我们使用浏览器时，我们打开来自不同来源的不同网站。如果JavaScript 代码可以访问和操作本地操作系统资源那该有多可怕？
有一天，您可能不小心打开了一个恶意网站，并且存储在硬盘上的文件可能被盗（无需修复您的计算机）。
但我们要开发的是桌面应用程序，如果不访问本地资源，它肯定无法运行。 Electron巧妙地集成了nodejs，让nodejs充当整个程序的管家。 Housekeepers拥有更高的权限，可以访问和操作本地资源并使用浏览器原生不提供的高级API。同时管家还管理渲染进程窗口的创建和销毁。因此，我们称这个管家为主进程。在使用Electron开发的程序中，main.js作为程序的主入口。该文件中执行的代码将在主进程中执行。
主要工艺流程
主进程控制应用程序的生命周期。 Electron用来运行package.json中主脚本的进程称为主进程。 在主进程中运行的脚本创建一个显示用户界面的网页。它包含完整的Node.js API，主要用于打开对话框和创建渲染进程。此外，主进程还处理与其他操作系统的交互以及启动和关闭应用程序。
主进程就像应用程序的管家，管理应用程序的整个生命周期以及所有渲染进程的创建。
按照惯例，主进程位于名为main.js 的文件中。您可以通过更改package.json 文件中的配置属性来更改主进程文件。
例如，您可以打开package.json 并更改配置属性。
"main": "main.js",=》"main": "mainTest.js",
请注意，Electron 只有一个主要进程。并且当主进程被销毁时，所有渲染进程也被销毁。 Chrome浏览器的默认策略是每个选项卡都是一个独立的进程，而Electron就利用了这一策略。
Electron 架构实现
渲染进程是应用程序内的浏览器窗口。与主进程不同，Electron 可以运行许多渲染进程，并且每个进程都是独立的。由于Electron使用Chromium来显示网页，因此它也使用了Chromium的多进程架构。 Electron 中的每个网页都运行自己的渲染过程。
由于Chromium 的多进程架构，每个渲染进程都是独立的，因此如果一个进程崩溃，不会影响另一个进程。
以上是本次聊天《初探Electron，从入门到实践》的主要内容。 Electron的架构层、实现层、白屏方案、封装方式等技术点将在葡萄城公开课上与刘涛一一分享。任何人都可以加入、学习和观看。点击文末了解更多并直接报名。
版权声明：本文转载于网络，版权归作者所有。如有侵权，请联系本站编辑删除。