嗨，我正在尝试将我的项目从网络浏览器转换为基于 GUI 的电子应用程序，我正在按照 这个视频 来启动我的项目，他正在使用纱线，但我使用 npm 9.2.0
起初，当我按下按钮时，我没有从按钮中得到任何东西，但我在评论中看到我可以尝试更改
webPreferences:{
nodeIntegration: true,
}
到
webPreferences:{
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
}
然后我得到了一些东西......错误-_-
这是我现在的代码
gui.js
const { app, BrowserWindow, ipcMain } = require("electron");
let leftWindow = null;
let rightWindow = null;
const createWindows = (win, page) => {
win = new BrowserWindow({
width: 1024,
height: 600,
resizable: false,
fullscreen: true,
webPreferences:{
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
},
});
win.loadFile(page)
};
app.whenReady().then(() => {
//createWindows(leftWindow, "dash.html");
createWindows(rightWindow, "controls.html");
});
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') {
app.quit()
}
})
ipcMain.on('send', (event, data) => {
const randomStr = data + Math.random().toString(36).substring(2, 5)
rightWindow.webContents.send('receive', randomStr)
})
渲染.js
const ipcRenderer = require("electron").ipcRenderer;
const test = () => {
ipcRenderer.send("send", document.querySelector(".keyWord").value);
};
ipcRenderer.on("receive", (event, data) => {
alert(data);
const tempTag = document.querySelector("#temp");
tempTag.innerText = data;
});
controls.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Controls</title>
<script defer src="render.js"></script>
<link rel="stylesheet" href="./public/styles.css" />
</head>
<body>
<div id="content">
<input type="text" class="keyWord" placeholder="Enter Data">
<button onclick="test()">Test</button>
<h1 id="temp">Random String</h1>
</div>
<script type="text/jsx" src="./public/controlApp.jsx"></script>
</body>
</html>
好的，按照@Arkellys 并继续链接，我对电子文档一无所知：/
我在谷歌上做了更多研究，这是他给我的 preload.js 线索的结果
gui.js
const { app, BrowserWindow, ipcMain } = require("electron");
const path = require('node:path');
let leftWindow = null;
let rightWindow = null;
const createWindows = (win, page) => {
win = new BrowserWindow({
width: 1024,
height: 600,
resizable: false,
fullscreen: true,
webPreferences:{
preload: path.join(__dirname, 'preload.js'),
},
});
ipcMain.handle('generatePassword', (req, data) => {
const password = data.keyWord + Math.random().toString().substr(2, 5)
return { password }
})
win.loadFile(page)
};
app.whenReady().then(() => {
//createWindows(leftWindow, "dash.html");
createWindows(rightWindow, "controls.html");
});
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') {
app.quit()
}
})
渲染.js
const keyWord_el = document.getElementById('keyWord');
const btn_el = document.getElementById('btn');
btn_el.addEventListener('click', async () =>{
const keyWord = keyWord_el.value;
const res = await electronAPI.createPassword({ keyWord })
document.getElementById('passWord').innerText = res.password
})
预加载.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
createPassword: (data) => ipcRenderer.invoke('generatePassword', data)
})
controls.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Controls</title>
<script defer src="render.js"></script>
<link rel="stylesheet" href="./public/styles.css" />
</head>
<body>
<div id="content">
<input id="keyWord" type="text" placeholder="Enter Data">
<button id="btn">Test</button>
<h1 id="passWord">Random String</h1>
</div>
<script type="text/jsx" src="./public/controlApp.jsx"></script>
</body>
</html>