Electron - 如何使用主进程和渲染器进程答案

【问题标题】：Electron - How to use main and renderer processesElectron - 如何使用主进程和渲染器进程
【发布时间】：2020-04-09 21:26:15
【问题描述】：

在这一点上，经过大量研究和谷歌搜索，我了解了 main 和 renderer 的作用，以及它们在 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 主进程和渲染器进程。

非常感谢任何建议。

【问题讨论】：

标签： javascript node.js electron renderer

【解决方案1】：

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

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

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

Electron 更进一步——它允许直接将 nodejs 模块嵌入到窗口上下文中。这是可能的，因为电子团队对底层 chrome 库进行了一些扩展。谨慎使用它，因为它可能会引入安全问题（甚至有一个安全设置）。

得到你想要的：

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

在电子文档 (https://electronjs.org/docs/tutorial/first-app) 中有一个很好的演练来启动和运行一个基本示例。

【讨论】：

感谢这些要点，但由于我是 Electron 新手，我需要更多详细信息。如何“引用该 HTML 文档中的其他 JS 文件”？我已经通过那个教程，它只有 main.js 并没有提到 render.js
与任何其他 HTML 文档一样，例如<script src="./render.js"></script>

【解决方案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 文件就像任何标准网页一样，可以有自己的样式和脚本。 您不应该将您的后端 main.js 文件包含到您的前端 HTML 中。 相反，如果您需要在前端和后端之间进行通信，您可以设置一个 websocket 进行通信或使用ipcMain 和 ipcRenderer 到 send messages。

【讨论】：