electron创建新窗口模态框并实现主进程传值给子进程

2024-12-24 20:43:55

正文

我们在开发的过程中难免会遇到需要创建一个子窗口（子进程），但是在这个子进程中所有值都是初始化的，而我们肯定是需要一些值才能进行下一步操作，比如：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')

启动新窗口

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

主程序

渲染进程：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); // 传值
})

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

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

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

以上就是electron创建新窗口模态框并实现主进程传值给子进程的详细内容，更多关于electron模态框主进程传值子进程的资料请关注我们其它相关文章！

Electron 剪贴板实现示例详解

目录正文 availableFormats readText 和 writeText readHTML 和 writeHTML readImage 和 writeImage readRTF 和 writeRTF clear 正文在浏览器中可以通过 JavaScript 脚本来读写剪贴板数据,常用的是 document.execCommand 方法: // 复制数据 const inputElement = document.querySelector('#input') inputEleme
electron 中 webview的使用示例解析

目录正文获取webview的dom webview 页面 webview页面的代码新建public/preload.js文件监听页面对否显示禁止打开新窗口刷新页面上一页下一页正文 webview 想必都有所了解,比如:微信小程序嵌套H5 那么我们在electron中怎么使用webview呢? 我们先跟着官方文档展示一下,看是否能有效果: 若要在应用程序中嵌入网页, 请将 webview 标签添加到应用程序的被嵌入页面中 (这是将显示外来内容的应用程序页). 在最简单的例子中,
electron渲染进程主进程相互传值示例解析

目录在electron中分为渲染进程和主进程浏览器传值给主进程浏览器环境主进程主进程传值给渲染进程主进程渲染进程注意在electron中分为渲染进程和主进程渲染进程就是浏览器环境,主进程就是node环境既然他们是不同的环境,那么为我们怎么让他们相互关联起来呢?或者说怎么传递值? 毕竟在开发中可能会遇到我想要的值只能在node环境中才能获取,然后node中可能也会需要浏览器环境的值:这个时候就需要两个环境联通起来相互传值浏览器传值给主进程浏览器环境引入: import
Electron调用外接摄像头并拍照上传实现详解

目录背景需求分析实现视频采集 MediaDevices.getUserMedia() 拍照生成图片上传图片至CDN 1. 使用HTMLCanvasElement.toBlob() 语法参数 2. 使用HTMLCanvasElement.toDataURL() 语法参数返回值总结背景基于Electron实现的pc端智能验机应用,近期迭代了一个新的功能,需求是通过电脑外接摄像头对手机屏幕进行拍照,拍照后需将照片上传至服务端进行屏幕信息比对,确定被检测屏幕是否为原厂屏. 需求分析
electron打包中的巨坑解决记录

目录吐槽问题一:css文件中图片加载失败问题描述解决过程补充问题二:无法使用cookie 问题描述原因分析总结吐槽从上周五到今天,我被electron打包折磨得死去活来,本来想让测试用桌面端的,现在不得不改用web端,真的好无语.今天解决问题顺利打包后来记录一下这个问题. 问题一:css文件中图片加载失败问题描述问题是这样的,electron打包为桌面端以后,登录页的表单是正常显示的,但是整个页面的背景图没了.我百度了一下,发现大多是说白屏啥的,但是我不是白屏啊,我的表单
Electron 网络拦截实战示例详解

目录正文自定义 UA 绕过跨域限制请求转发正文 Electron 提供的 webRequest API,允许开发者对网络进行过滤和监听,并且可以修改 header 字段甚至请求地址,功能非常强大,它的类结构如下: 不过需要注意,该模块只能在主进程中使用,接下来为大家介绍 webRequest 三个非常典型的使用场景: 自定义 UA 有些接口为了过滤非法请求,会首先校验 UserAgent,正常的浏览器是无法伪造 UA 的,不过在 Electron 里面可以很容易做到,webRequest
Electron架构深入探究

目录 Electron是什么 Electron架构小结 Electron是什么引用来自官网的解释: Electron 是一个使用 JavaScript. HTML 和 CSS 构建桌面应用程序的框架.通过将 Chromium 和 Node.js 嵌入到它的二进制文件中,Electron 允许你维护一个 JavaScript 代码库,并创建可以在 Windows. macOS 和 Linux 上运行的跨平台应用程序ーー不需要本地开发经验. 如果我们追溯历史,可以发现Electron的前身是At
Bootstrap与Angularjs的模态框实例代码

先给大家展示下效果图,感兴趣的朋友参考下实现代码吧效果图如下所示: 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.
PyQt5创建一个新窗口的实例

1.使用Qt Design设计一个空白窗口(注意:我是使用MainWindow创建的窗口) 2.使用PyUIC将.ui文件转换成.py文件右键.ui文件->External Tools->PyUIC 3.新建一个**.py文件,大部分操作函数在**.py文件中,防止重新设计窗口时造成大量代码丢失 4.**.py文件 #-*- coding:utf-8 -*- from PyQt5.QtWidgets import QMainWindow, QApplication from Asimplew
使用layer模态框给新页面传值的方法

昨天用hui后台模板的时候用到模态框传值给另一个新页面模板是这么写的没办法给新页面传值,于是百度了一下,总结 function zhuyuan(title,url,id,w,h,type){ layer.open({ title:'添加分类', type: 2, area: ['700px', '530px'], fix: false, //不固定 maxmin: true, content: '{:url("yuyue/huayan")}?type=3', success:fun
如何使用vue slot创建一个模态框的实例代码

[1]遮罩层:承载内容,管理样式布局. [2]内容层:控制遮罩层的显示与否. 遮罩层和内容区之间应该解耦.遮罩层和内容区之间应该解耦.遮罩层和内容区之间应该解耦. 遮罩层不依赖于内容区,内容是放置在遮罩层里的,至于内容区里的内容是什么,遮罩层完全不用在意.因此可以在遮罩层里采用插槽. 遮罩层的实现 <div class="common-mask" v-if="visible"> <slot name="head"><
vue+electron实现创建多窗口及窗口间的通信(实施方案)

目录一.前言二.实施方案 1.创建多窗口 2.多窗口间的通信三.后记一.前言对于一个桌面应用来说,有时候单独一个窗口用户使用起来会不太方便,比方说写日报或者查看文件等,若是在同一窗口内,我只能做一件事,不能边预览文件,边去查看聊天消息内容等.又或者是多个应用间相互关联的需要同步查看的事件,这都是极其不方便的.因此我们可以将某些集成到electron软件中的应用或者某些界面用单独的窗口打开(以下称为独立窗口). 二.实施方案 1.创建多窗口首先我们从electron官网中找到创建窗口的
详解使用React制作一个模态框

模态框是一个常见的组件,下面让我们使用 React 实现一个现代化的模态框吧. 组件设计模态框想必大家都很熟悉,是工作中常用的组件,可以让我们填写或展示一些信息而不必打开一个新页面.在开始编码之前,我们先来了解一个 React 模态框组件应该如何设计. React 是一个状态(数据)驱动的前端框架,一个模态框最重要的状态就是打开和关闭,visible,当 visible 为 true 时,模态框打开,反之亦然. 由于 React 所提倡的是一种声明式,组件化的开发体验,每个组件都是状态 =>
AngularJs 弹出模态框（model）

推荐阅读:详解AngularJS 模态对话框 $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们. $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示html标签 scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入 res
angularJS模态框$modal实例代码

1.引入$modal模块如:angular.module('ModalCtrl',['$modal' ,'$scope' , function($modal ,$scope ){ }]); 2.执行调模态框函数 $scope.editModule = function(type, size, id) { $scope.id = id; var modalInstance = $modal.open({ templateUrl: 'tpl/weichat_modulebaseinfo.html
在ASP.NET 2.0中操作数据之六十五：在TableAdapters中创建新的存储过程

导言: 本教程的Data Access Layer (DAL)使用的是类型化的数据集(Typed DataSets).就像我们在第一章<创建一个数据访问层>里探讨的一样,该类型化的数据集由强类型的DataTable和TableAdapter构成.DataTable描绘的是系统里的逻辑实体而TableAdapter引用相关数据库执行数据访问,包括对DataTable填充数据.执行返回标量数据(scalar data)的请求.添加,更新,删除数据库里的记录等. TableAdapter执行的SQL

electron创建新窗口模态框并实现主进程传值给子进程

目录

正文

创建新窗口

主进程

创建一个路由

试试能不能启动

启动新窗口

传值

相关推荐

随机推荐