Question

我正在学习Electron并使用多个窗口和IPC。在我的主要脚本中，我有以下内容：

var storeWindow = new BrowserWindow({
  width: 400,
  height: 400,
  show: false
});

ipc.on('show-store-edit', function(event, store) {
  console.log(store);
  storeWindow.loadURL('file://' + __dirname + '/app/store.html');
  storeWindow.show();
});

在我的主要窗口的脚本中，我在商店列表中的点击事件中有以下内容：

$.getJSON("http://localhost:8080/stores/" + item.id).done(function(store) {
   ipc.send('show-store-edit', store);
});

在控制台上，我正在从服务器打印商店数据。我不清楚的是如何将这些数据导入我storeWindow:store.html的视图中。我甚至不确定我是否正确处理了事件序列，但它们会是：

点击修改商店
从服务器获取商店数据
打开新窗口以显示商店数据

或

点击修改商店
打开新窗口以显示商店数据
从服务器获取商店数据

在后者中，我不确定如何获取从storeWindow's脚本获取商店所需的ID。

Answer 1

要将事件发送到特定窗口，您可以使用webContents.send(EVENT_NAME, ARGS)（see docs）。 webContents是窗口实例的属性：

// main process
storeWindow.webContents.send('store-data', store);

要侦听正在发送的此事件，您需要在窗口进程（渲染器）中使用侦听器：

// renderer process
var ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.on('store-data', function (event,store) {
    console.log(store);
});

Answer 2

您需要ipcMain模块来实现此目标...如API中所述：“在主进程中使用时，它会处理从渲染器进程（网页）发送的异步和同步消息。渲染器将被发射到此模块。”

ipcMain模块的API文档： https://electronjs.org/docs/api/ipc-main

要使用ipcMain，您需要在 webPreferences

上启用 nodeIntegration

win = new BrowserWindow({
    webPreferences: {
        nodeIntegration: true,
    }
})

请小心，这可能会导致安全问题。

例如：假设我们要将配置（json）文件传递到网页

（三点（...）表示已经放置在文件中但与本示例无关的代码）

main.js

...

const { readFileSync } = require('fs') // used to read files
const { ipcMain } = require('electron') // used to communicate asynchronously from the main process to renderer processes.
...

// function to read from a json file
function readConfig () {
  const data = readFileSync('./package.json', 'utf8')
  return data
}

...
// this is the event listener that will respond when we will request it in the web page
ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg)
  event.returnValue = readConfig()
})
...

index.html

...    
<script>
    <!-- import the module -->
    const { ipcRenderer } = require('electron')

    <!-- here we request our message and the event listener we added before, will respond and because it's JSON file we need to parse it -->
    var config = JSON.parse(ipcRenderer.sendSync('synchronous-message', ''))

    <!-- process our data however we want, in this example we print it on the browser console -->
    console.log(config)

     <!-- since we read our package.json file we can echo our electron app name -->
     console.log(config.name)
</script>

要查看浏览器的控制台，您需要从默认的Electron菜单或代码中打开开发工具。 例如在createWindow（）函数中

 win.webContents.openDevTools()

在Electron中将数据传递给Windows

2 个答案: