Electron学习指导

news2025/1/21 15:22:18

Electron学习指导

一、开始上手

1.1介绍

Electron = Chromium + Node.js + Native APIs

官方说：

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS 和 Linux——不需要本地开发 经验。

大佬说：

Electron 是一个前端框架，可用于构建跨平台的桌面应用程序，桌面应用程序指的是可以在电脑上安装的软件（如QQ、浏览器、酷狗音乐、Skype、微信开发者工具、VS Code、Aotm、Postman等）。与 Java、C++ 等语言相同，前端技术也可用于桌面应用程序的开发。开发者可使用 JavaScript、HTML 和 CSS 等前端基础技术，结合 Node.js 进行开发。最重要的是，使用 Electron 开发的桌面应用程序，可以在 Windows、macOS 和 Linux 系统上无缝运行，实现跨平台开发。

我们可以使用 HTML 和 CSS 创建一个漂亮的用户界面，使用 JavaScript 处理用户输入和数据，使用 Node.js 处理系统调用和后台任务等等，使用 Electron 构建桌面应用程序就像在编写网页一样，相当容易上手。

我说：

要想Web应用变成桌面应用程序 ，就用前端技术写个 Web 应用，然后套上 Electron 这个外套，就变成了桌面应用程序。

优点：
  1. 跨平台支持：首先便是跨平台，Electron 框架可在主流的操作系统（例如 Windows、Mac OS 和 Linux 等）上运行，可以有效地减少开发者在不同平台上开发应用程序的工作量和时间。一套代码多平台运行，这点很重要。
  2. 前端技术支持：通过使用 HTML、CSS 和 JavaScript 等前端技术栈进行开发，拥有大量的UI组件和模板，开发出来的桌面应用界面更加美观、交互体验更好。
  3. 本地能力支持：Electron 除了支持 Web API，而且还允许调用很多操作系统底层 API 来访问计算机的硬件设备，甚至可以自己用 C++、Go 来编写本地模块，可以完成很多 Web 应用无法做到的事情。
  4. 调试测试支持：Electron 框架开发的应用程序是基于Chrome内核的，可以直接使用Chrome内核的开发者工具进行调试和测试，提高了开发效率。
  5. 自动更新支持：Electron 应用程序在发布后可以自动更新，这意味着当有新版本可用时，用户会自动收到更新提示，无需手动下载和安装更新文件。
缺点：
  1. 打包后的应用体积巨大：一个功能不算多的桌面应用，通过 electron-builder 压缩打包后至少也要 100MB。如果开发者不做额外的 Hack 工作的话，用户每次升级应用程序，还要再下载一次同样体积的安装包，这对于应用分发来说是一个不小的负担。但随着网络环境越来越好，用户磁盘的容积越来越大，此问题给用户带来的损失会慢慢被削弱。
  2. 开发复杂度较大：跨进程通信是基于 Electron 开发应用必须要了解的知识点，虽然 Electron 为渲染进程提供了 remote 模块来方便开发人员实现跨进程通信，但这也带来了很多问题，比如某个回调函数为什么没起作用、主进程为什么报了一连串的错误等，这往往给已经入门但需要进阶的开发者带来困惑。
  3. 安全性问题：Electron 把一些有安全隐患的模块和 API 都设置为默认不可用的状态，但这些模块和 API 都是非常常用的，因此有时开发者不得不打开这些开关。但是，一旦处理不当，就可能导致开发的应用存在安全隐患，给开发者乃至终端用户带来伤害。不过Electron 也有单独的一章讲述安全问题。
  4. 资源消耗较大：底层基于的 Chromium 浏览器一直以来都因资源占用较多被人诟病，目前来看这个问题还没有很好的解决办法，只能依赖 Chromium 团队的优化工作。
  5. 版本发布过快：为了跟上Chromium的版本发布节奏，Electron也有非常频繁的版本发布机制，每次 Chromium改动，都可能导致Electron出现很多新问题，甚至Electron的稳定版本都有很多未解决的问题

1.2快速体验

Electron Fiddle是Electron官方提供的快速演示或体验Electron API的工具，在Electron Fiddle内部集成了Electron的开发环境。通过该工具可以让开发者迅速体验Electron的某些新特性，对于初学者来说很友好

在这里插入图片描述
在这里插入图片描述

Electron项目代码
  • index.html是项目的布局结构
  • style.css是项目布局样式
  • renderer.js是运行在浏览器环境(渲染进程)
  • preload.js是运行在浏览器环境
  • main.js是运行在Node环境

**注：**默认情况下每次打开Electron Fiddle都会重新的生成项目模板，代码模板可以以链接形式进行分享。

1.3从零开始

1.3.1、项目结构，Electron项目至少需要3个文件
  • index.html
  • package.json（npm init -y）
  • main.js（习惯叫做main.js）

创建一个空白目录，然后分别创建上述3个文件

1.3.2、安装Electron依赖

因为Electron依赖于Nodejs。

**注：**二者有版本要求，比如Electron的v25.0.1版本就要求nodejs必须大于等于18.15.0版本。

参考对应版本 Electron Releases

#安装 electron
npm install electron --save-dev

检测是否成功

npm config list

在这里插入图片描述

1.3.3、修改package.json文件
"scripts": {
    "start": "electron ."
  }

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^18.1.0"
  }
}
1.3.4、创建main.js文件
// electron 主进程
const {app, BrowserWindow} = require('electron');
// 处理路径
const path = require('path')

// 保持对window对象的全局引用，如果不这么做的话，当JS对象被垃圾回收的时候，window对象将会自动的关闭
let win;

// 创建应用窗口
function createWindow() {
  // 实例化应用窗口。
  win = new BrowserWindow({
    width: 800,
    height: 600,
    titleBarStyle: 'hidden',
    titleBarOverlay: true, // win 专用
    webPreferences: {
      preload: path.join(__dirname, './preload.js'),
      nodeIntegration: true,
    },
   });

  // 加载一个页面
  win.loadFile('./index.html');
//   win.loadURL('https://blog.51cto.com/u_16213320/8719454');

  // 打开开发者工具
  // win.webContents.openDevTools();

  // 当 window 被关闭，这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    win = null;
  });
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow);

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow();
  }
});

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

抽离目录写法：

// 热加载 用于修改完直接看效果
npm install --save-dev electron-reloader

const { app,BrowserWindow} = require('electron')
 
// 开启热加载
const reloader = require('electron-reloader')
reloader(module)
 
app.on('ready',()=>{
  // 新建窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  });
  // 让主窗口加载文件 html文件
  mainWindow.loadFile('./index.html');
 
  // 引入自定义菜单
  require('./menu')
})

menu.js

const { BrowserWindow, Menu } = require('electron')

// 配置模板
const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建窗口',
        click() {
          new BrowserWindow({
            width: 300,
            height: 200,
          })
        },
      },
      {
        label: '保存',
      },
      {
        label: '另存为',
      },
      {
        label: '首选项',
      },
      {
        label: '退出',
      },
    ],
  },
  {
    label: '编辑',
  },
  {
    label: '关于我们',
  },
]

// 菜单对象构建该模板,生成菜单对象
const menu = Menu.buildFromTemplate(template)
// 设置我们构建好的菜单
Menu.setApplicationMenu(menu)
1.3.5、启动预览窗口
npm run start

在这里插入图片描述

二、基本概念

2.1主进程（node）

在这里插入图片描述

2.1.1、BroswerWindow用来创建并按制浏览器窗口
  • width/height指定窗口大小
  • titleBarStyle窗口标题栏样式
  • titleBarOverlay定义windows的标题栏
  • loadFile实例方法，加载本地html文件
  • loadURL实例方法，加载网络地址
2.1.2、app控制应用程序的事件生命周期
  • ready在Election完成初始化时触发的生命周期
  • active在Electron被激活（前台运行）时触发该生命周期

**注：**修改主进程后代码需要重启应用，快捷键Ctrl+C (win 按两次)

2.2渲染器进程

2.2.1、主进程中 (main.ts)
import { app, BrowserWindow, ipcMain } from 'electron';

app.on('ready', () => {
  const mainWindow = new BrowserWindow();

  ipcMain.handle('sumNumbers', async (event, num1: number, num2: number) => {
    return num1 + num2;
  });
});
2.2.2、渲染进程中 (renderer.ts)
import { ipcRenderer } from 'electron';

async function sumNumbers(num1: number, num2: number) {
  try {
    const result = await ipcRenderer.invoke('sumNumbers', num1, num2);
    console.log('Result:', result); // 输出 8
  } catch (error) {
    console.error('Error:', error);
  }
}
sumNumbers(5, 3);

2.3打包应用

当所有功能开发完毕后，将Electron打包成不同平台的应用，Electron提供了打包工具Electron Forge，但实际应用中大家用的比较多的是electron-builder。

2.3.1安装
npm install  electron-builder --save-dev
2.3.2配置脚本
{
	...
	"scripts": {
		"start": "electron .",
		"build:mac": "electron-builder --mac",
		"build:win": "electron-builder --win",
	},
	...
}
2.3.3生成图标

在项目根目录中创建build目录，在准备一张png格式的图片，将其命名为icon.png放到build中，关于图标

2.3.4执行打包任务
# 打包mac 系统的应用
npm run build:mac
# 打包win系统的应用
npm run build:win

注意：windows系统开发不能打包mac

三、项目开发

3.1创建项目（electron-vite）

前提条件

electron-vite 需要 Node.js 版本 18+，20+ 和 Vite 版本 4.0+

npm i electron-vite -D

搭建第一个 electron-vite 项目

npm create @quick-start/electron@latest

yarn create @quick-start/electron

pnpm create @quick-start/electron

然后按照提示操作即可!

✔ Project name: … <electron-app>
✔ Select a framework: › vue
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes

Scaffolding project in ./<electron-app>...
Done.

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Electron + Vue 项目，运行:

# npm 6.x
npm create @quick-start/electron my-app --template vue

# npm 7+, extra double-dash is needed:
npm create @quick-start/electron my-app -- --template vue

# yarn
yarn create @quick-start/electron my-app --template vue

# pnpm
pnpm create @quick-start/electron my-app --template vue

在这里插入图片描述

了解更多有关 create-electron 的信息。

3.2项目结构

main目录对应是的主进程代码

renderer目录对应的是渲染进程的代码，eg:Vue

preload目录对应的是预加脚本的代码

在这里插入图片描述

3.3打包应用

将准备好的图片放到build目录中，然后npm run build:mac 或npm run build:win

#没有- 默认打包本机 下面表示打包mac和win

"build": "electron-builder -mw"

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

FENDI CLUB啤酒，为何女生喜欢？

FENDI CLUB啤酒，为何女生喜欢？

精酿啤酒已经成了女生喜欢的饮品&#xff0c;在日剧《无法成为野兽的我们》里&#xff0c;主人公小晶永远保持标准笑容&#xff0c;完美完成所有的工作。只有一个人的时候&#xff0c;她才会放下习惯性的微笑&#xff0c;显露自己的疲惫。小晶缓解疲惫&#xff0c;就是下班后去…
阅读更多...
【C语言深度解剖】:（11）函数指针、函数指针数组、指向函数指针数组的指针、回调函数

【C语言深度解剖】:（11）函数指针、函数指针数组、指向函数指针数组的指针、回调函数

&#x1f921;博客主页&#xff1a;醉竺 &#x1f970;本文专栏&#xff1a;《C语言深度解剖》《精通C指针》 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多C语言深度解剖点击专栏…
阅读更多...
Django Celery 的配置及使用---最详细教程

Django Celery 的配置及使用---最详细教程

Django Celery 的配置及使用 Redis提供队列消息功能 一、安装redis 系统版本&#xff1a;Ubuntu 20.041、获取最新软件包 sudo apt update sudo apt install redis-server2、安装完成后&#xff0c;Redis服务器会自动启动。查看redis是否启动成功 sudo systemctl status …
阅读更多...
JVM运行时内存:虚拟机栈

JVM运行时内存:虚拟机栈

文章目录 1. 概述2. 栈针3. 栈针内部结构3.1 局部变量表3.2 操作数栈3.3 动态链接3.4 方法返回地址3.5 一些附加信息 运行时内存整体结构如下图所示: 1. 概述 如何理解栈管运行&#xff0c;堆管存储&#xff1f; 角度一&#xff1a;GC;OOM角度二&#xff1a;栈、堆执行效率角…
阅读更多...
信息管理系统升级改造项目：需求分析工具与实践

信息管理系统升级改造项目：需求分析工具与实践

关键词&#xff1a;出入境信息管理系统、升级改造项目、需求分析实践、逆向工程、PowerDesigner、Axure Pro、信息系统优化策略 文章重点&#xff1a;本文以出入境信息管理系统的升级改造项目为背景&#xff0c;详细阐述了信息系统需求分析的实践过程&#xff0c;特别是如何通过…
阅读更多...
Python实现缓存机制库之cachetools使用详解

Python实现缓存机制库之cachetools使用详解

概要 在数据密集型应用中，缓存是优化性能和响应速度的关键技术之一。Python的cachetools库提供了一套灵活且强大的工具，用于在Python项目中实现缓存机制。本文将全面介绍cachetools的安装、特性、基本与高级功能，并结合实际应用场景，展示其在项目中的应用。 安装 安装cac…
阅读更多...
文字游侠AI丨简直是写作神器，头条爆文一键生成稳定赚米！附渠道和详细教程（只需四步）！

文字游侠AI丨简直是写作神器，头条爆文一键生成稳定赚米！附渠道和详细教程（只需四步）！

在数字时代的浪潮中&#xff0c;人们不断寻求网络空间中的商机&#xff0c;期望在互联网的浩瀚海洋里捕捉到稳定的财富。随着人工智能技术的突飞猛进&#xff0c;越来越多的AI工具被融入到各行各业&#xff0c;开辟了新天地&#xff0c;带来了创新的盈利模式。 其中&#xff0c…
阅读更多...
PCB供电夹子DIY

PCB供电夹子DIY

在刷小红书的时候&#xff0c;看到了清华卓晴教授【https://zhuoqing.blog.csdn.net/】DIY的供电夹子&#xff0c;感觉对于自己DIY PCB的时候供电会比较方便&#xff0c;物料也比较简单&#xff0c;打算复刻一下。 使用物料 1、小夹子&#xff0c;文具店都有卖&#xff0c;选…
阅读更多...
【Transformer-BEV编码（9）】Sparse4D v2 v3源代码分析。稀疏感知方向新的baseline，相机参数泛化能力差的问题。

【Transformer-BEV编码（9）】Sparse4D v2 v3源代码分析。稀疏感知方向新的baseline，相机参数泛化能力差的问题。

前言&#xff1a; 基于BEV的稠密融合算法或许并不是最优的多摄融合感知框架。同时特征级的多摄融合也并不等价于BEV。这两年&#xff0c;PETR系列(PETR, PETR-v2, StreamPETR) 也取得了卓越的性能&#xff0c;并且其输出空间是稀疏的。在PETR系列方法中&#xff0c;对于每个in…
阅读更多...
这10款安卓APP，简直好用到爆！

这10款安卓APP，简直好用到爆！

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频http://AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频 1.追书——追书神器 追书神器是小说追新大神&#xff0c;全网实…
阅读更多...
Online RL + IL :Policy Improvement via Imitation of Multiple Oracles

Online RL + IL :Policy Improvement via Imitation of Multiple Oracles

NIPS 2020 paper code 如何利用多个次优专家策略来引导智能体在线学习&#xff0c;后续有多个文章研究该设定下的RL。 Intro 论文探讨了在强化学习&#xff08;RL&#xff09;中&#xff0c;如何通过模仿多个次优策略&#xff08;称为oracle&#xff09;来提升策略性能的问题…
阅读更多...
Qt 跨平台客户端开发框架

Qt 跨平台客户端开发框架

Qt 是一个流行的跨平台应用程序开发框架&#xff0c;用于开发图形用户界面&#xff08;GUI&#xff09;应用程序。尽管 Qt 提供了丰富的工具和功能&#xff0c;但在开发 Qt 客户端应用程序时&#xff0c;仍然可能面临一些技术难点。北京木奇移动技术有限公司&#xff0c;专业的…
阅读更多...
没人讲清楚！我来讲！---- Ubuntu 20.04中下载配置Snort3，参数讲解及实现协议警报

没人讲清楚！我来讲！---- Ubuntu 20.04中下载配置Snort3，参数讲解及实现协议警报

文章目录 Snort一、Snort介绍1.1 概述1.2 主要功能1.3 关键特性 二、安装Snort三、配置Snort规则集四、配置Snort4.1 配置网卡4.2 启动参数4.3 自定义规则参数4.4 警报测试 最近刚好有网络安全的学习需求&#xff0c;看了好多文章&#xff0c;感觉都没有讲的很清楚。于是总结了…
阅读更多...
JavaScript-基本数据类型和变量

JavaScript-基本数据类型和变量

基本数据类型 JavaScript支持数字、字符串和布尔值3种基本数据类型 字符串型 字符串型是JavaScript用来表示文本的数据类型&#xff0c;字符串通常由单引号或双引号括起来&#xff0c;如果字符串存在特殊字符&#xff0c;可以用转义字符代替 数字型 数字型也是JavaScript中的基…
阅读更多...
【自然语言处理】二元文法模型

【自然语言处理】二元文法模型

实验名称 二元文法模型 实验目的1.掌握N-gram文法的公式&#xff1b; 2.理解语言模型的实现过程&#xff1b; 3.掌握简单的平滑方法&#xff1b; 4.用代码编程实现2元语言模型&#xff0c;即一阶马尔可夫链。 实验内容&#xff1a;使用免费的中文分词语料库&#xff0c;如人民…
阅读更多...
软考：数据流图案例

软考：数据流图案例

阅读下列说明和图&#xff0c;回答问题1至问题4。 一、说明 某医院欲开发病人监控系统。该系统通过各种设备监控病人的生命体征&#xff0c;并在生命体征异常时向医生和护理人员报警。该系统的主要功能如下&#xff1a; &#xff08;1&#xff09;本地监控&#xff1a;定期获…
阅读更多...
Ubuntu20.4部署Cuda12.4

Ubuntu20.4部署Cuda12.4

准备Ubuntu20.4 VM 安装Cuda12.4 1.进入如下界面安装安装Cuda12.4版本&#xff1a; CUDA Toolkit 12.4 Update 1 Downloads | NVIDIA Developerhttps://developer.nvidia.com/cuda-downloads?target_osLinux&target_archx86_64&DistributionUbuntu&target_vers…
阅读更多...
Swift知识点（三）

Swift知识点（三）

11. init、deinit、可选链、协议、元类型 构造和析构 构造方法 构造方法是一种特殊的方法 一个对象创建完毕后&#xff0c;都需要调用构造方法进行初始化&#xff08;比如属性的初始化&#xff09; 验证&#xff1a;init方法是在对象创建完毕的时候调用 回到存储属性 在对…
阅读更多...
【资源汇总】GIS/RS相关软件包+数据分享（直接获取附链接）

【资源汇总】GIS/RS相关软件包+数据分享（直接获取附链接）

01软件类 ArcGIS 10.2 链接&#xff1a;https://pan.baidu.com/s/1euHa3eTiaTjiOu-zxsi9eA?pwdnjov ArcGIS Pro 2.8.6 链接&#xff1a;https://pan.baidu.com/s/1Y3AQshCGL7tA1zdUc7s9PQ?pwdlkic ENVI 5.3 链接&#xff1a;https://pan.baidu.com/s/14k4IVlYIheNOr2to…
阅读更多...
visual studio 2017重命名解决方案或项目名称

visual studio 2017重命名解决方案或项目名称

1.解决方案->右键->重命名->新的名字 2.项目->右键->重命名->新的名字 3.修改程序集和命名空间名称 项目->右键->属性->修改程序集名称和命名空间名称 4.搜索换名 Ctrl-F->输入旧名称->搜索->将所有旧名称改为新名称&#xff08;注意是整…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023