electron+Vue3构建桌面应用之IPC通讯

这篇具有很好参考价值的文章主要介绍了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 中接收,三步对应即可!

以上信息是在各种查找无果的情况下,突然想起去官网看文档,果然找到了可行的方案!

核心内容记录至此,后续更新详细过程。文章来源地址https://www.toymoban.com/news/detail-861572.html

到了这里,关于electron+Vue3构建桌面应用之IPC通讯的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • electron+vue3全家桶+vite项目搭建【13.1】ipc通信的使用,主进程与渲染进程之间的交互

    electron项目常常由一个主进程和多个渲染进程构成,渲染进程之间是隔离的,而所有渲染进程都和主进程共享资源。 所有的渲染进程都是由主进程创建的 每个窗口都对应着一个渲染进程 所有的渲染进程共享一个主进程 我们主进程与渲染进程交互,渲染进程与渲染进程交互【

    2024年02月10日
    浏览(19)
  • Electron-ChatGPT桌面端ChatGPT实例|electron25+vue3聊天AI模板EXE

    基于 electron25+vite4+vue3 仿制chatgpt客户端聊天模板 ElectronChatGPT 。 electron-chatgpt 使用最新桌面端技术 Electron25.x 结合 Vite4.x 全家桶技术开发跨端模仿ChatGPT智能聊天程序模板。支持 经典+分栏两种布局、暗黑+明亮主题模式,集成electron封装多窗口及通讯 功能。 编码工具:vscode 框架

    2024年02月08日
    浏览(10)
  • 使用vue3+vite+elctron构建小项目介绍Electron进程间通信

    进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。 由于主进程和渲染器进程在 Electron 的进程模型具有不同的职责,因此 IPC 是执行许多常见任务的唯一方法,例如从 UI 调用原生 API 或从原生菜单触发 Web 内容的更改。 在 Electron 中,进程使用 ipcM

    2024年02月06日
    浏览(21)
  • electron+vue3全家桶+vite项目搭建【25】使用electron-updater自动更新应用

    demo项目地址 electron-updater官网 我们不可能每次发布新的版本都让用户去手动下载安装最新的包,而是应用可以自动下载新包进行覆盖安装,electron-updater就可以非常方便的实现这个功能 引入依赖 实测用pnpm安装打包运行会有问题,这里还是推荐使用npm管理依赖 配置electron-bui

    2024年02月14日
    浏览(16)
  • electron+vue3全家桶+vite项目搭建【24】设置应用图标,打包文件的图标

    demo项目地址 在electron中,我们可以通过electron-builder的配置文件来设置打包后的应用图标 因为mac环境下的图标需要特殊格式,这里我们可以利用electron-icon-builder进行配置 1.引入相关依赖 加入安装过程中卡在了 phantomjs-2.1.1-windows.zip的下载,可以直接去github上下载 这里我也放一

    2024年02月17日
    浏览(16)
  • electron+vue3全家桶+vite项目搭建【23】url唤醒应用,并传递参数

    demo项目地址 很多场景下我们都希望通过url快速唤醒应用,例如百度网盘,在网页中唤醒应用,并传递下载链接,在electron中要实现这样的效果,就需要针对不同的平台做对应的处理。 1.主进程中补充调整代码 windows中需要注册协议,指定被唤醒时如何处理url windows当页面被唤

    2024年02月16日
    浏览(12)
  • 【你的第一个socket应用】Vue3+Node实现一个WebSocket即时通讯聊天室

    这篇文章主要是用WebSocket技术实现一个 即时通讯聊天室 ,首先先要了解为什么使用WebSocket而不是普通的HTTP协议,如果使用HTTP协议它是下面这种情况: 我发送一条消息,发送一个发送消息的请求;* 一直轮询接收别人发送的消息,不管有没有发送都要定时去调用接口。这里明

    2023年04月20日
    浏览(14)
  • 从零搭建vue+electron桌面应用

    1.全局下载electron 2.全局下载vue脚手架 3.创建vue项目(这里用的是vue2版本) 4.安装打包插件 首先进入项目目录 安装打包插件 5.安装electron-builder,安装后可以直接生成主进程的配置文件 6.在vue.config.js中添加以下配置 作完以上步骤之后,会在src根目录生成background.js,这个文件

    2024年02月17日
    浏览(12)
  • Vite + Vue3 + Electron实现进程通信

    Electron 是一个基于 Chromium 和 Node.js 的桌面应用程序开发框架,而 Vue3 则是一种流行的前端框架。将两者结合使用可以快速地打造出跨平台的桌面应用程序。在这种组合中,Electron 提供了强大的桌面应用开发能力,而 Vue3 则提供了易用的 UI 组件和开发体验 Electron 内置了 Chrom

    2024年02月12日
    浏览(21)
  • Electron+Vue3整合 - 开发时状态整合

    常规操作,不再赘述。 正经的vue项目启动成功! 此时的项目目录结构如下: 是一个标准的vue3的项目结构 主要干了两个事儿 : 1.创建主窗口;2.加载vue的页面进来。 主要是 : 1.配置 electron 的启动文件; 2.配置 vue项目的启动脚本; 3.配置electron的启动脚本。 至此,项目目录

    2024年04月17日
    浏览(5)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包