electron如何創建新窗口模態框并實現主進程傳值給子進程

這篇文章主要介紹“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如何創建新窗口模態框并實現主進程傳值給子進程”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！