如何调用函数是电子网页中的renderer.js/main.js。

Question

这里的新手到电子，我已经建立了一个简单的web应用程序与反应JS，并能够看到它在窗口通过调用

window.loadFile('./build/index.html');

现在，我想调用位于renderer.js/main.js中的函数，它应该读取文件系统并将数据返回到web应用程序。

我已经在renderer.js上试过了

const { ipcRenderer } = require('electron');

document.getElementById('#button').addEventListener('click', function (event) {
    //read file contents
    console.log('file contents');
});

但这里有两个问题

1. 控件来自renderer.js，相反，我希望控件在React的网页上。
2. 读取的数据应返回到网页，以便可以在网页中显示。

Answer 1

您应该能够直接在您的react组件脚本上导入/要求ipcRenderer，并可能在生命周期挂钩上加载该文件。“renderer.js”只是在(电子)网页上执行客户端javascript的一种方式，但任何其他方式也能做到这一点。

如果您无法从webapp导入或要求电子(我还没有使用电子反应模板)，那么您可以编写一个所谓的预加载脚本，在创建浏览器窗口时加载该脚本(请参阅文档)，并将ipcRenderer放在窗口上如下：

const {ipcRenderer} = require('electron')
window.ipcRenderer = ipcRenderer

然后您可以从react应用程序访问它。

Answer 2

您可以在事件侦听器中直接使用fs。

const { ipcRenderer } = require('electron');
const fs = require("fs");

document.getElementById('#button').addEventListener('click', function (event) {
  console.log(fs.readFileSync("some/file/path", "utf8"));
});

在主程序和渲染程序中，电子公开对Node.js的完全访问。

https://www.electronjs.org/docs/tutorial/application-architecture#using-nodejs-apis

Answer 3

您正在使用React构建您的电子渲染器。

请检查此以清除主要流程是什么和渲染器是什么。

如何在反应和电子之间进行通信

这是我以前发过的答案。你可以看看这个。

这是预先要求。

let mainWindow = new BrowserWindow(
  {
    width: 800,
    height: 600,
    webPreferences:{
      nodeIntegration:true
    }
  });

在创建nodeIntegration时，应该启用BrowserWindow标志。以便您可以在渲染器上使用任何Nodejs API。