我已经遵循了几乎所有我能在 Electron 上找到的东西，但我似乎无法将事件监听器添加到我的 index.html 中的按钮。
当我的按钮被点击时，我只是想让 "something" 打印到终端。因此，我向按钮 DOM 元素添加了一个事件监听器，用于点击将使用 IPC 与 main.js 通信，理想情况下，打印到终端。
我已经下载了 Electron Quick Start并且只进行了以下几项更改:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>My Bot</title>
</head>
<body>
<h1>Welcome to Your Bot!</h1>
<p>To toggle wether the bot is on or not, click the button below: </p>
<button id="botButton">Turn Bot On</button>
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
渲染器.js:
var ipc = require('electron').ipcRenderer;
var botButton = document.getElementById('botButton');
botButton.addEventListener('click', function(){
ipc.once('actionReply', function(event, response){
processResponse(response);
})
ipc.send('invokeAction', 'someData');
});
我在 main.js 的底部添加了以下内容:
var ipc = require('electron').ipcMain;
ipc.on('invokeAction', function(event, data){
console.log("something");
var result = processData(data);
event.sender.send('actionReply', result);
});
我对这些文件之间关系的理解是否搞砸了？我只是采取了错误的途径来向我的按钮添加事件监听器吗？
最佳答案
我觉得自己像个白痴。在我的 Electron 应用程序中打开开发人员工具后，我看到了控制台打印
"Uncaught ReferenceError: require is not defined at renderer.js:8"
很明显，默认情况下，node.js 并没有集成到 renderer.js 中。一个简单的谷歌搜索让我进入了这个页面:https://github.com/electron/electron/issues/17241
好像更新了
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
到:
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
解决了这个问题。
故事的寓意:在使用 Electron 时，终端不会告诉您所有信息。尤其是在向渲染器编写代码时，您还应该在应用的开发人员工具中检查控制台!
关于javascript - Electron，IPC 通信似乎不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58847873/