跨平台桌面应用 Electron 入门学习

news/2024/5/28 3:30:03/文章来源:https://blog.csdn.net/m0_61662775/article/details/137612713

 本文章主要为该视频的学习笔记,如果侵权会速删。

Electron 01 课程介绍_哔哩哔哩_bilibiliElectron 01 课程介绍, 视频播放量 3046、弹幕量 0、点赞数 75、投硬币枚数 43、收藏人数 179、转发人数 2, 视频作者 极客丶张德龙, 作者简介 当你的能力还不足以撑起自己的野心时,你就需要静下心来,好好学习。【内卷俱乐部:339585580】,相关视频:Electron 02 开发环境,Electron 05 进程通信,Electron 04 进程模型,Electron 08 Tray 托盘,Electron 13 多窗口,MUI 01 课程介绍,Electron 09 Notification 通知,Electron 11 dialog 对话框,Electron 12 online 在线状态,Electron 06 Dark Modeicon-default.png?t=N7T8https://www.bilibili.com/video/BV1if421f7fz/?spm_id_from=333.1007.top_right_bar_window_history.content.click

 一、入门

1.简介

(1)简介:

Electron是一个使用 HTML、CSS 和JavaScript 构建跨平台桌面应用程序的框架

  • 前端技术:Electron 嵌入了 Chromium 和 Node.js,使Web 开发人员能够创建桌面应用程序。
  • 跨平台:Electron应用程序与 macOS、Windows 和Linux 兼容,可在所有支持的架构的三个平台上运行。
  • 开源:Electron 是一个开源项目,由 OpenJS 基金会和一个活跃的贡献者社区维护。

(2)Electron 功能:

负责处理困难的部分,让桌面开发变得简单,因此可以专注于应用程序的核心

(3)Electron 生态:

  • 选择集成您最喜欢的前端生态系统库和框架,或者使用定制的 HTML代码开辟自己的道路
  • Electron Packager、Electron Builder、Electron Forge、 Electron Fiddle. 

(4)Electron 案例:

  • VisualStudio Code、Postman、ApiFox、Hyper
  • MongoDB Compass、Another Redis Desktop ManagerMicrosoft Teams、GitHub Desktop、Figma
  • QONT、WhatsApp、Skype
  • 支付宝小程序IDE、迅雷下载、有道笔记 

学习条件:
★掌握: HTML、CSS、JavaScript
☆ 了解: Node.js 基本语法
☆熟悉: 客户端软件基本使用及交互方式


2.开发环境

Node.js
nvm

  • 查看本机已装版本列表:nvmlist
  • 查看当前可用版本列表:nvmlist available
  • 安装指定版本:nvminstall<版本>
  • 切换指定版本:nvm use<版本>
  • 卸载指定版本:nvm uninstall<版本> 


3.上手案例 Hello Electron 

(1)Quick Start

克隆仓库:git clone https://github.com/electron/electron-quick-start
进入项目:cd electron-quick-start
安装依赖:npminstall
启动应用:npm run start

(2) Electron Forge

npm 方式

  • npm init electron-app <name>
  • npx create-electron-app <name>
  • npm run start

yarn 方式

  • yarn create electron-app <name>
  • yarn start 

(3)初始项目:
·npm init
·yarn init

  • 安装依赖:

        ·npm install electron --save-dev

        ·yarn add electron --dev

  • 创建页面:index.html
  • 程序入口:main.js
  • 启动应用:npmrun start


二、 API接口

(1)进程模型

·进程模型

  • 主进程 Main Process
  • 渲染进程 Renderer Process

·预加载脚本

  • preload

·上下文隔离

  • contextlsolation
  • contextBridge

 

1. 进程模型

·主进程 Main Process

  • 特点: 程序入口、唯一
  • 职责: 负责控制、协调、Node.js API
  • 事件: 创建窗口、设置菜单、注册快捷键等系统级
  • 销毁: 应用结束

 

·渲染进程 Renderer Process

  • 特点: 与 BrowserWindow(打开窗口) 对应、彼此隔离
  • 职责: 渲染页面,无权访问 Node.jS API
  • 事件: 窗口的显示、隐藏等
  • 销毁: 窗口销毁

 

2. 预加载脚本

  • 预加载(preload)脚本包含了那些执行于渲染器进程中,且先于网页内容开始加载的代码
  • 这些脚本虽运行于渲染器的环境中,却因能访问 Node.js API 而拥有了更多的权限。 

 

 3.上下文隔离

  • 染进程中的代码通常运行在自己的环境中,并且不能直主进程可以启动并管理多个渲染进程,渲接访问主进程的环境。
  • 开启上下文隔离后,渲染进程无法直接访问 Electron APl或 Node.js 功能(但可以通过进程间特定的任务)通信(IPC)向主进程发送消息,请求执行特定的任务)。
  • 关闭上下文隔离会使渲染进程获得更高的权限,可以直接访问主进程的 API,这为开发带来了便利,但也带来了安全风险:如果恶意代码成功运行在渲染进程中,将能够执行任意 Node.js 操作包括访问文件系统、运行任意命令等 。

  • Electron 提供 contextBridge 模块,可以用来安全地从独立运行、上下文隔离的预加载脚本中暴露 API给正在运行的渲染进程。

 


(2)进程通信

(1)进程通信

  • 渲染进程-->主进程(单向通信)
  • 渲染进程<->主进程(双向通信)

(2)演示案例

  • 修改窗口标题
  • 自定义窗口、无边框、可拖动最小化、最大化、还原、关闭

(3)相关知识

  • IPC 进程通信
  • BrowserWindow APl、dialog API 

 

1.单向通信

  • ipcRenderer.send("channel",args)  -  进程发送(注意ipcRenderer为主进程的API,无法在页面即渲染进程中直接使用,所以需要contextBridge进行暴露)
  • ipcMain.on("channel",(event, args)=>{}) - 进程监听

·BrowserWindow API

  • 最小化: win.minimize()
  • 最大化: win.maximize()
  • 还原: win.unmaximize()
  • 关闭: win.close()

·无边框

  • frame: false   

·可拖动CSS

  • -webkit-app-region:drag
  • -webkit-app-region:no-drag,

 
2.双向通信

 以上的方法不建议

  • ipcRenderer.invoke("channel",...args)
  • ipcMain.handle("channel",listener)

 


(3)Dark Mode

(1)nativeTheme API

  • themeSource
  • shouldUseDarkColors

(2)CSS 媒体查询

  • @media(prefers-color-scheme:dark){}
  • @media(prefers-color-scheme:light){}

 

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

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

相关文章

[Java、Android面试]_18_详解Handler机制 常见handler面试题(非常重要,非常高频!!)

本人今年参加了很多面试&#xff0c;也有幸拿到了一些大厂的offer&#xff0c;整理了众多面试资料&#xff0c;后续还会分享众多面试资料。 整理成了面试系列&#xff0c;由于时间有限&#xff0c;每天整理一点&#xff0c;后续会陆续分享出来&#xff0c;感兴趣的朋友可关注收…

小程序项目思路分享爬虫

小程序项目思路分享爬虫 具体需求&#xff1a; 有这几个就行&#xff0c;门店名称门店地址门店类型&#xff0c;再加上省、市、县/区门店名称&#xff1a;storeName 门店地址&#xff1a;storeAddress 程序运行&#xff1a; honor_spider获取经纬度信息。 经纬度——>详…

免费ssl证书能一直续签吗?如何获取SSL免费证书?

免费SSL证书是否可以一直续签。我们需要了解SSL证书的基本工作原理。当你访问一个使用HTTPS协议的网站时&#xff0c;该网站实际上在使用一个SSL证书。这个证书相当于一个数字身份证明&#xff0c;它验证了网站的真实性和安全性。而这个证明是由受信任的第三方机构——通常是证…

基于springboot实现视频网站管理系统【项目源码+论文说明】计算机毕业设计

基于springboot实现视频网站管理系统演示 摘要 使用旧方法对视频信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在视频信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问…

(学习日记)2024.04.18:UCOSIII第四十六节:CPU利用率及栈检测统计

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

【C++学习】深入理解C++异常处理机制:异常类型,捕获和处理策略

文章目录 ♫一.异常的提出♫二.异常的概念♫三.异常的使用♫3.1 异常的抛出和捕获♫3.2.异常的重新抛出♫3.3异常安全♫3.4 异常规范 ♫4.自定义异常体系♫5.C标准库的异常体系♫6.异常的优缺点 ♫一.异常的提出 之前&#xff1a; C语言传统的处理错误的方式与带来的弊端&…

TQ15EG开发板教程:在MPSOC上运行ADRV9009(vivado2018.3)

首先需要在github上下载两个文件&#xff0c;本例程用到的文件以及最终文件我都会放在网盘里面&#xff0c; 地址放在最后面。在github搜索hdl选择第一个&#xff0c;如下图所示 GitHub网址&#xff1a;https://github.com/analogdevicesinc/hdl/releases 点击releases选择版…

python创建word文档并向word中写数据

一、docx库的安装方法 python创建word文档需要用到docx库&#xff0c;安装命令如下&#xff1a; pip install python-docx 注意&#xff0c;安装的是python-docx。 二、使用方法 使用方法有很多&#xff0c;这里只介绍创建文档并向文档中写入数据。 import docxmydocdocx.Do…

Python 全栈 Web 应用模板:成熟架构,急速开发 | 开源日报 No.223

tiangolo/full-stack-fastapi-template Stars: 15.6k License: MIT full-stack-fastapi-template 是一个现代化的全栈 Web 应用模板。 使用 FastAPI 构建 Python 后端 API。使用 SQLModel 进行 Python SQL 数据库交互&#xff08;ORM&#xff09;。Pydantic 用于数据验证和设…

【MYSQL】MySQL整体结构之系统服务

一、系统服务层 学习了MySQL网络连接层后&#xff0c;接下来看看系统服务层&#xff0c;MySQL大多数核心功能都位于这一层&#xff0c;包括客户端SQL请求解析、语义分析、查询优化、缓存以及所有的内置函数&#xff08;例如&#xff1a;日期、时间、统计、加密函数...&#xff…

【活动推荐】Alibaba Cloud Linux实践操作学习赛,有电子证书及丰厚奖品!

前言 这里给小伙伴们推荐一个新活动&#xff0c;有电子证书可以拿的哦~ 这是开放原子基金会的官网&#xff0c;进入赛事界面。 可以看到下面有一个龙蜥社区Alibaba Cloud Linux实践操作学习赛。点击此处进行报名。 双方都会提供电子证书的&#xff0c;但是具体还是看完成的质…

目标检测——大规模鱼类数据集

一、重要性及意义 生物多样性研究&#xff1a;鱼类是水生生态系统中的重要组成部分&#xff0c;其种类多样性对于维持生态平衡至关重要。通过对鱼类进行准确的分割和分类&#xff0c;可以更好地了解不同鱼类的生态习性、分布情况以及与其他生物的相互作用&#xff0c;进而为保护…

c 解数独(通用方法,适用于9×9 数独)

折腾了一周时间&#xff0c;终于搞定99数独通用方法 思路&#xff1a;1.生成每行空位的值&#xff0c;也就是1-9中除去非0的数。 2.用行&#xff0c;列&#xff0c;宫判断每行中每个空位的最小取值范围后再重新生成每行。 3.随机提取生成的9行&#xff0c;判断每列之和是否等…

lv_micropython to download and building

想要在ESP32-C3使用Micropython开发GUI&#xff0c;所以需要编译lv_micropython&#xff0c;当前github上的版本是9.1.0。 一、开发环境 因为编译lv_micropython需要在linux系统下&#xff0c;但是我的电脑是windows系统&#xff0c;所以我在windows系统上安装了VMware虚拟机&…

Elasticsearch:从 ES|QL 到 PHP 对象

作者&#xff1a;来自 Elastic Enrico Zimuel 从 elasticsearch-php v8.13.0 开始&#xff0c;你可以执行 ES|QL 查询并将结果映射到 stdClass 或自定义类的 PHP 对象。 ES|QL ES|QL 是 Elasticsearch 8.11.0 中引入的一种新的 Elasticsearch 查询语言。 目前&#xff0c;它在…

SDK-0.7.8-Release-实体管理 - ApiHug-Release

&#x1f917; ApiHug {Postman|Swagger|Api...} 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: 有爱&#xff0c;有温度&#xff0c;有质量&#xff0c;有信任ApiHug - API design Copilot - IntelliJ IDEs Plugin | Marketplace 更多精彩…

word并排比较

Word并排比较是一种在Microsoft Word文档中同时显示两个文本内容并进行比较的功能。这种比较通常用于查看文档的不同版本之间的差异&#xff0c;或者比较两个不同来源的文本内容。 在Word中进行并排比较通常可以通过以下步骤实现&#xff1a; 通过这种方式&#xff0c;Word的并…

使用Docker定时备份数据

文章目录 一、Docker镜像制作二、MySQL数据备份三、Minio数据备份四、数据跨服务器传输五、Nginx日志分割六、Docker启动七、Docker备份日志 一、Docker镜像制作 镜像制作目录 mc下载地址 - rsyncd.conf # https://download.samba.org/pub/rsync/rsyncd.conf.5port 873 uid …

JVM、maven、Nexus

一、jvm简介 1.应用程序申请内存时出现的三种情况&#xff1a; ①OOM:内存溢出&#xff0c;是指应用系统中存在无法回收的内存或使用的内存过多&#xff0c;最终使得程序运行要用到的内存大于能提供的最大内存。此时程序就运行不了&#xff0c;系统会提示内存溢出&#xff0c…

【c 语言】函数前面的返回类型

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;C语言 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步&…