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

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

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.mzph.cn/news/814739.shtml

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

相关文章

使用UDP实现TCP的功能,会带来什么好处?

比较孤陋寡闻&#xff0c;只知道QUIC TCPQUIC握手延迟TCP需要三次握手TLS握手三次握手TLS握手放在一起&#xff0c;实现0RTT头阻塞问题TCP丢失保文&#xff0c;会影响所有的应用数据包基于UDP封装传输层Stream&#xff0c;Stream内部保序&#xff0c;Stream之间不存在相互影响…

Coursera吴恩达《深度学习》课程总结(全)

这里有Coursera吴恩达《深度学习》课程的完整学习笔记&#xff0c;一共5门课&#xff1a;《神经网络和深度学习》、《改善深层神经网络》、《结构化机器学习项目》、《卷积神经网络》和《序列模型》&#xff0c; 第一门课&#xff1a;神经网络和深度学习基础&#xff0c;介绍一…

每日一题(leetcode238):除自身以外数组的乘积--前缀和

不进阶是创建两个数组&#xff1a; class Solution { public:vector<int> productExceptSelf(vector<int>& nums) {int nnums.size();vector<int> left(n);vector<int> right(n);int mul1;for(int i0;i<n;i){mul*nums[i];left[i]mul;}mul1;for…

攻防世界12-baby_web

12-baby_web 题目说想想初始页面是哪个&#xff0c;一般都是index.php&#xff0c;然后如题分析即可。 我们在链接后面拼接上/index.php&#xff0c;返回后发现界面又回到了1.php&#xff0c;有可能是重定向。 我们点击检查-网络&#xff0c;发现没有index的请求&#xff0c;…

牛客_顺时针打印矩阵_C++题解

题目来源&#xff1a;牛客 题目缩写&#xff1a;给你一个矩阵&#xff08;vector<vector<int>>&#xff09;让你将它的值按顺时针的方式存在一个一维vector<int>中&#xff0c;然后返回&#xff1b; 简要分析&#xff1a; ① 迭代&#xff0c;先打印第一…

数据预处理:删除文件夹(包括子文件夹)里面所有非RGB的图像

在做ai项目的时候&#xff0c;比如图像分类和目标检测&#xff0c;数据里面可能有rgb图和灰度图&#xff0c;但是灰度图的通道数只有1&#xff0c;而rgb图的通道数有3。 因此要进行数据预处理&#xff0c;下面代码就可以删除文件夹&#xff08;包括子文件夹&#xff09;里面所有…

编曲知识18:EQ均衡器 齿音处理 呼吸音处理 口水音处理

EQ均衡器 齿音处理 呼吸音处理 口水音处理小鹅通-专注内容付费的技术服务商https://app8epdhy0u9502.pc.xiaoe-tech.com/live_pc/l_66151c90e4b092c1187ac699?course_id=course_2XLKtQnQx9GrQHac7OPmHD9tqbv 均衡器 均衡器 Equalizer(简称EQ) 人耳接受频率:20hz—20khz …

系统架构最佳实践 -- API网关架构设计

目录 1.什么是API网关&#xff1f; 2.API网关的核心功能 3.架构设计原则 4.API网关的实现方式 5.常见的API网关工具和框架 6.实际案例分析 API网关是现代微服务架构中的重要组件&#xff0c;它充当了前端和后端微服务之间的中介。本文将介绍API网关的架构设计原则和实现方…

AI模型大PK

&#x1f916;AI模型大PK&#xff01;免费测试GPT-4等36款顶级聊天机器人 近年来&#xff0c;大型语言模型&#xff08;LLM&#xff09;的发展日新月异&#xff0c;各大科技巨头和研究机构纷纷推出了自己的聊天机器人。那么&#xff0c;如何才能知道哪个模型更强大、更智能呢&…

Leetcode 剑指 Offer II 073.爱吃香蕉的狒狒

题目难度: 中等 原题链接 今天继续更新 Leetcode 的剑指 Offer&#xff08;专项突击版&#xff09;系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 狒狒喜欢吃香蕉。这里有 N 堆香蕉&#xff0c;第 i 堆中有 piles…

华为海思数字芯片设计笔试第二套

1.声明 下面的题目作答都是自己认为正确的答案&#xff0c;并非官方答案&#xff0c;如果有不同的意见&#xff0c;可以评论区交流。 这些题目也是笔者从各个地方收集的&#xff0c;感觉有些题目答案并不正确&#xff0c;所以在个别题目会给出自己的见解&#xff0c;欢迎大家讨…

【静态分析】静态分析笔记04 - 数据流分析(理论)

参考&#xff1a; 【课程笔记】南大软件分析课程4——数据流分析基础&#xff08;课时5/6&#xff09; - 简书 --------------------------------------------------------------------------- 1. 迭代算法 本质&#xff1a;常见的数据流迭代算法&#xff0c;目的是通过迭代…

安卓ARCore:增强现实技术在Android平台上的实现及其应用

摘要 本文旨在全面剖析安卓ARCore这一Google针对Android设备开发的增强现实&#xff08;AR&#xff09;平台&#xff0c;阐述其工作原理、核心技术、性能优势与局限性以及实际应用场景&#xff0c;并辅以代码示例以增进理解。ARCore通过先进的计算机视觉技术和传感器数据融合&a…

小米暑期实习NLP算法工程师面试题8道|含解析

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学&#xff0c;针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 基于大模…

微前端框架主流方案剖析

微前端架构是为了在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。 微前端框架内的各个应用都支持独立开发部署、不…

实时智能应答3D数字人搭建2

先看效果&#xff1a; 3d数字人讲黑洞 根据艾媒咨询数据&#xff0c;2021年&#xff0c;中国虚拟人核心产业规模达到62.2亿元&#xff0c;带动市场规模达到1074.9亿元&#xff1b;2025年&#xff0c;这一数据预计将达到480.6亿元与6402.7亿元&#xff0c;同比增长迅猛。数字人可…

C++(3) —— 核心编程

一、内存区分模型 1.1 程序运行前 #include<iostream> using namespace std;// 全局变量 int g_a 10; int g_b 20;// const修饰的全局变量&#xff0c;全局常量 const int c_g_a 10; const int c_g_b 20;int main() {// 全局区// 全局变量、静态变量、常量// 创建普通…

一个巧用委托解决的问题(C#)

个人觉得是委托应用的一个很好的例子&#xff0c;故做一下分享&#xff0c;希望能帮助到您&#xff0c;内容比较简单&#xff0c;大佬可以跳过。我是做桌面医疗软件开发的&#xff0c;前段时间在做一个需求。在签发检验项目医嘱时&#xff0c;调用第三方接口&#xff0c;然后带…

Mac环境简化RSA密钥生成/校验命令

文章目录 生成RSA密钥对验证RSA密钥对 生成RSA密钥对 正常RSA密钥对生成操作命令 openssl genrsa -out rsa_private_key.pem 2048 openssl rsa -pubout -in rsa_private_key.pem -out rsa_public_key.pem通过添加环境变量来简化RSA密钥对生成操作 设置环境变量.zshrc或.bash_…

实验6-1:求整数位数(循环结构)

实验6-1&#xff1a;求整数位数&#xff08;循环结构&#xff09; 输入一个不多于9位的正整数&#xff0c;要求一、逆序输出各位数字&#xff0c;二、输出它是几位数。【输入形式】 正整数【输出形式】 逆序输出各位数字 几位数 【样例输入】 234567891 【样例输出】 1 9 8 7 …