这篇文章主要介绍“electron如何创建新窗口模态框并实现主进程传值给子进程”，在日常操作中，相信很多人在electron如何创建新窗口模态框并实现主进程传值给子进程问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”electron如何创建新窗口模态框并实现主进程传值给子进程”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
创建新窗口
主进程
在主进程中配置窗口信息，具体内容可以看文档，以下是我的配置；配置中的参数都是可以根据自己的需求变化的；
注意： 在开发环境时，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如何创建新窗口模态框并实现主进程传值给子进程”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
