# 学习Electron技术架构：一种入门指南
这篇文章旨在帮助初学者理解如何使用Electron构建桌面应用程序。我们将从流程简介开始，以表格形式列出各个步骤，然后详细解释每个步骤的代码实现，最后附上旅行图和状态图，帮助你更好地理解整个过程。
## 1. 整体流程
下面的表格展示了开发Electron应用的主要步骤：
| 步骤 | 描述
# 如何实现Electron技术架构
## 一、Electron技术架构流程
在构建一个Electron应用程序之前，我们需要了解整个流程。下面是一张简明的步骤表格，展示了开发Electron应用的基本流程：
| 步骤 | 描述 |
|-------|-----------------------------|
| 1 | 安装Node
本文主要讲解Electron 窗口的 API 和一些在开发之中遇到的问题。官方文档 虽然比较全面，但是要想开发一个商用级别的桌面应用必须对整个 Electron API 有较深的了解，才能应对各种需求。1. 创建窗口通过BrowserWindow，来 创建 或者 管理 新的浏览器窗口，每个浏览器窗
官网Electron官网Electron是什么Electron=Chromium+Node.js+Native APIElectron整合了Chrome的开源内核和Node.js两项技术，提供可以跨macOS、Windows、Linux三个系统的桌面应用运行时。它拥有浏览器能实现的所有功能和Node.js能实现的所有功能，因此，它可以通过Node.js实现系统底层API的调用，这是传统浏览器无法实
转载
2023-10-23 08:43:56
100阅读
ElectronElectron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架安装在使用 Electron 进行开发之前，需要安装Node.js，可以在终端输入以下命令输出了 Node.js 和 npm 的版本信息：node -v
npm -v 没有安装的话，可以点击此处的安装教程接下来就是安装 Electron ： 我们可以两种安装方式全局安装npm insta
转载
2023-10-28 11:27:00
151阅读
# Electron技术架构解析
Electron是一种流行的开源框架，允许开发者使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。它是由GitHub开发的，核心基于Chromium和Node.js，能够让你使用Web技术构建本地应用。本文将介绍Electron的基本架构并配以示例代码，帮助你更好地理解这个框架。
## Electron的架构组件
Electron应用程序的
Electron 应用架构在我们深入了解Electron的API之前，我们需要探讨一下在Electron中可能遇到的两种进程类型。 它们是完全不同的，因此理解它们非常重要。主进程和渲染进程Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。由于 Elec
转载
2024-05-16 11:20:30
41阅读
1. Electron 是什么？使用github开发的开源框架允许开发者使用Web（js,html,css）技术构建跨平台的桌面应用Electron=Chrominum + node.js + Native API高效：通过Web技术写UI能力：底层能力能力&体验：跨平台&原生能力2. Chromium + NodejsChromium架构Chromium是谷歌开源的项目，相当于c
转载
2023-07-26 16:08:42
176阅读
早期桌面应用的开发主要借助原生 C/C++ API 进行，由于需要反复经历编译过程，且无法分离界面 UI 与业务代码，开发调试极为不便。后期出现的 QT 和 WPF 在一定程度上解决了界面代码分离和跨平台的问题，却依然无法避免较长时间的编译过程。近几年伴随互联网行业的迅猛发展，尤其是 NodeJS、Chromium 这类基于 W3C 标准开源应用的不断涌现，原生代码与 Web 浏览器开发逐步走向融
转载
2023-09-20 15:45:00
286阅读
一、前言前面的课程已经讲述了什么是Electron，Electron的基本原理，Electron的工程化，如，怎么和React结合，怎么打包，怎么更新。Electron的基本原理，如主进程、子进程，进程间通信，Electron的窗口实现，Electron的基础结构等。 那么，今天，我们主要看看Electron的主要能力，也就是Electron能做些什么，同时对之前的课程进行加强和补充。二、基本概念
转载
2024-01-28 15:58:16
841阅读
在这篇文章中，我们将深入探讨“Electron架构”这一主题。随着桌面应用程序开发的复杂性不断增加，Electron成为一种极具吸引力的解决方案。Electron 允许开发者使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。本文将详细分析其背景、技术原理、架构解析、源码分析、案例分析和扩展讨论，以帮助我们更好地理解 Electron 的工作原理及其应用。
## 背景描述
Electron 原理Electron简介,一种桌面应用程序运行时Electron 是一个开放源代码的项目, 由Cheng Zhao AKA zcbenz开发，他现在是 Github 北京 Atom 编辑器开发 team 的一名工程师。Electron 把 Chromium 和 Node 合并到一个单独的运行时里面，很适合开发桌面 web 形式的应用程序，通过Node它提供了通常浏览器所不能提供的
转载
2023-07-11 12:02:59
468阅读
1、electron基本介绍Electron 是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源框架。 Electron提供了丰富的本地（操作系统）API，使你能够使用纯JavaScript来创建桌面应用程序。Electron通过集成浏览器内核，使用Web技术来实现不同平台下的渲染，并结合了 Chromium 、Node.js 和
转载
2024-01-10 18:50:31
302阅读
例化一个基础的 EXE , ---->入门 使用前先安装 Node.js 官网 Downloads 下一步 下一步 选择路径勾选 下一步---------------->>>>>>>>>>>>>>>>>>>>>>等待安装为你的新Electron应用创建一个新的空
一、Electron简介Electron是利用web前端技术进行桌面应用开发的一套框架。若想开发一个兼容多平台的桌面应用，以往常用的技术框架有wxWidgets、GTK、QT等，这些框架受语言限制，且学习成本较高，效率有限。目前一些基于前端技术的hybrid框架很流行，且已经在多个领域得到了广泛的应用和验证，比如利用前端技术+相应的打包工具可开发适配多平台的应用（PC、微信公众号、小程序、Andr
转载
2023-07-20 14:28:01
281阅读
这篇文章主要讲了electron应用的基本架构，并对之前下载的应用进行分析electron应用的基本架构在electron中，主要有两类进程。一类是主进程main，还有一类是渲染器进程renderer。主进程只有一个，负责对整个应用的管理，包括后台操作，创建GUI，以及处理GUI与后台的交互操作。但是光有主进程是无法显示应用窗口的，我们需要在主进程中调用BrowserWindow模块才能使用不同的
转载
2024-02-04 00:12:10
152阅读
一、背景在团队中，我们因业务发展，需要用到桌面端技术，如离线可用、调用桌面系统能力。什么是桌面端开发？一句话概括就是：以 Windows 、macOS 和 Linux 为操作系统的软件开发。对此我们做了详细的技术调研，桌面端的开发方式主要有 Native 、 QT 、 Flutter 、 NW 、 Electron 、 Tarui 。其各自优劣势如下表格所示：我们最终的桌面端技术选型是 Elect
根据过往Electron框架应用的安全测试心得整理，从Dom-XSS到RCE
Electron框架应用的安全测试0.Electron相关简介electron.js是一个运行时框架，它在设计之初就结合了当今最好的Web技术，核心是使用HTML、CSS、JavaScript构建跨平台的桌面应用。
作为一个跨平台的“集成框架”，它能轻松和多平台兼容。而所谓的“
转载
2024-01-31 06:24:17
95阅读
技术选型： electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的API，允许使用 Web 前端技术开发跨平台的桌面客户端，这里使用打包工具webpack搭建electron的主进程和渲染进程的脚手架，渲染进程使用vue作为前端框架。示例项目地址：https://github.com/zhangxuelian/electron-vue-frame文章目录一、准备环
转载
2024-05-05 13:49:49
875阅读
一份针对于electron-vue项目整理的搭建、运行、打包过程的踩坑总结分享首先为了保证安装效率，采用cnpm或者yarn指令来安装，前提是安装了node环境安装全局yarn，最好设置淘宝镜像npm install -g yarn安装全局vue-clinpm install vue-cli -g安装3.0+版本vue-cli（现在最新已经到4.5.6版本）npm install @vue/cli
转载
2021-02-25 20:24:14
443阅读
2评论
