問題描述
在這一點上，經過大量研究和谷歌搜索，我了解了 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...
ma??in.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 - 如何使用主進程和渲染器進程的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！