Electron

Question

至此，经过大量研究和谷歌搜索，我了解了主渲染器和渲染器的作用，以及它们在 Electron 应用程序中的重要性。

但是，我在这里发出我的请求，希望所有那些知识渊博的人都能回答：请给我一个清晰的解释，说明如何在我的应用程序？

我有一个 main.js、index.html 和 style.css，我正在尝试从 html 文件中触发一个 javascript 函数。 @Manprit Singh Sahota 有同样的问题，, and solves it (lucky him), but simply states that he's setting his function in renderer.js without explaining where and what and how. @NealR 但也没有解释他如何将他的 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>

我的 window 工作正常，没有错误。但是当我点击按钮时，没有任何反应，也没有任何内容记录到控制台。也许我在代码中做错了什么，但我所有的研究似乎都指向 Electron 主进程和渲染器进程。

非常感谢任何建议。

Answer 1

使用 electron 你必须注意你的 JS 文件在哪个上下文中运行:

进程/nodejs 上下文
通常 main.js 运行s 在这里，它完成电子环境和浏览器/电子 windows 的所有引导。在某些时候，你会告诉 window 加载一些 HTML 文件 - 进入第二个上下文。
电子window/浏览器上下文
任何加载到 window、运行s "remotely" 的东西。要在浏览器上下文中执行 JS 文件，您几乎可以像处理任何其他 Web 应用程序一样进行操作（使用 <script> 标记等）。

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

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

得到你想要的：

在 main.js
加载一些 HTML 文档到那个 window
引用该 HTML 文档中的其他一些 JS 文件，该文件现在与 HTML 文档一起加载（这就是您参考中的不祥 render.js）
在其他 JS 文件中放入一些逻辑 --> 在 window 上下文中执行

Electron 文档 (https://electronjs.org/docs/tutorial/first-app) 中有一个很好的演练来获取基本示例并运行ning。

Answer 2

主进程和渲染进程完全分开。

您在 package.json 中定义了主进程：[=13=]

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

    /* more scripts and dependencies here */
}

然后在主进程中创建一个 window 来加载 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 and ipcRenderer to send messages.

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

Electron - How to use main and renderer processes

javascript

renderer

node.js