超详细!!!electron-vite-vue开发桌面应用之创建新窗口以及主进程和子进程的通信监听(十二)

云风网
云风笔记
云风知识库

一、新建打开窗口

1、在electron/main.ts中加入主进程打开窗口逻辑代码
import { ipcMain } from "electron";
ipcMain.handle("open-win", (_, arg) => {const childWindow = new BrowserWindow({webPreferences: {preload:path.join(__dirname, 'preload.mjs'),nodeIntegration: true,contextIsolation: false,},});childWindow.loadFile(path.join(RENDERER_DIST, 'index.html'),{hash: arg});
});
2、在electron/preload.ts中定义ipcRenderer全局方法
import { ipcRenderer } from 'electron'
window.ipcRenderer = ipcRenderer
3、在src/utils下新建electron.ts封装打开窗口的公共方法
/*** 新建窗口* @param path 路由地址*/
export function openWindow(path: string) {window.ipcRenderer.invoke("open-win", path);
}
export default {openWindow
};
4、在前端文件中应用打开新的窗口
<script setup lang="ts">
const router = useRouter()
import electronUtils from "@/utils/electron";
const toUser = () => {router.push('/userManage')
}
const toNote = () => {router.push('/func/noteManage')
}
const toLogin = () => {router.push('/login')
}
const toOpenLogin = () => {electronUtils.openWindow('/login');
}
</script><template><div class="container"><a @click="toUser()">用户管理</a><a @click="toNote()">语录管理</a><a @click="toLogin()">去登录</a><a @click="toOpenLogin()">创建新窗口</a></div>
</template>

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

二、主进程和子进程的通信

electron项目常常由一个主进程和多个渲染进程构成,渲染进程之间是隔离的,而所有渲染进程都和主进程共享资源。

  1. 所有的渲染进程都是由主进程创建的
  2. 每个窗口都对应着一个渲染进程
  3. 所有的渲染进程共享一个主进程
  4. 渲染进程与渲染进程交互【多窗口交互】,都需要借助ipc通信来实现

2.1、子进程向主进程单向通信

1、在electron目录下创建ipc.ts
import { ipcMain } from "electron";export const initIpc = () => {// 同步通信监听ipcMain.on("eventSync", (e, data: string) => {setTimeout(() => {e.returnValue = "主进程同步响应:" + data;}, 1000);});// 异步通信监听ipcMain.handle("eventAsync", (e, data: string) => {return "主进程异步响应:" + data;});// 异步通信一次ipcMain.handleOnce("eventAsyncOnce", (e) => {console.log("异步通信一次!",e);});
};
2、在main.ts引入初始化
import {initIpc} from './ipc'
//初始化initIpc
initIpc()
3、在用户管理新增用户详情编辑子路由
{path: '/',component: Layout,hidden: false,redirect: 'noredirect',children: [...{path: 'userManage/detail',component: () => import('@/views/userManage/detail.vue'),name: 'detail',meta: { title: '用户详情', icon: 'user' },hidden: true}]}
4、在src/views/userManage下新建detail.vue
<script setup lang="ts">
import { ipcRenderer } from "electron";function toSyncSaveUserInfo() {const result = ipcRenderer.sendSync("eventSync", "同步保存");// 同步通信测试console.log(result);
}
function toAsyncSaveUserInfo() {const result = ipcRenderer.invoke("eventAsync", "异步保存");// 异步通信测试console.log(result);
}
function toAsyncOnceSaveUserInfo() {const result = ipcRenderer.invoke("eventAsyncOnce", "异步保存一次");// 异步通信测试一次console.log(result);
}
</script><template><a @click="toSyncSaveUserInfo()">同步保存</a><a @click="toAsyncSaveUserInfo()">异步保存</a><a @click="toAsyncOnceSaveUserInfo()">异步保存一次</a>
</template><style scoped></style>
4、在src/views/userManage/index.vue添加打开编辑用户信息窗口的代码
<script setup lang="ts">
import electronUtils from "@/utils/electron";
const router = useRouter()
const toIndex = () => {router.push('/')
}
const toNote = () => {router.push('/func/noteManage')
}
const toEditUserInfo = () => {electronUtils.openWindow('/userManage/detail');
}
</script><template><a @click="toIndex()">首页</a><a @click="toNote()">语录管理</a><a @click="toEditUserInfo()">编辑用户详情</a>
</template><style scoped></style>

在这里插入图片描述

5、点击打开用户详情子窗口进程

在这里插入图片描述

点击保存用户信息,子进程向主进程通信

同步保存、异步保存、异步保存一次,其中异步保存一次后主进程移除监听,再次点击保存报错

2.2、主进程向子进程单向通信

1、main.ts定义定时器通信数据给子进程
ipcMain.handle("open-win", (_, arg) => {const childWindow = new BrowserWindow({webPreferences: {preload:path.join(__dirname, 'preload.mjs'),nodeIntegration: true,contextIsolation: false,},});let count = 100setInterval(() => {if (childWindow&&childWindow.webContents) {childWindow?.webContents.send("to-child-count", '金额:'+count++);}}, 1000);childWindow.webContents.openDevTools();childWindow.loadFile(path.join(RENDERER_DIST, 'index.html'),{hash: arg});});
2、detail.vue监听主进程通信数据
// 监听主进程信息
function toChildCount(e:any,data:string){console.log(data)
}
onMounted(()=>{ipcRenderer.on("to-child-count",toChildCount);console.log("监听主进程信息")
});
onUnmounted(()=>{console.log('移除监听主进程信息')ipcRenderer.removeListener("to-child-count",toChildCount);
});

在这里插入图片描述

2.3、主进程和子进程双向通信

1、electron/ipc.ts添加双向通信逻辑
//双向通信
ipcMain.handle("eventBothWay", (e, data: string) => {e.sender.send("eventBothWay", "主进程发送" + data);
});
2、detail.vue子进程添加监听逻辑
function eventBothWay(e:any,data:string){console.log("子进程监听的信息:",data);
}
function toBothWay(){ipcRenderer.invoke("eventBothWay","异步发给主进程的消息");
}
onMounted(()=>{ipcRenderer.on("eventBothWay",eventBothWay);// ipcRenderer.on("to-child-count",toChildCount);// console.log("监听主进程信息")
});
onUnmounted(()=>{ipcRenderer.removeListener("eventBothWay",eventBothWay);// console.log('移除监听主进程信息')// ipcRenderer.removeListener("to-child-count",toChildCount);
});
<a @click="toBothWay()">双向通信</a>

点击双向通信,可以控制台获取双向信息打印

在这里插入图片描述

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

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

相关文章

【算法】链表相关

【ps】本篇有 5 道 leetcode OJ。 一、算法简介 链表是一种常见的线性数据结构&#xff0c;是一种在物理结构上非连续、非顺序的存储结构&#xff0c;其中的数据元素的逻辑顺序由其中的指针链接次序实现&#xff0c;指针链接的每一个结构体都是一个节点。 链表的结构多种多样&…

基于C#+SQL Server2008 开发三层架构(CS界面)图书管理系统

图书管理系统 一、项目背景及意义 当今由于信息技术的飞速发展&#xff0c;图书馆作为社会知识信息媒介的功能日益重要&#xff0c;网络环境下的信息资源建设知识仓库的设计&#xff0c;开放存取学术交流模式&#xff0c;知识管理系统&#xff0c;智能检索&#xff0c;数字参…

文件存储阿里云

1.图片存储 图片存储是指将图片文件保存在服务器或云存储中的技术或服务。图片存储的主要目的是方便用户上传、存储、管理和分享图片文件。 图片存储可以分为两种主要类型&#xff1a;本地存储和云存储。 本地存储是将图片文件保存在本地服务器或计算机上的一种方式。这种存…

区块链学习笔记2--区块链技术的形成 以太坊

分布式数据存储&#xff1a; 在每个参与者电脑上备份 账本实时同步和对账 点对点通信 共识机制 加密算法&#xff1a; 对用户个人信息的加密 转账过程中的签名授权 账本一致性校验 挖矿算法的目标hash 区块链2.0技术 以太坊 比特币的出现让经济贸易变得简单&#xff0c;而比特…

LabVIEW环境中等待FPGA模块初始化完成

这个程序使用的是LabVIEW环境中的FPGA模块和I/O模块初始化功能&#xff0c;主要实现等待FAM&#xff08;Field-Programmable Gate Array Module&#xff0c;FPGA模块&#xff09;的初始化完成&#xff0c;并处理初始化过程中的错误。让我们逐步分析各部分的功能&#xff1a; 1.…

[ACTF2020 新生赛]Upload1

1、点开题目链接&#xff0c;页面显示如下&#xff0c;上传test.jpg里面包含一句话木马 GIF89a? <script language"php">eval($_REQUEST[1])</script> 2、使用bp抓包修改后缀&#xff0c;点击发送 3、不关浏览器的代理&#xff0c;在bp中将该包放行 4、…

HyperWorks中的Size and bias 子面板

此面板是 automesh 经常使用的子面板&#xff0c;通过此面板&#xff0c;用户可用设置单元尺寸、单元类型以及以及映射类型等多种控制选项&#xff0c;然后通过预览按钮查看待生成网格模型的状态。 图 3-6 size and bias 子面板 1.Density&#xff08;密度&#xff09; Adjus…

【系统分析师】计算机组成与体系架构

计算机硬件组成&#xff0c;运算器&#xff0c;控制器 计算机基本硬件系统五大组成部分&#xff1a;运算器&#xff0c;控制器&#xff0c;存储器&#xff0c;I/O设备 运算器的四个重要寄存器&#xff1a; 算术逻辑单元&#xff08;实时对数据的算术和逻辑运算&#xff0c;…

Excel和Word日常使用记录:

Excel使用总结 表格颜色填充&#xff1a; 合并单元格&#xff1a; 选中你要合并的单元格区域。 按下快捷键 Alt H&#xff0c;然后松开这些键。 再按下 M&#xff0c;接着按 C。 这个组合键执行的操作是&#xff1a;Alt H&#xff1a;打开“主页”选项卡。 M&#xff1a;选…

八、适配器模式

适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许不兼容的接口之间进行合作。适配器模式通过创建一个适配器类来转换一个接口的接口&#xff0c;使得原本由于接口不兼容无法一起工作的类可以一起工作。 主要组成部分&#xff1a; 目标…

凸优化学习(1)——什么是凸优化、凸集、凸函数

&#x1f345; 写在前面 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;这里是hyk写算法了吗&#xff0c;一枚致力于学习算法和人工智能领域的小菜鸟。 &#x1f50e;个人主页&#xff1a;主页链接&#xff08;欢迎各位大佬光临指导&#xff09; ⭐️近…

springboot广州科技学院后勤综合管理系统---附源码79264

摘要 随着信息技术的快速发展&#xff0c;学院后勤综合管理系统在高校中扮演着越来越重要的角色。本论文旨在设计并实现一种基于SpringBoot框架的学院后勤综合管理系统&#xff0c;以提高学院后勤工作的效率和管理水平。在该论文中&#xff0c;我们将首先介绍学院后勤管理系统的…

828华为云征文|华为云Flexus X实例docker部署最新gitlab社区版,搭建自己的私人代码仓库

828华为云征文&#xff5c;华为云Flexus X实例docker部署最新gitlab社区版&#xff0c;搭建自己的私人代码仓库 华为云最近正在举办828 B2B企业节&#xff0c;Flexus X实例的促销力度非常大&#xff0c;特别适合那些对算力性能有高要求的小伙伴。如果你有自建MySQL、Redis、Ng…

支持大型程序代码和拥有大型嵌入式SRAM的指纹芯片-P1032BF1

指纹芯片 - P1032BF1是一款基于ARM Cortex-M3的单片机&#xff0c;专为Wi-Fi /蓝牙通信控制而设计&#xff1b;能够实现指纹的图像采集、特征提取、特征比对&#xff0c;可应用于智能锁&#xff1b;支持大型程序代码和拥有大型嵌入式SRAM&#xff0c;也可用于一般的MCU应用。 …

【文档资料】《你缺失的那门计算机课》

# 站长的话 站长认为此书写的非常好&#xff0c;能够很好的GET到当下普通人所遇到的难点&#xff0c;正如此书的序章所写&#xff1a;“据我们观察&#xff0c;许多同学对「电脑」并不熟悉&#xff0c;甚至可以说是陌生&#xff1a;他们可能在网上被下载到各种「P2P 高速下载器…

C语言代码练习(第十八天)

今日练习&#xff1a; 48、猴子吃桃问题。猴子第1天摘下若干个桃子&#xff0c;当即吃了一半&#xff0c;还不过瘾&#xff0c;又多吃了一个。第2天早上又将剩下的桃子吃掉一半&#xff0c;又多吃了一个。以后每天早上都吃了前一天剩下的一半零一个。到第10天早上想再吃时&…

onpm报错: Install failed

api 9 安装ohos/pulltorefresh2.0.1报错误 ohpm install ohos/pulltorefresh2.0.1 ohpm INFO: fetching meta info of package ohos/pulltorefresh ohpm WARN: fetch meta info of package ohos/pulltorefresh failed - GET https://registry.npmjs.org/ohos/pulltorefresh 404…

Git环境搭建

我的博客大纲 我的GIT学习大纲 Git安装步骤&#xff1a; 1.官网地址 查看 GNU 协议&#xff0c;可以直接点击下一步&#xff1a; 2.Git配置选项如下&#xff1a; 3.选择后台客户端连接协议&#xff0c;选默认值 OpenSSL&#xff0c;然后下一步。 4.Git换行符号 5.选择终端类型…

护眼台灯对眼睛好吗?眼科医生推荐的台灯告诉你答案

作为一名家长&#xff0c;我深刻体会到保护孩子眼部健康的重要性。随着科技的迅猛发展&#xff0c;孩子们越来越多地接触并依赖电子设备&#xff0c;如平板电脑、手机和电视&#xff0c;长时间盯着屏幕已成为他们日常生活的一部分。然而&#xff0c;这些屏幕发出的蓝光及闪烁的…

2023年408真题计算机网络篇

https://zhuanlan.zhihu.com/p/6954228062023年网络规划设计师上午真题解析TCP流量计算_哔哩哔哩_bilibili 1 1在下图所示的分组交换网络中&#xff0c;主机H1和H2通过路由器互联&#xff0c;2段链路的数据传输速率为100 Mb/s、时延带宽积 &#xff08;即单向传播时延带宽&am…