Javascript BrowserWindow不是构造函数或未定义-Electron_Javascript_Node.js_Electron

Javascript BrowserWindow不是构造函数或未定义-Electron

javascript node.js electron

Javascript BrowserWindow不是构造函数或未定义-Electron,javascript,node.js,electron,Javascript,Node.js,Electron,我第一次在MacBook上试用Electron，因为我想要一个可以编写桌面应用程序的环境。退休前我是一名程序员，使用各种语言，但不太懂javascript 我正在浏览在线教程，尝试创建一个只打开另一个窗口的小应用程序。我已经设置了main.js、index.js和index.html文件。我正在与几个错误作斗争，我认为它们与“远程”呼叫有关在index.js中，当我包括： const BrowserWindow=electron.remote.BrowserWindow 当main.js加载i

我第一次在MacBook上试用Electron，因为我想要一个可以编写桌面应用程序的环境。退休前我是一名程序员，使用各种语言，但不太懂javascript

我正在浏览在线教程，尝试创建一个只打开另一个窗口的小应用程序。我已经设置了main.js、index.js和index.html文件。我正在与几个错误作斗争，我认为它们与“远程”呼叫有关

在index.js中，当我包括：

const BrowserWindow=electron.remote.BrowserWindow

当main.js加载index.html时，我得到一个错误：

index.js:3未捕获类型错误：无法读取index.js:3处未定义的属性“BrowserWindow”
当我取出“remote”时，main.js加载index.html时没有错误，但当我尝试使用按钮打开另一个窗口时，我得到以下错误：
index.js:10未捕获类型错误：BrowserWindow不是HtmlButtoneElement的构造函数。（index.js:10）（匿名）@index.js:10

我花了几天的时间在网上阅读，但我无法理解这一点。我在MacBook上运行electron。我想在这方面得到一些帮助。我一直在读有关远程和渲染等的书，但我不确定到底发生了什么。谢谢
这是我的档案
main.js
index.html：
<!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>

我也在使用MacBook，我知道如何在点击按钮时打开一个新的浏览器窗口。您必须使用来自electron的IPC。在.html中，当您按下按钮时，在文件末尾放置一个简单脚本，如下所示：

你好，世界！
打开
常数电子=要求（‘电子’）；
常数{IPC}=电子；
document.getElementById（'open'）。addEventListener（'click'，event=>{
发送（'main:add'）；
});

然后在您的electron主文件（对我来说是一个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中以使事情更简单
如果要发回信息，请在electron主文件中使用yourWindowNameInElectron.WebContent.send（'eventName'）
，在html中使用ipcRenderer.on（'eventName'）
。请注意，electron中的事件必须与html中的事件名称相同
希望这能对您有所帮助。
const{BrowserWindow}=require（'electron'）.remote
–但请注意remote
位于electron 12中webPreferences:{nodeIntegration:true，enablemotemodule:true}
除非enableRemoveModule为true，否则您不能使用远程模块。这是V10Ok的默认值，所以你会说我不应该使用remote，这对我来说没问题。但是，当我取出它时，按下按钮仍然会出现错误。Electron有两个不同的进程—可以不受限制地使用节点API的主进程—和具有浏览器API但受节点API限制的渲染器进程。这些过程之间的桥梁是IPC。虽然答案是关于如何打开模式窗口-它仍然应该让您了解如何从主进程和渲染器进程打开子窗口-只需忽略模式部分：）谢谢！我发现了类星体，并一直用它来代替电子本身。我的应用程序将是桌面的，所以有一个带有Quasar/Vue的电子底座。
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()
  })

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;
  });
});