问题描述
首先,我知道这是一个只有初学者才会问的问题,但是在经历了 50 多种不同的解决方案、卸载 npm 和安装 yarn 之后,我不得不问这个令人难以置信的愚蠢问题.为什么这不起作用?我想使用 ElectronJS 实现一个简单的标题栏,我遇到的问题是按钮(关闭/最小化/最大化)不起作用.我收到的错误如下:
First of all, I know that this is a question only a beginner would ask, but after going through more than 50 different solutions, uninstalling npm and installing yarn I have to ask this incredible dumb question. Why doesnt this work? I want to implement a simple titlebar using ElectronJS, the problem that I have is that the buttons (Close / Minimize / Maximize) do not work. The errors that I receive are the following:
最小化错误:titlebar.js:16 Uncaught TypeError: Cannot read property 'BrowserWindow' of undefined at HTMLButtonElement.maximizeApp (titlebar.js:16)
最大化错误:titlebar.js:16 Uncaught TypeError: Cannot read property 'BrowserWindow' of undefined at HTMLButtonElement.maximizeApp (titlebar.js:16)
退出错误:titlebar.js:21 Uncaught TypeError: Cannot read property 'getCurrentWindow' of undefined at HTMLButtonElement.quitApp (titlebar.js:21)
我用来控制它的 JavaScript 文件称为 titlebar.js.就是这样:
The JavaScript file that I use to control this is called titlebar.js. This is it:
const remote_v = require("electron").remote; var minimize_v = document.getElementById("minimize"); var maximize_v = document.getElementById("maximize"); var quit_v = document.getElementById("quit"); minimize_v.addEventListener("click",minimizeApp); maximize_v.addEventListener("click",maximizeApp); quit_v.addEventListener("click",quitApp); function minimizeApp(){ remote_v.BrowserWindow.getFocusedWindow().minimize(); } function maximizeApp(){ remote_v.BrowserWindow.getFocusedWindow().maximize(); } function quitApp(){ remote_v.getCurrentWindow().close(); }
由于许多其他类似问题的修复都在渲染过程中,这是 HTML 文件:
Since many of the fixes for other problems like this is in the render process, this is the HTML File:
<!DOCTYPE html> <head> <title>Visionizer</title> <link rel="stylesheet" href="css/editor.css"> <link rel="stylesheet" href="css/titlebar.css" > </head> <body> <div class="container"> <div class="titlebar titlebarStyle"> <div class="windowTitle"> Visionizer </div> <div class="windowControls windowControlsStyle"> <button id="minimize">-</button> <button id="maximize">[]</button> <button id="quit">x</button> </div> </div> <div class="editorScreen"> </div> </div> <script src="js/titlebar.js"></script> </body> </html>
关于这个的奇怪之处在于,经过多次尝试,我决定从 github 的教程中复制代码,我认为我的代码中可能有一个错误,我太笨了,看不到.它仍然没有运行.我使用 npm 卸载了该软件包,并使用 yarn global add electron@latest 使用 yarn 安装了它,因为有人建议这样做.
The weird thing about this is that, after much trying, I decided to copy the code from the tutorial from github, I thought that there may have been an error in my code that I was too dumb to see. It still didn't run. I uninstalled the package with npm and installed it with yarn using yarn global add electron@latest since some people suggested this.
我根本不知道这是否重要,但我也会从下面的 main.js 文件中复制我的代码,因为我想确保我包含了所有内容:
I do not know whether this is important at all, but I will also copy my code from the main.js-file below since I want to be sure that I included everything:
const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 900, height: 800, minHeight: 650, minWidth: 600, frame: false, webPreferences: { nodeIntegration: true } }) win.loadFile('editor.html') win.webContents.openDevTools() } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } })
这是 package.json 文件:
And here is the package.json file:
{ "dependencies": { "electron": "^11.0.2" }, "name": "*******", "version": "1.0.0", "description": "**********", "main": "main.js", "scripts": { "start": "electron ." }, "author": "************", "license": "MIT" }
网上的一些问题回答说项目启动错误,我听从了他们的建议,我使用yarn start命令启动我的项目
Some questions on the internet were answered by saying that the project was started wrongly, I followed their advice, I start my projects using the yarn start command
感谢您阅读本文.
推荐答案
看起来你的 remote 模块是 undefined.
It looks like your remote module is undefined.
您需要设置 enableRemoteModule: true 在主窗口的 webPreferences 中,或者更好的是,完全废弃 remote 并从主进程中执行这些操作.
You'd want to set enableRemoteModule: true in your main window's webPreferences, or better yet, scrap remote altogether and do these operations from the main process.
remote 模块在 中被禁用电子 10.