electron建立新視窗模態框並實現主程序傳值給子程序

2023-02-16 06:00:19

正文

我們在開發的過程中難免會遇到需要建立一個子視窗（子程序），但是在這個子程序中所有值都是初始化的，而我們肯定是需要一些值才能進行下一步操作，比如：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模態框主程序傳值子程序的資料請關注it145.com其它相關文章！

electron建立新視窗模態框並實現主程序傳值給子程序

目錄

正文

建立新視窗

主程序

建立一個路由

試試能不能啟動

啟動新視窗

傳值

熱門文章