Я учусь использовать Electron, и, пытаясь установить связь между моим приложением и внешним интерфейсом, я знаю, что мне нужно использовать ipcRenderer, чтобы получить ссылку на элементы DOM, а затем передать это информацию на ipcMain.
Я пытался следовать большей части советов, предложенных здесь и здесь , но оба этих примера используют require('electron').ipcMain и всякий раз, когда я пытаюсь чтобы включить мой сценарий, который будет взаимодействовать с внешним интерфейсом, в мой HTML, ничего не происходит с Uncaught ReferenceError: require is not defined. Я искал несколько часов и не смог найти решение - так что явно я делаю что-то не так.
Мой main.js очень прост, я просто создаю свое окно, а затем Я создаю прослушиватель ip c следующим образом:
const { app, BrowserWindow } = require("electron");
const ipc = require('electron').ipcMain;
function createWindow() {
const window = new BrowserWindow({
transparent: true,
frame: false,
resizable: false,
center: true,
width: 410,
height: 550,
});
window.loadFile("index.html");
}
app.whenReady().then(createWindow);
ipc.on('invokeAction', (event, data) => {
var result = "test result!";
event.sender.send('actionReply', result);
})
В файле, который я использую sh для управления DOM, я пытаюсь получить идентификатор элемента, а затем добавить прослушиватель событий, как показано здесь:
const ipc = require('electron').ipcRenderer;
const helper = require("./api");
var authenticate_button = ipcRenderer.getElementById("authenticate-button");
var authButton = document.getElementById("authenticate-button");
authButton.addEventListener("click", () => {
ipc.once('actionReply', (event, response) => {
console.log("Hello world!");
})
ipc.send('invokeAction');
});
function onAuthenticateClick() {
helper.authenticateLogin(api_public, api_secret, access_public, access_secret);
}
и, наконец, мой HTML состоит только из кнопки, которую я использую sh для прикрепления моего прослушивателя событий к:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project Test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<button id="authenticate-button" type="submit" onclick="">Authenticate</button>
<p id="status-label">Not Authenticated</p>
</div>
<script src="script.js"></script>
</body>
</html>
Если кто-то может помочь указать я в правильном направлении относительно того, как заставить эту базовую c функциональность работать, это было бы очень полезно!