Question

在这一点上，经过大量研究和搜索，我了解了main和渲染器的功能以及它们在Electron应用程序中的重要性。

但是，在这里，我要发出恳求，以便得到所有那些知识渊博的人的回答：请问我能清晰解释如何在我的应用程序中实现该功能吗？

我有一个main.js，index.html和style.css，我正在尝试从html文件中触发一个javascript函数。 @Manprit Singh Sahota有一个同样的问题，button click event binding in Electron js，并解决了这个问题（幸运的是他），但只是声明他在renderer.js中设置了功能，而没有说明在哪里，做什么以及如何做。 @NealR also has a similar question，但也没有说明他如何关联renderer.js。

请有人揭开这个神秘文件的存放秘密，以及如何在程序中引用它？

不要建议Electron文档，我已经看过它了，它似乎需要进行一些认真的改进...

main.js

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

//stuff creating window...

function applyFormattingRules() {
  console.log('called!');
};

//more stuff opening and closing window...

index.html

<head>
    //...
    <script src="main.js"></script>
</head>

<body>
    //...
    <button type="button" class="btn btn-secondary" name="applyRules"
    onclick="applyFormattingRules()">Apply formatting</button>
</body>

我的窗口工作正常，那里没有错误。但是，当我单击按钮时，什么也没有发生，也没有任何日志记录到控制台。也许我在代码中做错了什么，但我的所有研究似乎都指向了Electron主进程和渲染器进程。

任何建议都值得赞赏。

Answer 1

使用电子时，您必须注意JS文件在哪种上下文中运行：

流程/ nodejs上下文
通常main.js在这里运行，它完成电子环境和浏览器/电子窗口的所有引导。在某个时候，您将告诉一个窗口加载一些HTML文件-进入第二个上下文。
电子窗口/浏览器上下文
加载到窗口中的所有内容都会“远程”运行。要在浏览器上下文中获取JS文件，您需要执行与其他任何Web应用程序相同的操作（使用<script>标签等）。

到目前为止，电子应用程序与任何其他Web应用程序都没有什么不同-进程/ nodejs部分充当服务器组件，而窗口上下文是网页/客户端上下文。请注意，这些上下文只是松散耦合的，您需要IPC机制在它们之间交换数据。

静止电子进一步发展-它允许直接将nodejs模块嵌入窗口上下文中。由于电子团队对基础铬库进行了某些扩展，因此这是可能的。请谨慎使用，因为这可能会引入安全问题（甚至还有安全设置）。

要获得想要的东西：

在main.js中创建一个窗口
将一些HTML文档加载到该窗口中
请参阅该HTML文档中的其他JS文件，该文件现在随HTML文档一起加载（在您的参考文献中是不祥的render.js）
在其他JS文件中添加一些逻辑->在窗口上下文中执行

在电子文档（https://electronjs.org/docs/tutorial/first-app）中有一个不错的演练来建立并运行一个基本示例。

Answer 2

主要过程和渲染过程完全分开。

您在package.json中定义主要过程：

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "description": "Super cool electron app",
    "main": "index.js",

    /* more scripts and dependencies here */
}

然后在主过程中，创建一个窗口，该窗口用于加载html资源：

    window = new BrowserWindow({
        x: windowState.x,
        y: windowState.y,
        width: windowState.width,
        height: windowState.height,
        backgroundColor: '#000000',
    })

    // load main file
    window.loadFile('path/to/index.html')

该html文件的行为就像任何标准网页一样，并且可以具有自己的样式和脚本。 您不应在后端HTML中包含后端main.js文件。相反，如果您需要在前端和后端之间进行通信，则可以设置一个websocket进行通信或使用ipcMain和ipcRenderer至send messages。

电子-如何使用主进程和渲染进程

2 个答案: