正文

我們?cè)陂_發(fā)的過程中難免會(huì)遇到需要?jiǎng)?chuàng)建一個(gè)子窗口（子進(jìn)程），但是在這個(gè)子進(jìn)程中所有值都是初始化的，而我們肯定是需要一些值才能進(jìn)行下一步操作，比如：token； 那么我們?cè)趺慈鬟f值呢？

我先給伙伴們說一些，基本原理（下面很多東西會(huì)建立在vue的基礎(chǔ)上生命周期，如果是其他框架就自行修改就行），然后再給大家根據(jù)代碼一步一步操作。

• 首先我們是需要?jiǎng)?chuàng)建一個(gè)子進(jìn)程（或者叫新窗口，模態(tài)框都可以）
• 發(fā)送一個(gè)命令到主進(jìn)程去創(chuàng)建一個(gè)新窗口
• 新窗口創(chuàng)建好以后等頁(yè)面渲染完成（mounted/this.$nextTick）
• 然后我們?cè)趖his.$nextTick中通知子進(jìn)程頁(yè)面已經(jīng)渲染完成，
• 子進(jìn)程接收到消息以后，通知主進(jìn)程的渲染進(jìn)程
• 主進(jìn)程的渲染進(jìn)程接收到消息以后，攜帶值發(fā)送給主進(jìn)程，然后發(fā)送給子進(jìn)程的渲染進(jìn)程
• 到這兒就完成了

大家看到這兒可能覺得很麻煩，但是如果我們?cè)趧?chuàng)建新窗口的時(shí)候就傳遞值的話，可能子進(jìn)程的渲染進(jìn)程拿不到值；主要原因有：

• 可能子進(jìn)程還沒創(chuàng)建成功，但是值就已經(jīng)過來了，這個(gè)時(shí)候你去發(fā)送請(qǐng)求啊什么的，就會(huì)失敗！
• 還有就是可能會(huì)出現(xiàn)在創(chuàng)建窗口的時(shí)候比較卡頓，你的值過去了，創(chuàng)建還是白面等等

所以我們當(dāng)時(shí)搞了這種方法，目前運(yùn)行半年以上基本上都沒得問題；如果你有更好的方法也可以告訴我們，一起聊聊；哈哈哈

創(chuàng)建新窗口

主進(jìn)程

在主進(jìn)程中配置窗口信息，具體內(nèi)容可以看文檔，以下是我的配置；配置中的參數(shù)都是可以根據(jù)自己的需求變化的；

注意： 在開發(fā)環(huán)境時(shí)，root_path的地址必須是你的ip地址，而不是localhost一類的。

let modal;
// 接收彈出模態(tài)框
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);
});

創(chuàng)建一個(gè)路由

{
    path:'/modal',
    name:'modal',
    component:() => import('@/views/db-file/text.vue'),
},

試試能不能啟動(dòng)

在渲染進(jìn)程中發(fā)送命令，參數(shù)需要和路由path一致即可打開窗口

ipcRenderer.send('open-modal','modal')

啟動(dòng)新窗口

當(dāng)我們做到這的時(shí)候，我們的新窗口基本上就算是可以打開了；打開了以后呢！我們需要向他傳遞一些值，這個(gè)時(shí)候?yàn)榱朔奖銋^(qū)分；如下：

主程序

渲染進(jìn)程：A渲染進(jìn)程 主進(jìn)程：A主進(jìn)程

子程序（模態(tài)框） 渲染進(jìn)程：B渲染進(jìn)程 主進(jìn)程：B主進(jìn)程

傳值

在B渲染進(jìn)程渲染完成以后（vue中的話是nextTick），發(fā)送命令通知B主進(jìn)程

ipcRenderer.send('modal-accomplish')

當(dāng)在B主進(jìn)程中接收到消息以后，發(fā)送給A渲染進(jìn)程；

 // 通知模態(tài)框渲染完成
ipcMain.on('modal-accomplish',(event,msg)=>{
    // 發(fā)送給渲染進(jìn)程
    win.webContents.send("modal-accomplish-state");
})

在A渲染進(jìn)程中接收

onMounted(()=>{
     ipcRenderer.on('modal-accomplish-state',()=>{
        console.log('偉大時(shí)代');
     })
})

A渲染進(jìn)程接收到值以后在發(fā)送給A主進(jìn)程

onMounted(()=>{
     ipcRenderer.on('modal-accomplish-state',()=>{
        console.log('偉大時(shí)代');
        ipcRenderer.send('modal-accomplish-end','傳值');
     })
})

A主進(jìn)程接收到值以后發(fā)送給B渲染進(jìn)程

ipcMain.on('modal-accomplish-end',(event,token)=>{
    modal.webContents.send('modal-accomplish-child-end',token);
})

B渲染進(jìn)程接收值

ipcRenderer.on('modal-accomplish-child-end',(event,msg)=>{
    console.log(msg); // 傳值
})

以上五/六步就可以將值獲取到了；你學(xué)會(huì)了嗎？

以上看起來可以能些許復(fù)雜，你多練習(xí)兩次就覺得還好了！這也是為了避免一些問題想出來的；大家可以參考；有更好的方法也可以留言討論

注意 如果你在寫了代碼以后沒有接收到值的話，可以重啟一下；可能是你寫了主進(jìn)程代碼更新不及時(shí)導(dǎo)致的

以上就是electron創(chuàng)建新窗口模態(tài)框并實(shí)現(xiàn)主進(jìn)程傳值給子進(jìn)程的詳細(xì)內(nèi)容，更多關(guān)于electron模態(tài)框主進(jìn)程傳值子進(jìn)程的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論