electron渲染進程主進程相互傳值示例解析

更新時間：2023年02月17日 10:33:31 作者：霧戀

這篇文章主要為大家介紹了electron渲染進程主進程相互傳值示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

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

渲染進程就是瀏覽器環(huán)境，主進程就是node環(huán)境

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

瀏覽器傳值給主進程

瀏覽器環(huán)境

引入:

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 (字符串類型)
})

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

主進程傳值給渲染進程

在這個的時候跟以上有一點點差異，這個是需要拿到你創(chuàng)建這個窗口（主進程的變量值），然后將其傳值給他，并在渲染進程中接收

主進程

使用：

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

這兒的win是你在創(chuàng)建窗口時的變量，如下：

  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中監(jiān)聽

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

注意

渲染進程和主進程相互傳值可以是任意類型（我這邊測試過可以傳遞的值，布爾、數(shù)字、字符串、對象都是可以的），我這邊只是做了一個演示，所以就是傳遞了一個字符串類型的數(shù)字；

以上就是electron渲染進程主進程相互傳值示例解析的詳細內(nèi)容，更多關于electron進程渲染傳值的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

fetch-event-source庫使用源碼學習
這篇文章主要為大家介紹了fetch-event-source庫源碼學習,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-09-09
JavaScript loader原理簡單總結(jié)示例解析
這篇文章主要為大家介紹了JavaScript loader原理簡單總結(jié)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
這篇文章主要介紹了微信小程序頁面?zhèn)髦祵嵗治龅南嚓P資料,需要的朋友可以參考下
2017-04-04

JavaScript實現(xiàn)余額數(shù)字滾動效果

這篇文章主要介紹了JavaScript實現(xiàn)余額數(shù)字滾動效果，將傳入的帶滾動的n位數(shù)字拆分成每一個要滾動的數(shù)，然后動態(tài)的創(chuàng)建裝著滾動到每一位相應數(shù)字的容器，然后放入傳入的目標容器中，更多詳細內(nèi)容，一起進入下面文章學習吧

2021-12-12