我第一次在我的 MacBook 上试用 Electron，因为我想要一个可以在其中编写桌面应用程序的环境。在退休之前我是一名程序员，使用过各种语言，但没有太多 javascript。
我正在浏览在线教程以尝试创建一个只打开另一个窗口的小应用程序。我设置了 main.js、index.js 和 index.html 文件。我正在努力解决几个错误，我认为它们与“远程”调用有关。
在 index.js 中，当我包括:const BrowserWindow = electron.remote.BrowserWindow 当 main.js 加载 index.html 我得到错误:index.js:3 Uncaught TypeError: Cannot read property 'BrowserWindow' of undefined at index.js:3当我取出“远程”时，main.js 加载 index.html 时没有错误，但是当我尝试使用按钮打开另一个窗口时，出现此错误:index.js:10 Uncaught TypeError: BrowserWindow is not a constructor at HTMLButtonElement.<anonymous> (index.js:10) (anonymous) @ index.js:10我花了几天的时间在网上阅读，但我无法弄清楚这一点。我在 MacBook 上运行 Electron 。我希望得到一些帮助。我一直在阅读有关远程和渲染等的信息，但我不确定到底发生了什么。谢谢!
这是我的文件
main.js
// Modules to control application life and create native browser window
//require('@electron/remote/main').initialize()
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
mainWindow.loadFile('src/index.html')
// Open the DevTools.
mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/css/add.css">
</head>
<body>
<h1>Hello World!</h1>
<div class="row">
<div id="price-container">
<p class="subtext">Current BTC USD</p>
<h1 id="price">$9,503.21</h1>
</div>
<div id="goal-container">
<p><img src="../assets/images/up.svg"><span id="targetPrice">Choose a Target Price</span></p>
</div>
<div id="right-container">
<button id="notifyBtn">Notify me when..</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
const electron = require('electron')
const path = require('path')
//const BrowserWindow = electron.remote.BrowserWindow
const BrowserWindow = electron.BrowserWindow
const notifyBtn = document.getElementById('notifyBtn')
notifyBtn.addEventListener('click', function (event) {
const modalPath = path.join('file://', __dirname, 'add.html')
let win = new BrowserWindow(
{
width: 400, height: 200,
webPreferences: {
nodeIntegration: true
}
}
)
win.on('close', function () { win = null })
win.loadURL(modalPath)
win.show()
})
最佳答案
我也在使用 MacBook，我想出了如何打开一个新的 BrowserWindow单击按钮时。您必须使用 工控机 从 Electron 。在您的 .html 中，当您有按钮时，在文件末尾放置一个简单的脚本，如下所示:
<body>
<h1>Hello World!</h1>
<button id=open>Open</button>
</body>
<script type="text/javascript">
const electron = require('electron');
const { ipcRenderer } = electron;
document.getElementById('open').addEventListener('click', event => {
ipcRenderer.send('main:add');
});
</script>
index.js 文件)中输入以下内容:let addWindow;
ipcMain.on('main:add', event => {
addWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
});
addWindow.loadURL(`file://${__dirname}/index.html`);
addWindow.webContents.openDevTools();
addWindow.on('closed', () => {
addWindow = null;
});
});
.html要在新窗口中打开的文件。 (对我来说这是一个 index.html )。随意将 JS 从单独的文件中包含到您的 html 中。我把它放在 html 中以使事情更简单。
如果您想发回信息，请使用
yourWindowNameInElectron.webContents.send('eventName')在 Electron 主文件和ipcRenderer.on('eventName')在你的 html 中。注意electron中的事件必须和html中的事件名称相同。希望这会帮助你。
关于javascript - BrowserWindow 不是构造函数或未定义 - Electron，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64163175/