个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 12:32:43 24 4
gpt4 key购买 nike

我第一次在我的 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()
})
索引.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>
index.js 
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>
然后在您的 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 中以使事情更简单。
如果您想发回信息，请使用 yourWindowNameInElectron.webContents.send('eventName')在 Electron 主文件和 ipcRenderer.on('eventName')在你的 html 中。注意electron中的事件必须和html中的事件名称相同。
希望这会帮助你。

关于javascript - BrowserWindow 不是构造函数或未定义 - Electron，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64163175/

24 4 0
文章推荐： javascript - 无法使用ElectronJS运行NodeJS脚本(已更新)
文章推荐： javascript - 这段代码中的 “export default class Render”是什么，为什么要导出和使用它？
文章推荐： Angular 和 Electron - 执行外部应用程序
文章推荐： selenium - 使用Selenium ChromeDriver时Electron无法访问用户数据目录
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com