2、electron vue3 怎么创建子窗口,并给子窗口路由传参

接上回初始化vue3 electron项目,创建完vue3 electron项目后,现在要实现在渲染进程中点击按钮创建一个新的子窗口

开始

子窗口创建操作只能在主线程内完成,而创建操作是在渲染线程触发,因此就需要进行两者间的通讯。

1、创建子窗口

background.js

//引入ipcMain
import { app, protocol,nativeImage, BrowserWindow,ipcMain } from 'electron'
...
...
// 创建提醒窗口function openChildWindow(e) {var childWin = new BrowserWindow ({width: 330,height:170,title:'待办提醒',alwaysOnTop:true,x:e.screenWidth-330,y:e.screenHeight-170,autoHideMenuBar: true,webPreferences: {nodeIntegration: true,contextIsolation: false,}})if (process.env.WEBPACK_DEV_SERVER_URL) {// 开发环境跳转路由,/remind就是配置的路由地址,并携带参数childWin.loadURL(process.env.WEBPACK_DEV_SERVER_URL + `#/remind?id=${e.id}`)if (!process.env.IS_TEST) childWin.webContents.openDevTools()} else {// 打包后跳转地址 /remind就是配置的路由地址createProtocol('app')childWin.loadURL(`app://./index.html#/remind?id=${e.id}`);}childWin.on("close", function(){childWin = null;})}// ipc通讯,触发创建操作ipcMain.on('on-open-event', (e,data) => {openChildWindow(JSON.parse(data))})

2、新建preload.js

const { ipcRenderer } = require('electron');window.myApi = {openWindow: (e) => {console.log(e);ipcRenderer.send('on-open-event',JSON.stringify(e))},
}

3、在background.js的创建主窗口配置中引入preload.js文件

...
...
const win = new BrowserWindow({width: 400,height: 700,title:'待办记事本',frame: false, // 去掉窗口边框 // 取消默认的头部;自定义头部autoHideMenuBar: true, // 隐藏菜单栏autoHideMenuBar: true,icon:path.join(__dirname, '../public/logo.ico'),webPreferences: {nodeIntegration: true,contextIsolation: false,enableRemoteModule: true,preload: path.resolve(__dirname, "./preload.js")},})
...
...

4、在vue页面中调用,创建子窗口方法

// 打开子窗口
function open(e){e.screenHeight = window.screen.heighte.screenWidth = window.screen.width// e是我带过去的一些参数,不需要可以不用管,自行调整一下window.myApi.openWindow(e)
}

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

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

相关文章

性能监控之Python实战SkyWalking链路追踪

文章目录 一、介绍二、SkyWalking支持的语言三、SkyWalking安装3.1 前提准备3.2 先安装ElasticSearch7.X3.3 Skywalking-OAP 安装3.4 Skywalking-UI 界面安装3.5 访问页面检查SkyWalking是否可以访问 四、Python 项目接入SkyWalking4.1 演示项目代码4.2 验证 sw-python4.3 配置…

uviewui2.x上传的坑

<u-upload:fileList"fileList3"afterRead"afterRead"delete"deletePic"name"3"multiple:maxCount"10":previewFullImage"true" ></u-upload> 其中&#xff0c;afterRead&#xff0c;deletePic方法&a…

AI会议时代:企业如何搭上快车?

“我 们认为&#xff0c;AI绝不仅是会议的辅助工具&#xff0c;而更会是重塑会议流程的关键力量。通过AI的个性化定制、大规模支持、智能分析这些技术&#xff0c;AI会议将大大提升会议的智能化与高效性&#xff0c;进而成为企业数字化转型的核心驱动力。” 作者|斗斗 编辑…

webdav解说

WebDAV&#xff08;Web Distributed Authoring and Versioning&#xff09;是一种基于HTTP/1.1协议的扩展&#xff0c;它允许用户通过网络进行文件的上传、删除、编辑等操作&#xff0c;从而实现远程文件管理。 WebDAV 是一种网络文件共享协议&#xff0c;它扩展了HTTP协议&am…

golang context管理channel

如果多个协程之间有一定的生命周期关系&#xff0c;可以使用context去做退出管理。 如下图&#xff0c;上游的ctx只能执行很快就被cancel了&#xff0c;此时那启动的子协程也没有继续运行的必要&#xff0c;所以此时子协程也监控上游的状态&#xff0c;上游一结束&#xff0c;子…

THREE.JS法线Shader

以普通情况而论 vNormal normal;//...gl_FragColor vec4( vNormal, 1. );vNormal normal;//...gl_FragColor vec4( normalize( vNormal ) * 0.5 0.5, 1. );vNormal normalMatrix * normal;//...gl_FragColor vec4( normalize( vNormal ) * 0.5 0.5, 1. );normalMa…

为什么IP首部的源IP地址和目的IP地址不变而MAC层的源MAC地址和目的MAC地址变

IP首部的源IP地址和目的IP地址不变&#xff0c;而MAC层的源MAC地址和目的MAC地址变化的原因‌主要涉及到计算机网络中的分层结构和数据包传输过程。在OSI&#xff08;开放系统互联&#xff09;模型中&#xff0c;计算机网络被分为不同的层&#xff0c;每层都有其特定的功能。IP…

【Java异常】(简简单单拿捏)

【Java异常】&#xff08;简简单单拿捏&#xff09; 1. 异常的简单介绍2. 异常的抛出2.1 语法 3. 异常的处理3.1 异常声明throws3.2 try-catch捕获并处理 4. 例子&#xff08;try-catch自定义异常&#xff09; 1. 异常的简单介绍 程序员在运行代码时会遇到很多异常&#xff0c…

MySQL知识点复习 - 索引分类

索引 可以把书开头的目录比喻成索引&#xff0c;那么在数据库中&#xff0c;索引就可以理解为数据的目录。 索引的分类 可以按照四个角度来进行分类 数据结构&#xff1a;b&#x1f332;、hash、full-text索引物理存储&#xff1a;聚簇、二级索引字段特性&#xff1a;主键、…

Linux系统安装MySQL8.40(保姆级教程)

前言&#xff1a; 说明&#xff1a;本文章是在阿里云ecs上安装MySQL&#xff0c;即&#xff1a;Linux是在联网状态下。 一、安装前环境准备 1.查看MySQL应用是否已存在 rpm -qa |grep mysql说明&#xff1a;若返回空信息&#xff0c;就说明当前环境没有安装MySQL。 2.查看ma…

如何要进行源代码加密?源代码加密的必要性

由于研发人员比普通办公人员要精通电脑&#xff0c;除了常见的网络&#xff0c;邮件&#xff0c;U盘&#xff0c;QQ等数据扩散方法外&#xff0c;还有很多对于研发人员来说非常容易的方法&#xff08;未列全&#xff09;&#xff1a; 物理方法&#xff1a; — 网线直连&#…

解决方案:如何区分python里面绝对路径跟相对路径的不同

文章目录 一、现象二、解决方案 一、现象 在工作中&#xff0c;会经常混淆绝对路径跟相对路径的区别&#xff0c;我也是找了资料之后就懂了&#xff0c;但时间一长就混淆了&#xff0c;于是&#xff0c;我在这里记录下 二、解决方案 在Python中&#xff0c;绝对路径和相对路…

关于el-card的height设置100%后, el-card内容超出高度后,内容被隐藏这件事

1. 解决方法 全局样式添加以下代码 .el-card__body{height: 100%;width: 100%; }2. 问题原因 代码 <el-card style"height: 100%"><!-- ... --> </el-card>选中.el-card 元素发现这里的 .el-card 的 overflow:hidden 而内部 .el-card__body除…

WiFi无线连接管理安卓设备工具:WiFiADB

介绍 WiFi ADB 使您能够通过 WiFi TCP/IP 连接直接在设备上轻松调试和测试 Android 应用&#xff0c;无需使用 USB 数据线。在启用 WiFi 上的 ADB 后&#xff0c;打开控制台将电脑连接到设备。 手机和电脑在同一个WiFi然后电脑上运行adb connect x.x.x.x:x命令即可 下载 谷…

七段 LED 显示器(7段数码管)

7 段 LED 显示器, 通常简称为 LED 数码管 或 数码管. 通过 菜单--绘制--数字芯片--添加 7 段 LED 显示器 可以引入它. 普通模式 它内部其实就是七盏长条状的 LED 灯, 有的横着放, 有的竖着放. 七个灯用 a b c d e f g 分别表示. 灯的位置从上到下, 从里到外顺时针下来, 如上图…

青年女演员白澜闪耀亮相第五届庐山电影节红毯

2024年9月25日&#xff0c;演员白澜受邀出席了第五届庐山电影节盛典晚会&#xff0c;在这个星光熠熠的夜晚&#xff0c;青年演员白澜以一袭精心设计的礼服惊艳亮相&#xff0c;成为红毯瞩目的焦点。 整个第五届庐山国际爱情电影周以“庐山&#xff0c;你的爱情靠山”为主题&…

帆软通过JavaScript注入sql,实现数据动态查询

将sql语句设置为参数 新建数据库查询 设置数据库查询的sql语句 添加控件 JavaScript实现sql注入 添加事件 编写JavaScript代码 //获取评价人id var pjrid this.options.form.getWidgetByName("id").getValue();//显示评价人id alert("评价人&#xff1a;&…

微服务架构拆分策略与实践

微服务架构拆分策略与实践指南 随着互联网技术的发展&#xff0c;传统的单体应用逐渐显现出其局限性&#xff0c;特别是在扩展性和维护性方面。微服务架构作为一种解决这些问题的方法&#xff0c;通过将大型应用分解成一系列小型、独立的服务单元&#xff0c;每个单元负责单一…

PG数据库查询字段备注信息

在 PostgreSQL 数据库中&#xff0c;要查询某个表的字段名&#xff08;即列名&#xff09;及其备注信息&#xff0c;可以使用 information_schema.columns 视图来获取列名&#xff0c;并结合 pg_description 和 pg_class 等系统表来获取列的备注信息。下面是一个示例 SQL 查询&…

低代码开发平台:未来五大发展趋势预测

在数字化转型的浪潮中&#xff0c;低代码开发平台正迅速崛起&#xff0c;成为企业软件开发的重要工具。随着技术的不断进步和市场需求的持续增长&#xff0c;低代码开发平台在未来将展现出更为广阔的发展前景。本文将预测并探讨低代码开发平台的五大发展趋势。 深度融合数字化与…