Electron - 如何使用主进程和渲染器进程 [英] Electron - How to use main and renderer processes
问题描述
在这一点上，经过大量研究和谷歌搜索，我了解了 main 和 renderer 的作用，以及它们在 Electron 应用中的重要性.
At this point, after much research and googling, I understand what the main and the renderer do, and their importance in an Electron app.
但是，我在这里发出请求，希望所有知识渊博的人都能回答:请我清楚解释如何在我的应用程序中实现这一点?
However, here I am sending out my plea to be answered by all those knowledgeable people out there: Please can I have a clear explanation of how exactly to implement this in my app?
我有一个 main.js、index.html 和 style.css，我正在尝试从 html 文件中触发一个 javascript 函数.@Manprit Singh Sahota 有同样的问题，Electron js 中的按钮点击事件绑定，并解决了它(他很幸运)，但只是说他在 renderer.js 中设置了他的函数，而没有解释在哪里、什么以及如何.@NealR 也有类似的问题 但也没有解释他是如何关联他的 renderer.js 的.
I have a main.js, index.html, and style.css, and I'm trying to fire a javascript function from the html file. @Manprit Singh Sahota has the same question, button click event binding in Electron js, 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 also has a similar question but also doesn't explain how he's associating his renderer.js.
请有人揭开这个神秘文件保存在哪里的秘密，以及如何在我的程序中引用它?
Please, someone unveil the secret of where this mysterious file is kept, and how I can reference it in my program?
不要建议 Electron 文档，我已经通过它，它似乎需要一些认真的改进......
Don't advise the Electron documentation, I've already been through it and it seems to need some serious improvement...
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 主进程和渲染器进程.
My window works fine, no errors there. But when I click the button, nothing happens, and nothing logs to the console. Maybe I'm doing something wrong in the code but all my research seems to point to the Electron main and renderer processes.
非常感谢任何建议.
推荐答案
使用electron你必须注意你的JS文件在哪个上下文中运行:
With electron you have to pay attention in which context your JS files run:
- 进程/nodejs 上下文
通常main.js在这里运行，它完成了电子环境和浏览器/电子窗口的所有引导.在某些时候，您会告诉一个窗口加载一些 HTML 文件 - 进入第二个上下文. - 电子窗口/浏览器上下文
任何加载到窗口中的东西都会远程"运行.要在浏览器上下文中执行 JS 文件，您几乎可以与任何其他 Web 应用程序执行相同的操作(使用<script>标记等).
- process / nodejs context
Typicallymain.jsruns here, it does all the bootstrapping of the electron environment and browser / electron windows. At some point you will tell a window to load some HTML file - which enters the second context. - electron window / browser context
Anything that got loaded into a window, runs "remotely". To get JS files extecuted in the browser context, you pretty much do the same as with any other web application (use<script>tags etc).
到目前为止，电子应用程序与任何其他 Web 应用程序没有什么不同 - 进程/nodejs 部分充当服务器组件，而窗口上下文是网页/客户端上下文.请注意，这些上下文只是松散耦合的，您需要 IPC 机制在它们之间交换数据.
Up to that point an electron app is not different to any other web application - the process/nodejs part acts as a server component, while the window context is the webpage/client context. Note that those contexts are only loosely coupled, you need IPC mechanisms to exchange data between them.
Electron 更进一步——它允许直接将 nodejs 模块嵌入到窗口上下文中.这是可能的，因为电子团队对底层 chrome 库进行了一些扩展.谨慎使用它，因为它可能会引入安全问题(甚至有一个安全设置).
Still electron goes abit further - it allows to directly embed nodejs modules into a window context. This is possible due to some extensions made by the electron team to the underlying chrome libraries. Use that with caution as it might introduce security issues (there is even a security setting for this).
得到你想要的:
- 在
main.js中创建一个窗口 - 将一些 HTML 文档加载到该窗口中
- 引用该 HTML 文档中的其他一些 JS 文件，该文件现在与 HTML 文档一起加载(在您的引用中是不祥的
render.js) - 在其他 JS 文件中添加一些逻辑 --> 在窗口上下文中执行
在电子文档(https://electronjs.org/docs/tutorial/first-app).
这篇关于Electron - 如何使用主进程和渲染器进程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
