electron创建新窗口(模态框)并相互传值,主进程传值给子进程

2023-11-20

我们在开发的过程中难免会遇到需要创建一个子窗口(子进程),但是在这个子进程中所有值都是初始化的,而我们肯定是需要一些值才能进行下一步操作,比如:token;
那么我们怎么去传递值呢?

我先给伙伴们说一些,基本原理(下面很多东西会建立在vue的基础上生命周期,如果是其他框架就自行修改就行),然后再给大家根据代码一步一步操作。

  • 首先我们是需要创建一个子进程(或者叫新窗口,模态框都可以)
  • 发送一个命令到主进程去创建一个新窗口
  • 新窗口创建好以后等页面渲染完成(mounted/this.$nextTick)
  • 然后我们在this.$nextTick中通知子进程页面已经渲染完成,
  • 子进程接收到消息以后,通知主进程的渲染进程
  • 主进程的渲染进程接收到消息以后,携带值发送给主进程,然后发送给子进程的渲染进程
  • 到这儿就完成了

大家看到这儿可能觉得很麻烦,但是如果我们在创建新窗口的时候就传递值的话,可能子进程的渲染进程拿不到值;主要原因有:

  • 可能子进程还没创建成功,但是值就已经过来了,这个时候你去发送请求啊什么的,就会失败!
  • 还有就是可能会出现在创建窗口的时候比较卡顿,你的值过去了,创建还是白面等等

所以我们当时搞了这种方法,目前运行半年以上基本上都没得问题;如果你有更好的方法也可以告诉我们,一起聊聊;哈哈哈

创建新窗口

主进程

在主进程中配置窗口信息,具体内容可以看文档,以下是我的配置;配置中的参数都是可以根据自己的需求变化的;

注意: 在开发环境时,root_path的地址必须是你的ip地址,而不是localhost一类的

let modal;
// 接收弹出模态框
ipcMain.on('open-modal',(event,path,title = '提示')=>{
    console.log(path);
    let root_path;
    if (process.env.WEBPACK_DEV_SERVER_URL) {
      root_path = "http://192.168.110.95:8080/";
      // root_path = "http://192.168.124.4:8080/";
    } else {
      // root_path = "app://./index.html/";
      root_path = `file://${__dirname}/index.html/`;
    };

    const minWidth = 1176;
    const minHeight = 600;
    const width = 1200;
    const height = 700;
    modal = new BrowserWindow({
      parent: BrowserWindow.getFocusedWindow() || undefined,
      modal: true,
    //   frame: false,
      width: width,
      height: height,
      minWidth: minWidth,
      minHeight: minHeight,
    //   autoHideMenuBar: true, // 是否显示菜单栏
      // backgroundColor:'#000', // 背景
      hasShadow: true, // 阴影
      resizable: true, // 窗口是否可以放大
      webPreferences: {
        webviewTag: true,
        contextIsolation: false,
        nodeIntegration: true,
        enableRemoteModule: true,
        webSecurity: false,
      },
    });

    modal.loadURL(root_path + "#/" + path);
});
创建一个路由
{
    path:'/modal',
    name:'modal',
    component:() => import('@/views/db-file/text.vue'),
},
试试能不能启动

在渲染进程中发送命令,参数需要和路由path一致即可打开窗口

ipcRenderer.send('open-modal','modal')

Snipaste_2023-02-14_11-45-19.png

启动新窗口

当我们做到这的时候,我们的新窗口基本上就算是可以打开了;打开了以后呢!我们需要向他传递一些值,这个时候为了方便区分;如下:

主程序

渲染进程:A渲染进程
主进程:A主进程

子程序(模态框)
渲染进程:B渲染进程
主进程:B主进程

传值

B渲染进程渲染完成以后(vue中的话是nextTick),发送命令通知B主进程

ipcRenderer.send('modal-accomplish')

当在B主进程中接收到消息以后,发送给A渲染进程

 // 通知模态框渲染完成
ipcMain.on('modal-accomplish',(event,msg)=>{
    // 发送给渲染进程
    win.webContents.send("modal-accomplish-state");
})

A渲染进程中接收

onMounted(()=>{
     ipcRenderer.on('modal-accomplish-state',()=>{
        console.log('伟大时代');
     })
})

A渲染进程接收到值以后在发送给A主进程

onMounted(()=>{
     ipcRenderer.on('modal-accomplish-state',()=>{
        console.log('伟大时代');
        ipcRenderer.send('modal-accomplish-end','传值');
     })
})

A主进程接收到值以后发送给B渲染进程

ipcMain.on('modal-accomplish-end',(event,token)=>{
    modal.webContents.send('modal-accomplish-child-end',token);
})

B渲染进程接收值

ipcRenderer.on('modal-accomplish-child-end',(event,msg)=>{
    console.log(msg); // 传值
})

以上五/六步就可以将值获取到了;你学会了吗?

image.png

以上看起来可以能些许复杂,你多练习两次就觉得还好了!这也是为了避免一些问题想出来的;大家可以参考;有更好的方法也可以留言讨论

注意 如果你在写了代码以后没有接收到值的话,可以重启一下;可能是你写了主进程代码更新不及时导致的

往期文章

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

electron创建新窗口(模态框)并相互传值,主进程传值给子进程 的相关文章

随机推荐

  • 六,RBAC简介

    六 RBAC RBAC 基于角色的权限控制 role base access control 是一种设计模式 是用来设计和管理权限相关数据的一种模型 RBAC权限数据的管理 都是重复的CRUD的操作 这里我们就不再重复的从0到1开发 我们只
  • 在预训练时使用Warm Up的理解以及loss plateau。

    在预训练时使用Warm Up的理解 之前在wikitext 103上预训练Bert base的时候 发现loss曲线会平一段然后再下降 大概是像下图这样 横轴是step 纵轴是loss 当时的warm up是前16K step 一直以为第二
  • Python3 pip

    Python3 中的 pip 是一个常用的包管理工具 它可以用来下载 安装和卸载 Python 包 以下是一些常用的 pip 命令 1 安装包 pip install package name 例如 要安装 Flask 框架 可以使用命令
  • C++中vector删除指定位置的元素

    1 可以用erase方法删除vector指定位置的元素 2 例程 include
  • IAR 编译异常记录

    问题一 问题描述 WARNING the connected j link is defective proper operation cannot be guaranteed 连接的J Link不良 无法保证正确操作 问题原因 驱动版本与
  • 138-139-----JS基础-----二级菜单-完成基本功能、过渡效果

    一 代码 这两节的代码还是有点的难度的 有这样的需求时 按照类似的接口去做即可 不一定要和他的需求完全一样 因为我看他的需求好像点开另一个 已经打开的选项会被自动关闭 这样感觉不好 因为可能用户有时想要看到所有的选项的要求
  • 五大学科竞赛(五)2018年第二十四届全国青少年信息学奥林匹克联赛初赛

  • 音频增加噪声低通滤波降噪的过程

    啊 clear all close all clc s Fsample B wavread music wav Ts 1 Fsample M length s 获取音频的数据长度 m 0 M 1 figure subplot 3 1 1 p
  • 微服务框架

    微服务框架 1 SOA思想 面向服务的架构 SOA 是一个组件模型 它将应用程序的不同功能单元 称为服务 进行拆分 并通过这些服务之间定义良好的接口和协议联系起来 接口是采用中立的方式进行定义的 它应该独立于实现服务的硬件平台 操作系统和编
  • 区块链数据的存储和更新

    目录 1 引言 2 主要流程 2 1数据库读取 2 1 1 从数据库加载块数据 2 1 2从数据库读取账户信息 2 2 区块链数据更新与回滚 2 2 1 交易数据 2 2 2 块数据 1 引言 在第一篇文章里我们从静态的角度讲解了以太坊的数
  • elasticsearch ES搜索权重设置(boost参数)

    摘要 7 Elasticsearch boost的搜索条件权重 lm324114的专栏 CSDN博客 boost es 摘要2 elasticsearch boost 简书 摘要3 Elasticsearch 10 Boost 提升权重 简
  • flutter ListView 滚动到最后一个items位置

    flutter 想要实现一个listview初始化时和数据变化后显示到列表的最末 简单地说就是像聊天窗或者是日志输出那样的情景 要在Flutter中实现在初始化时和数据变化后将ListView自动定位到最后一个item的位置 你可以使用Sc
  • 基于位置的 AR 应用程序开发最完整指南

    几年前 全世界都为 Pokemon Go 疯狂 虽然这款游戏令人难以置信的受欢迎程度正在缓慢下降 但增强现实已成为科技界的新趋势 并且正在自信地抢占市场份额 2020年 AR市场规模超过141亿美元 预计到2022年底将达到2092亿美元
  • 混合式A星代码解析_2 规划主程序Planner.cpp

    3 规划程序 Planner cpp 在main cpp中 起主要作用的就是 HybridAStar Planner hy hy plan 规划算法都是在HybridAStar Planner这个类内部进行运算的 所以主要分析以下Plann
  • 客户端html跳到cas登出页面,CAS单点登录:单点登出及自定义登出界面(六)

    1 单点登出 1 1 参数说明 配置单点登出 配置允许登出后跳转到指定页面 cas logout followServiceRedirects false 跳转到指定页面需要的参数名为 service cas logout redirect
  • 扫描二维码进入体验版小程序却一直进入线上版本?这个配置要注意!

    1 前期准备 服务器 域名 2 配置扫描普通二维码进入小程序页面 开发小程序过程中 我们会遇到很多不同的场景 其中 扫描普通二维码进入小程序就是其中之一 下面先来看下如何配置扫描普通二维码进入小程序 首先登录开发平台 打开开发管理 进入开发
  • 大端小端,LSB和MSB

    在verilog中碰到了lsb和msb 所以做一下解释 lsb 就是最低位有效 类似于wire 0 31 这样的顺序 msb 就是最高位有效 类似于wire 31 0 这样的顺序 还有计算机中还有大端小端的概念一块解释一下 举例 0X123
  • 2022/9/6小结

    成长 是一个探索自我的过程 看 了不起的我 这本书 不知道是那句话 那个段落 或者那一章触动到了我 曾经我无法发自内心地去读书 去感受书中的情感 或悲伤 或喜悦 曾经我迫切地想通过书籍获得一项技能 获得一种读书人的气质 很幼稚 我不是在读书
  • Linux绑核效率优化

    Linux绑核效率优化 原理概述 cpu一般有多个物理核心 但在运行进程和线程时候 可以将其绑定或者指定到某一个或者多个核心上运行 这样做的好处是 一般在核数比较多的机器上 会有多个CPU共享三级缓存cache的情况 当出现跨cache数据
  • electron创建新窗口(模态框)并相互传值,主进程传值给子进程

    我们在开发的过程中难免会遇到需要创建一个子窗口 子进程 但是在这个子进程中所有值都是初始化的 而我们肯定是需要一些值才能进行下一步操作 比如 token 那么我们怎么去传递值呢 我先给伙伴们说一些 基本原理 下面很多东西会建立在vue的基础