Electron的入门介绍与使用React18+Vite+Electron(2)共30节

上一篇讲了如何安装Electron和简单例子,Electron的入门介绍与使用(1)共30节

让我们回顾一下Electron的发展历史,Electron 最初由 GitHub 公司开发,最早用于构建 GitHub Desktop。随着其成功,Electron 逐渐成为一个受欢迎的开发框架,许多知名应用程序如 Visual Studio Code、Slack、WhatsApp 等也使用 Electron 构建。 基本原理 Electron 使用 Chromium 渲染引擎来显示 Web 内容,同时结合 Node.js 来提供对操作系统的访问和控制。

  1. 跨平台: Electron 应用程序可以在多个操作系统(如 Windows、macOS、Linux)上运行,因为它们在不同平台上共享相同的核心代码。
  2. 前端技术: 开发者可以使用熟悉的前端技术,如 HTML、CSS 和 JavaScript,来构建用户界面。
  3. Node.js 集成: 通过 Node.js,开发者可以在应用程序中使用 JavaScript 来处理文件系统、网络通信、操作系统 API 等等。
  4. 自定义性: 开发者可以通过使用原生的 Web 技术和样式,创建非常定制化的用户界面。
  5. 社区支持: 有一个活跃的社区,提供了大量的插件和库,以帮助开发者构建更强大、更高效的应用程序。

核心组件

  1. 主进程(Main Process): 这是应用程序的主要控制中心,运行 Node.js 环境,负责管理和控制所有的渲染进程和窗口。
  2. 渲染进程(Renderer Process): 每个 Electron 窗口对应一个独立的渲染进程,它们运行在 Chromium 渲染引擎中,负责显示用户界面。
  3. 主窗口(Main Window): 主窗口是应用程序的主界面,通常是一个 Chromium 窗口,用来显示 Web 内容。
  4. 系统托盘图标(Tray): 允许在桌面右下角显示小图标,提供应用程序的快速访问和交互。

ok ,回归正传,今天我们讲解Electron和React18的结合。

一、使用vite初始化项目

pnpm create vite

  ....

接下来就是项目命名之类的,跟着提示操作即可。

接下来安装Electron

要安装预编译的 Electron 二进制文件,请使用 npm。 首选方法是在你的应用程序中安装 Electron 作为开发依赖:

npm install electron --save-dev

查看versioning doc获取如何在你的应用中管理Electron的相关信息。

运行 Electron ad-hoc​

如果你不想在本地工程上使用 npm install 同时又没用其它选择时,你也可以使用 npm 捆绑的 npx 命令来运行 Electron ad-hoc:

npx electron .

上面的命令会在当前工作目录下运行Electron。 需要注意的是,你的应用中的任何依赖将不会被安装。

二、配置项目

在 package.json 中指定的 main 文件是 Electron 应用的入口。 这个文件控制 主程序 (main process),它运行在 Node.js 环境里,负责控制您应用的生命周期、显示原生界面、执行特殊操作并管理渲染器进程 (renderer processes),稍后会详细介绍。

在继续编写您的 Electron 应用之前,您将使用一个小小的脚本来确保主进程入口点已经配置正确。 在根目录的 main.js 文件中写一行代码:

main.js

console.log('Hello from Electron 👋')

由于 Electron 的主进程是一个 Node.js 运行时,您可以使用 electron 命令执行任意的 Node.js 代码 (甚至可以将其作为 REPL 使用)。 要执行这个脚本,需要在 package.json 的 scripts 字段中添加一个 start 命令,内容为 electron . 。 这个命令会告诉 Electron 在当前目录下寻找主脚本,并以开发模式运行它。

修改mian的代码:
const { app, BrowserWindow } = require('electron/main')const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600})win.loadFile('../public/index.html') //此处为react项目打包后的入口文件
}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})

OK,接下来我们修改package.json

  "main": "dist-electron/index.js","scripts": {"dev:electron": "cross-env NODE_ENV=development vite","start:electron": "electron .","build:win": "electron-builder --win --x64","build:mac": "electron-builder --mac --x64","build:linux": "electron-builder --linux --x64","build:all": "npm run build:win && npm run build:mac && npm run build:linux","test:electron": "echo \"Error: no test specified\" && exit 1","dev": "vite","build": "tsc -b && vite build","lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview": "vite preview"},

修改vite.config.js代码

import electron from 'vite-plugin-electron'...//多余代码没写plugins: [react(), electron({entry: 'electron/index.js'})],
... 

好了,这样就可以启动试下

pnpm run dev

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/50857.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在线投稿小程序的设计

管理员账户功能包括:系统首页,个人中心,用户管理,编辑管理,用户文章管理,文章分类管理,文章展示管理,文章稿酬管理,通知公告管理,系统管理 微信端账号功能包…

从零开始的Python开发日记(3):Flask框架的使用

最近学会了使用Python的Flask框架,并通过该框架实现API的调用以及转发,以下是flask框架下前后端的数据交互模式 后端:python 的 flask 框架 前端:html、css、js前后端数据交互的方式: 一、前端发送数据,后…

Unity ParticleSystem:创造魔法般的视觉效果

Unity的ParticleSystem是一个功能强大的组件,用于创建各种动态的粒子效果,如火焰、烟雾、雨滴、爆炸等。它不仅可以用于增加游戏的视觉吸引力,还可以用于实现复杂的动画效果。本文将探讨如何使用Unity的ParticleSystem组件来实现动画效果。 …

2022.11.17 阿里钉钉数据开发岗位一面

今天晚上和阿里钉钉面试官聊了一面,整个过程持续45分钟,还是相当持久的。前面先让我自我介绍,包括自身背景、工作经历和项目经验,在介绍的时候面试官几次打断,让我停下来,然后他提问,我很纳闷还…

59 阻塞和非阻塞IO

阻塞式io 一个简单的用户输入回显功能&#xff0c;在用户未输入内容时&#xff0c;会一直阻塞住 #include <iostream> #include <unistd.h>using namespace std; int main() {char buff[1024];while (true){cout << "please enter ";fflush(stdo…

VAD: 向量化场景表示,用于高效的自动驾驶

VAD: Vectorized Scene Representation for Efficient Autonomous Driving VAD: 向量化场景表示&#xff0c;用于高效的自动驾驶 https://github.com/hustvl/VAD Abstract Autonomous driving requires a comprehensive understanding of the surrounding environment for …

英语单词终极记忆

你应当知道一个专业术语&#xff0c;叫COCA。 这个单词很好记&#xff0c;但你可能记不住。 你应当这样记&#xff1a; 你记住了 可口可乐&#xff0c;也就记住了 coca &#xff08;谐音&#xff1a;可口&#xff09;。 从而记住了 COCA。 无论如何&#xff0c;你这辈子&…

react版本判断是否面包含

react-admin: react版本 import { useState,useEffect } from react import ./Secene.css import { Checkbox } from "antd"; import* as turf from turf/turf; import type { CheckboxProps } from antd; // const onChange: CheckboxProps[onChange] (e) >…

机械硬盘更换判断方法

1. 频繁出现坏道&#xff1a;通过硬盘检测工具检测到硬盘存在大量坏道&#xff0c;且修复后仍不断出现&#xff0c;这可能意味着硬盘即将损坏。 2. 数据读写错误增多&#xff1a;在读写数据时频繁出现错误提示&#xff0c;文件损坏或丢失的情况频繁发生。 3. 异常噪音&#xff…

Spring Boot + Spring Batch + Quartz 整合定时批量任务

​ 博客主页: 南来_北往 系列专栏&#xff1a;Spring Boot实战 前言 最近一周&#xff0c;被借调到其他部门&#xff0c;赶一个紧急需求&#xff0c;需求内容如下&#xff1a; PC网页触发一条设备升级记录&#xff08;下图&#xff09;&#xff0c;后台要定时批量设备更…

宝塔/Linux/docker安装zincsearch

安装步骤 创建zincsearch目录 mkdir -p /www/wwwroot/zincsearch/data 修改目录权限 chmod arwx /www/wwwroot/zincsearch/data 创建实例 mkdir data docker run -v /www/wwwroot/zincsearch/data:/data -e ZINC_DATA_PATH"/data" -p 4080:4080 \-e ZINC_FIRST…

第15周 Zookeeper分布式锁与变种多级缓存

Zookeeper **************************************************************

Filebeat安装部署及入门应用

前言 后续开发项目要用到 Filebeat 对日志做收集和处理。本文介绍了 ELK 技术中的 Filebeat&#xff0c;用于轻量级的日志收集和分析 参考资料&#xff1a; 视频教程&#xff1a;Elastic Stack&#xff08;ELK&#xff09;从入门到实践 官方文档&#xff1a;Filebeat overv…

Linux定时同步系统时间到硬件时间

Linux定时同步系统时间到硬件时间 1. 系统时间、软件时间 系统时间 &#xff08;System Time&#xff09;&#xff1a; 一般说来就是我们执行 date命令看到的时间&#xff0c;linux系统下所有的时间调 用&#xff08;除了直接访问硬件时间的命令&#xff09;都是使用的这个时…

Python客户端操作Elasticsearch

一.Python与Elasticsearch交互示例 这段代码是使用Python的elasticsearch模块与Elasticsearch进行交互的示例&#xff1a; from elasticsearch import Elasticsearch# 一.创建连接 # 建立到Elasticsearch的连接&#xff0c;指定主机和端口&#xff0c;设置请求超时时间为3600…

【C语言篇】C语言数据类型和变量

文章目录 C语言数据类型和变量1. 数据类型介绍1.1 字符型1.2 整形1.3 浮点型1.4 布尔类型1.5 各种类型数据长度1.5.1 sizeof操作符1.5.2 数据类型长度1.5.3 sizeof表达式不计算 2. signed和unsigned3. 数据类型的取值范围4. 变量4.1变量的创建4.2 变量的分类 5.强制类型转换 C语…

【C语言】【数据结构】二分查找(数组的练习)

目录 一、什么是二分查找 二、算法思想 2.1、概述 2.2、举例 &#xff08;1&#xff09;查找3&#xff08;数组里面存在的数&#xff09; &#xff08;2&#xff09;查找12&#xff08;数组里面不存在的数&#xff09; 三、代码实现 四、计算mid公式的优化 一、…

从零开始的Python开发日记(6):如何使用SQLAlchemy

SQLAlchemy ORM 使用教程 SQLAlchemy 是 Python 生态系统中非常流行的 SQL 工具包和对象关系映射&#xff08;ORM&#xff09;库。它提供了一种高效的方法来处理数据库操作&#xff0c;使开发者能够通过 Python 对象与数据库进行交互。本文将详细介绍 ORM 的定义和含义&#x…

【03】Java虚拟机是如何加载Java类的

从class文件到内存中的类&#xff0c;按先后顺序需要经过加载、链接以及初始化三个步骤 一、加载 加载就是查找字节流&#xff0c;并且据此创建类的过程。 除了启动类加载器&#xff08;所有类加载器的祖师爷&#xff0c;由C实现&#xff0c;没有对应的Java对象&#xff09;之外…

大话成像公众号文章阅读学习(二)--- 下一代 AI-ISP会更好

系列文章目录 文章目录 系列文章目录前言一、AI-ISP1.1 定义与工作原理1.2 应用场景 二、展望总结 前言 这篇是 下一代 AI-ISP会更好 文章地址&#xff1a;https://mp.weixin.qq.com/s/N3YnkXF_stvP6k3jRTKCpQ 一、AI-ISP 1.1 定义与工作原理 定义&#xff1a;AI-ISP&#…