electron+Vue3构建桌面应用之IPC通讯
最近在做一个C/S架构的项目预研
过程中遇到 Electron 与 Vue3 通讯的问题,费劲巴力的在网上找方案,发现都不理想,最终攻克之后,计划将过程写下来,供有需求的同学白嫖!
开始之前,先说一件重要的事情:
看文档
看官方文档
一定要看官方文档
好,言归正传。
先说需求,我是做一个 C/S 架构的串口数据获取的需求预研。另外,项目组 Vue 人才较多,所以,期望后期可以接上 Vue。
因此,我的需求是:在 Vue 项目中,能够获取 串行端口 传递过来的数据。
目前系统和版本情况:
- 电脑系统:Windows 11
- Electron 版本:28.1.0
- Vue 版本:3.4.21
有同学就说了,你 Vue 要获取串口信息,不是可以直接使用 Web Serial API 吗?
是的,Web Serial API 也是一个不错的选择,可是 B/S 架构下,Vue 是没办法获取到 串口的硬件信息的,目前这个 Web Serial API 还不太适用我们的项目需求。再者,预研嘛,技术储备多多益善!
今天先聊聊核心点,Electron 与 Vue3 通讯的问题,随后会写一篇详细的文章来记录具体步骤。
核心一
Electron 的 main.js 中,在合适的时机通过 send 发送相关信号和数据
示例代码:
mainWindow.webContents.send('serial-datas', data);
核心二
Electron 的 preload.js 中,完成上述操作的预加载
示例代码:
const { contextBridge, ipcRenderer } = require('electron')contextBridge.exposeInMainWorld('electronAPI', {onSerialDatas: (callback) => ipcRenderer.on('serial-datas', (_event, value) => callback(value))
})
注意,Electron 的 main.js 中要加载 preload.js 这个预加载文件,参考代码:
const createWindow = () => {mainWindow = new BrowserWindow({width: 1200,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: true,preload: path.join(__dirname, '/preload.js')},})mainWindow.loadURL('http://localhost:5173')mainWindow.on('closed', function () {mainWindow = null;});
}
核心三
Vue 的合适位置,接收 Electron 发送过来的数据。
我这里直接封装了一个监听文件,在 Vue 的 main.js 文件中进行了引入
Vue 的 getPortsFromElectron.js 示例代码:
/*** 接收 electron 发送过来的数据*/
window.electronAPI.onSerialDatas((value) => {/*** 数据转换(value 为 Uint8Array 格式的数据):* 根据你接收到的具体数据格式,你可能需要进行更复杂的解析。* 这取决于你与设备之间的通信协议以及你发送和接收数据的方式。* 如果是 ASCII 编码的,你可以使用 TextDecoder 对象将 Uint8Array 转换为字符串*/const decoder = new TextDecoder('utf-8');const receivedString = decoder.decode(value);console.log(receivedString);
})
Vue 的 main.js 示例代码:
import { createApp } from 'vue'
import...import './utils/getPortsFromElectron'const app = createApp(App)
...
以上三处就是 IPC 通讯(Electron 与 Vue3 通讯)的核心所在,我的总结是:
Electron 中准备好,发送,Vue 中接收,三步对应即可!
以上信息是在各种查找无果的情况下,突然想起去官网看文档,果然找到了可行的方案!
核心内容记录至此,后续更新详细过程。
相关文章:
electron+Vue3构建桌面应用之IPC通讯
最近在做一个C/S架构的项目预研 过程中遇到 Electron 与 Vue3 通讯的问题,费劲巴力的在网上找方案,发现都不理想,最终攻克之后,计划将过程写下来,供有需求的同学白嫖! 开始之前,先说一件重要的…...
html球体涨水
简单 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>div…...
ubuntu手动编译opencv 4.9.0遇到的问题汇总
ubuntu手动编译opencv 4.9.0遇到的问题汇总 编译流程 以4.9.0版本为例,可参考:https://docs.opencv.org/4.9.0/d2/de6/tutorial_py_setup_in_ubuntu.html 编译加速 https://blog.csdn.net/tfb760/article/details/104030841 ippicv_2021.10.0_lnx_i…...
SEO之搜索引擎的工作原理(三)
初创企业需要建站的朋友看这篇文章,谢谢支持:我给不会敲代码又想搭建网站的人建议 (接上一篇。。。) 排名 经过搜索引擎蜘蛛抓取页面,索引程序计算得到倒排索引后,搜索引擎就准备好可以随时处理用户搜索了…...
开发语言漫谈-python
python的语法和C完全不同,但是它也是C写的。也就是想成为高手,C是必备武功。不是每个人都想成为武林高手。所以客观上需要个简单上手开发效率高的语言,就这样python诞生了。python的发明人其实不喜欢蟒蛇,但是不知道为啥选这个名字…...
JVM指令收集
1. 栈和局部变量操作 1.1 将常量压入栈的指令aconst_null 将null对象引用压入栈 iconst_m1 将int类型常量-1压入栈 iconst_0 将int类型常量0压入栈 iconst_1 将int类型常量1压入栈 iconst_2 将int类型常量2压入栈 iconst_3 将int类型常量3压入栈 iconst_4 将int类型常量4压入…...
小程序解析二维码:jsQR
1.了解jsQR jsQR是一个纯javascript脚本实现的二维码识别库,不仅可以在浏览器端使用,而且支持后端node.js环境。jsQR使用较为简单,有着不错的识别率。 2.效果图 3.二维码 4.下载jsqr包 npm i -d jsqr5.代码 <!-- index.wxml --> &l…...
【verilog 设计】 reg有没有必要全部赋初值?
一、前言 在知乎发现“reg有没有必要全部赋初值”这个问题,与自己近期对Verilog reg的进一步学习相契合,此文对这个问题进行总结。 二、reg的初值赋值方式 就语法意义赋初值而言,就是在声明reg时对其赋值。在工程中,对于数字系…...
NLP问答系统:使用 Deepset SQUAD 和 SQuAD v2 度量评估
目录 一、说明 二、Deepset SQUAD是个啥? 三、问答系统(QA系统),QA系统在各行业的应用及基本原理 3.1 医疗 3.2 金融 3.3 顾客服务 3.4 教育 3.5 制造业 3.6 法律 3.7 媒体 3.8 政府 四、在不同行业使用QA系统的基本原理 五、关于…...
php开发中如何防止抓包工具伪造请求
要防止抓包工具伪造请求,采取一系列的技术和策略来增强应用程序的安全性。以下是一些关键步骤和最佳实践: 1. 使用HTTPS 确保应用程序使用HTTPS协议进行通信。HTTPS通过TLS/SSL加密客户端和服务器之间的数据传输,这使得抓包工具捕获到的数据…...
密码学 | 椭圆曲线数字签名方法 ECDSA(下)
目录 10 ECDSA 算法 11 创建签名 12 验证签名 13 ECDSA 的安全性 14 随机 k 值的重要性 15 结语 ⚠️ 原文:Understanding How ECDSA Protects Your Data. ⚠️ 写在前面:本文属于搬运博客,自己留着学习。同时,经过几…...
拟态个人主页UI源码
拟态个人主页 效果图源代码领取源码 效果图 PC端 移动端 源代码 index.php <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>孤客 |佩恩</title><meta name"keywords" co…...
移动硬盘无法打开?别慌!这里有救星!
移动硬盘作为现代生活中重要的数据存储工具,承载着我们大量的文件和数据。然而,有时我们会遇到移动硬盘无法打开的情况,这往往让人焦虑不已。那么,当移动硬盘无法打开时,我们应该如何应对呢? 移动硬盘无法打…...
windows下已经创建好了虚拟环境,但是切换不了的解决方法
用得多Ubuntu,今天用Windows重新更新anaconda出问题,重新安装之后,打开pycharm发现打开终端之后,刚开始是ps的状态,后面试了网上改cmd的方法,终端变成c盘开头了 切换到虚拟环境如下:目前的shell…...
Java反序列化基础-类的动态加载
类加载器&双亲委派 什么是类加载器 类加载器是一个负责加载器类的对象,用于实现类加载的过程中的加载这一步。每个Java类都有一个引用指向加载它的ClassLoader。而数组类是由JVM直接生成的(数组类没有对应的二进制字节流) 类加载器有哪…...
课堂行为动作识别数据集
一共8884张图片 xml .txt格式都有 Yolo可直接训练 已跑通 动作类别一共8类。 全部为教室监控真实照片,没有网络爬虫滥竽充数的图片,可直接用来训练。以上图片均一一手工标注,标签格式为VOC格式。适用于YOLO算法、SSD算法等各种目标检测算法…...
【数据库】MVCC
MVCC是一种用来解决读写冲突的无锁并发控制,也就是为事务分配单项增长的时间戳,为每个修改保存一个版本,版本与事务时间戳关联,读操作只读该事务开始前的数据库的快照 MVCC,全称Multi-Version Concurrency Control&am…...
快速排序题目SelectK问题
力扣75.颜色分类 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums ,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 sor…...
es6解构赋值
ES6解构赋值是一种简洁的为变量赋值的方式,它允许我们从数组或对象中提取值并赋给对应的变量。 解构赋值在ES6中被引入,主要目的是为了简化代码,提高代码的可读性。以下是解构赋值的基本用法: 数组解构:当我们需要从数…...
Jenkins上面使用pnpm打包
问题 前端也想用Jenkins的CI/CD工作流。 步骤 Jenkins安装NodeJS插件 安装完成,记得重启Jenkins。 全局配置nodejs Jenksinfile pipeline {agent anytools {nodejs "18.15.0"}stages {stage(Check tool version) {steps {sh node -vnpm -vnpm config…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级
在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
BLEU评分:机器翻译质量评估的黄金标准
BLEU评分:机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域,衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标,自2002年由IBM的Kishore Papineni等人提出以来,…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)
UniApp 集成腾讯云 IM 富媒体消息全攻略(地理位置/文件) 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型,核心实现方式: 标准消息类型:直接使用 SDK 内置类型(文件、图片等)自…...
