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

目录
  • 正文
  • 创建新窗口
    • 主进程
    • 创建一个路由
    • 试试能不能启动
  • 启动新窗口
    • 传值

正文

我们在开发的过程中难免会遇到需要创建一个子窗口(子进程),但是在这个子进程中所有值都是初始化的,而我们肯定是需要一些值才能进行下一步操作,比如: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模态框主进程传值子进程的资料请关注我们其它相关文章!

(0)

相关推荐

  • Electron 网络拦截实战示例详解

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

  • electron渲染进程主进程相互传值示例解析

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

  • electron 中 webview的使用示例解析

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

  • Electron 剪贴板实现示例详解

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

  • electron打包中的巨坑解决记录

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

  • Electron调用外接摄像头并拍照上传实现详解

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

  • 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

随机推荐