ipcRenderer数据未以电子形式发送到ipcMain

Question

我最近开始使用电子开发桌面应用程序。

我想将表单详细信息从单击事件的main.js按钮上发送到index.html。我已经在index.js中的按钮中添加了一个侦听器。在网上搜索后发现，我必须使用 ipcMain in main.js和ipcRenderer in index.js，但这些数据并没有被发送给ipcMain。

如何在main.js中获取表单数据？

在index.html中

<div class="btn-div fld">
         <button id="loginButton" class="btn btn-primary st-btn" type="submit" name="button">Login</button>
</div> 
<script src="index.js" charset="utf-8"></script>

在index.js中

document.querySelector("#loginButton").addEventListener('click', function(){
  userDetails = document.getElementById('login');
  username = userDetails.username.value;
  password = userDetails.password.value;
  console.log("Hello");
  const {ipcRenderer} = require('electron');
  ipcRenderer.send('asynchronous-message', username);
})

在main.js中

const { app, BrowserWindow , ipcMain } = require('electron')

ipcMain.on('asynchronous-message', (event, arg) => {
  console.log( arg );
});

Answer 1

而创建浏览器窗口在电子中使用new BrowserWindow(options)，其中options是一个对象。将对象定义为：

options = {
    webPreferences: {
         preload: preload.js, //You need to create a file named preload.js (or any name) in your code
         nodeIntegration: true,
         contextIsolation: false,
    }
}

现在在一个名为preload.js的新文件中

window.ipcRenderer = require('electron').ipcRenderer;

在您的代码片段中，您添加了const { app } ...，应该以这种方式使用对象中的preload属性注入javascript。

现在，在主app.js文件(无论您命名为index.js)中，您创建了浏览器窗口：

const ipc = require('electron').ipcMain; //Add to your pre-existing code
ipc.on("close-app", (event, message) => { //"close-app" can be anything but, you need to use the same key in the send message side (later in this answer)
    browserWindow.close(); //If you named the browserwindow as browserWindow
});

现在在HTML中(即发送消息端)

...
<script>
    window.ipcRenderer("close-app", ""); //Second parameter is used if you want to send some extra message. The extra message can be viewed in the server side from the message parameter in the app.js code (just above this paragraph)
</script>

这是有点困难，如果你是第一次这样做。我增加了更多的文章，这将帮助你解决你的困惑：

StackOverflow的相关答案

与socket.io通信在NodeJS中的关系

Answer 2

虽然我看到这个问题的另一个答案可能对其他人有用，但对我却没有用.我用的是webpack，为了我的生活，即使添加了ExternalsPlugin的常识和电子，我也无法让它工作。以下措施反而奏效了：

main.js

ipcMain.on("download", (event, info) => {
info.properties.onProgress = status => win.webContents.send("downloadProgress", status);
  });

preload.js

contextBridge.exposeInMainWorld('electron', {
  api: {
    //receiving message from main.js
    responseProgress: (channel, func) => {
        let validChannels = ["downloadProgress"];
        if (validChannels.includes(channel)) { 
            ipcRenderer.on(channel, (event, ...args) => func(...args));
        }
    },
    process: (channel) => {
    //example for process that is called by button in reactjs etc
    }
});

ReactComponent.js

  function ReactComponent() {
  useEffect(() => {
        //retrieving information from preload.js originally sent from main.js
        window.electron.api.responseProgress("downloadProgress", (progress) => {
        console.log(progress);
        console.log(progress.percent);
        });
          }, []);
  return (
    //example of calling api on button click
    <button onClick={() => {
      window.electron.api.process("toMain");
    }}>Download</button>
    )
}