«

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

时间:2024-3-5 13:19     作者:韩俊     分类: Javascript


这篇文章主要介绍“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); // 传值
})

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

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

标签: javascript

热门推荐