electron渲染程序主程序相互傳值範例解析

2023-02-20 06:00:55

在electron中分為渲染程序和主程序

渲染程序就是瀏覽器環境，主程序就是node環境

既然他們是不同的環境，那麼為我們怎麼讓他們相互關聯起來呢？或者說怎麼傳遞值？畢竟在開發中可能會遇到我想要的值只能在node環境中才能獲取，然後node中可能也會需要瀏覽器環境的值；這個時候就需要兩個環境聯通起來相互傳值

瀏覽器傳值給主程序

瀏覽器環境

引入:

import { ipcRenderer } from "electron";

使用:

ipcRenderer.send("reader-json-file", '123');

主程序

引入:

import { ipcMain } from "electron";

使用:

ipcMain.on('reader-json-file',(event, num)=>{
    console.log(num); // 123 (字串型別)
})

完成以上的操作我們就可以在主程序中獲取到渲染程序傳遞過來的值了

主程序傳值給渲染程序

在這個的時候跟以上有一點點差異，這個是需要拿到你建立這個視窗（主程序的變數值），然後將其傳值給他，並在渲染程序中接收

主程序

使用：

win.webContents.send('reader-json-file-data','456');

這兒的win是你在建立視窗時的變數，如下：

  win = new BrowserWindow({
    width: 1000,
    height: 600,
    minWidth: 800,
    minHeight: 600,
    // 不要邊框
    frame: false,
    webPreferences: {
      webviewTag: true,
      // 禁止同源策略，避免 axios 無法使用
      webSecurity: false,
      // Required for Spectron testing
      enableRemoteModule: !!process.env.IS_TEST,
      nodeIntegration: true,
      contextIsolation: false
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      // nodeIntegration: (process.env
      //     .ELECTRON_NODE_INTEGRATION as unknown) as boolean,
      // contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })

渲染程序

在vue中的話：可以在生命週期mounted、created中監聽

ipcRenderer.on("reader-json-file-data", (event, value) => {
    console.log(value); // 456 (字串型別)
});

注意

渲染程序和主程序相互傳值可以是任意型別（我這邊測試過可以傳遞的值，布林、數位、字串、物件都是可以的），我這邊只是做了一個演示，所以就是傳遞了一個字串型別的數位；

以上就是electron渲染程序主程序相互傳值範例解析的詳細內容，更多關於electron程序渲染傳值的資料請關注it145.com其它相關文章！