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

news/2025/2/19 10:54:59/

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

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接口

 


http://www.ppmy.cn/news/1414076.html

相关文章

前端自动化测试的方法和工具

前端自动化测试是通过自动化工具来模拟用户操作&#xff0c;验证前端应用的功能、性能和用户体验是否符合预期的过程。以下是几种常见的前端自动化测试方法&#xff1a; 单元测试&#xff08;Unit Testing&#xff09;&#xff1a; 单元测试是针对代码中最小的可测试单元进行的…

STL--容器

vector&#xff08;向量&#xff09; 优点&#xff1a;支持随机访问&#xff0c;所以查询效率高&#xff1b;尾部插入和删除操作效率高。 缺点&#xff1a;向非尾部插入或删除元素时&#xff0c;由于可能需要移动内存中的元素&#xff0c;效率较低&#xff1b;空间大小动态增长…

6-104 图的邻接表的实现python版

在图的邻接表存储结构下(基于顶点列表和单链表实现),本题要求图类里实现2个方法函数 def addVertex(self, vex_val): def addEdge(self, f, t, cost=0): 函数接口定义: 在这里描述函数接口。例如: def addVertex(self, vex_val):def addEdge(self, f, t, cost=0): 在…

Mysql底层原理六:InnoDB 数据页结构

1.行格式 1.1 Compact行格式 1.1.1 示意图 1.1.2 准备一下 1&#xff09;建表 mysql> CREATE TABLE record_format_demo (-> c1 VARCHAR(10),-> c2 VARCHAR(10) NOT NULL,-> c3 CHAR(10),-> c4 VARCHAR(10)-> ) CHARSETascii ROW_FORMATCOM…

PyCharm Pro 2024:卓越的Python编辑开发工具,适用于Mac与Windows平台

PyCharm Pro 2024是一款专为Python开发者设计的强大编辑开发工具&#xff0c;无论是Mac还是Windows用户&#xff0c;都能从中受益良多。该软件凭借其出色的性能、丰富的功能和卓越的用户体验&#xff0c;成为Python编程界的翘楚。 作为一款高效的Python编辑器&#xff0c;PyCh…

usb_camera传输视频流编码的问题记录!

前言&#xff1a; 大家好&#xff0c;今天给大家分享的内容是&#xff0c;一个vip课程付费的朋友&#xff0c;在学习过程中遇到了一个usb采集的视频数据流&#xff0c;经过ffmpeg编码&#xff0c;出现了问题&#xff1a; 问题分析&#xff1a; 其实这个问题不难&#xff0c;关键…

idea中输入法被锁定如何清除

今天遇到一个问题&#xff1f;idea中输入法被锁定了&#xff0c;无论怎么切换输入法&#xff0c;切换中英文&#xff0c;在idea中输出的均为英文内容&#xff0c;该如何解决呢&#xff1f;&#xff08;idea官网&#xff1a;JetBrains: 软件开发者和团队的必备工具&#xff09; …

SpringBoot中的yaml 与properties文件书写格式

本文参考https://c.biancheng.net/spring_boot/example.html SpringBoot starter Spring Boot 将日常企业应用研发中的各种场景都抽取出来&#xff0c;做成一个个的 starter&#xff08;启动器&#xff09;&#xff0c;starter 中整合了该场景下各种可能用到的依赖&#xff…