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阅读
1、先用create-reat-app创建一个程序 在package.json中配置 "homepage": ".", 要可以从本地访问 2、npm i electron --save-dev 3、在package.json中配置入口文件,具体如下: { "name": "myre", "versi ...
转载
2021-05-12 23:35:00
269阅读
2评论
main.js package.json 执行 npm run dev
转载
2018-08-23 11:53:00
152阅读
2评论
# 使用React、TypeScript和Electron构建跨平台桌面应用
随着技术的不断进步,我们现在可以使用Web技术来开发跨平台的桌面应用程序。React和TypeScript是目前非常流行的前端开发技术,而Electron是一个强大的桌面应用程序开发框架。本文将带您深入了解如何使用React、TypeScript和Electron来构建跨平台的桌面应用程序。
## 什么是React?
原创
2023-10-16 09:18:16
67阅读
什么是 React ⚛️React 是 Facebook 开发的一个 JavaScript 库,除其他外,它还用于构建 Instagram.com。它的目的是让开发人员能够轻松地为网站和应用程序等创建快速的用户界面。React 的主要概念。js是虚拟DOM什么是Electron.jsElectron.js 是一个运行时框架,允许用户使用 HTML5、CSS 和 JavaScript 创建桌面套件应
原创
2023-02-13 13:58:10
1481阅读
步骤:1, 先创建一个react 项目。2,然后修改 package.json 添加 electron 依赖。 electron 的基础实现中的main.js package.json 修改的部分:{ "main": "main.js", "dependencies": {
... "electron": "7.3.3",
... }, "scripts": {
...
转载
2021-02-27 12:49:02
233阅读
2评论
Electron 应用架构在我们深入了解Electron的API之前,我们需要探讨一下在Electron中可能遇到的两种进程类型。 它们是完全不同的,因此理解它们非常重要。主进程和渲染进程Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。由于 Elec
转载
2024-05-16 11:20:30
41阅读
早期桌面应用的开发主要借助原生 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阅读
React是一个流行的JavaScript库,用于构建Web应用程序。结合Electron框架,可以轻松地将React应用程序打包为桌面应用程序。以下是使用React和Electron开发桌面应用程序的步骤:1. 安装Electron首先,你需要安装Electron。在终端中运行以下命令:npm install electron --save-dev2. 创建Electron应用程序使用Elect
原创
2023-06-27 10:26:49
251阅读
# 使用 Electron、React 和 TypeScript 创建脚手架
## 引言
在现代应用程序开发中,Electron、React 和 TypeScript 是构建桌面应用的热门组合。本文将为您提供一个简单的流程,指导您如何设置一个完整的 Electron + React + TypeScript 脚手架。我们将分步进行,确保每一步都易于理解并实践。
## 流程概述
为了帮助您更
原创
2024-08-08 18:13:27
371阅读
概述Electron环境搭建和demo创建的过程我们上一篇文章已经给大家做了介绍,这篇文章给大家介绍下如何将Electron和前端框架React结合来进行开发。前提要求创建了一个Electron基础demo(不会创建的话请看这篇文章《01 Electron开发环境搭建,实例化demo》)具体操作这篇文章的介绍要用到上一篇文章中创建的demo里面的一些代码,所以还没有...
原创
2022-01-27 12:02:11
1918阅读
本文主要讲解Electron 窗口的 API 和一些在开发之中遇到的问题。官方文档 虽然比较全面,但是要想开发一个商用级别的桌面应用必须对整个 Electron API 有较深的了解,才能应对各种需求。1. 创建窗口通过BrowserWindow,来 创建 或者 管理 新的浏览器窗口,每个浏览器窗
概述Electron环境搭建和demo创建的过程我们上一篇文章已经给大家做了介绍,这篇文章给大家介绍下如何将Electron和前端框架React结合来进行开发。前提要求创建了一个Electron基础demo(不会创建的话请看这篇文章《01 Electron开发环境搭建,实例化demo》)具体操作这篇文章的介绍要用到上一篇文章中创建的demo里面的一些代码,所以还没有...
原创
2021-08-27 09:36:16
403阅读
例化一个基础的 EXE , ---->入门 使用前先安装 Node.js 官网 Downloads 下一步 下一步 选择路径勾选 下一步---------------->>>>>>>>>>>>>>>>>>>>>>等待安装为你的新Electron应用创建一个新的空
# 学习Electron技术架构:一种入门指南
这篇文章旨在帮助初学者理解如何使用Electron构建桌面应用程序。我们将从流程简介开始,以表格形式列出各个步骤,然后详细解释每个步骤的代码实现,最后附上旅行图和状态图,帮助你更好地理解整个过程。
## 1. 整体流程
下面的表格展示了开发Electron应用的主要步骤:
| 步骤 | 描述
# 如何实现Electron技术架构
## 一、Electron技术架构流程
在构建一个Electron应用程序之前,我们需要了解整个流程。下面是一张简明的步骤表格,展示了开发Electron应用的基本流程:
| 步骤 | 描述 |
|-------|-----------------------------|
| 1 | 安装Node