电子中的多窗口

Question

我已经找了几个小时了，但我找不到一种方法来在我的Electron应用程序中建立一个使用多个窗口的工作设置。

我使用的是electron-forge和普通的JS。没有反应或vue。

我试图实现的是弹出窗口，我可以使用函数从主应用程序仪表板内部触发。

下面是我为HTML准备的内容：

<i onclick="newBot()" class="fas fa-plus new-bot-button bar-icon"></i>
<i onclick="selectBot()" class="fas fa-box-open select-bot-button bar-icon"></i>
<i onclick="startBot()" class="fas fa-play start-bot-button bar-icon"></i>
<i onclick="stopBot()" class="fas fa-stop stop-bot-button bar-icon"></i>
<i onclick="about()" class="fas fa-info about-button bar-icon"></i>

我完全不知道如何在JavaScript中实现这一点，所以非常感谢您的帮助。

注意，我有一个预加载脚本mainPreload.js，主脚本是main.js。该窗口也是无框架的，并且有一个我编写的自定义标题栏。它看起来像这样。上面提到的图标是最右边的那组图标。

​

​

这是我的main.js

const { ipcMain, app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    resizable: false,
    webPreferences: {
      preload: path.join(__dirname, 'mainPreload.js'),
      nodeIntegration: true,
      contextIsolation: false
    },
    frame: false,
    icon: './assets/toggle-01.png'
  })
  
  win.loadFile('index.html');
  ipcMain.on('minimize', () => {
    win.minimize()
  });
}



app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

这是我的mainPreload.js

function scrollDown() {
  document.getElementById('console-text').scrollTop = document.getElementById('console-text').scrollHeight
}

window.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('console-text');
  console.log = function(message) {
    const p = container.appendChild(document.createElement('p'));
    p.textContent = message;
    p.className = 'console-output';
    scrollDown();
  };
  window.addEventListener('error', (error) => {
    const p = container.appendChild(document.createElement('p'));
    p.textContent = error.message;
    p.className = 'console-output';
    scrollDown();
  });
  console.log('Ready')
})

谢谢!

Answer 1

要显示新窗口，只需创建新的BrowserWindow实例。你可以参考ElectronJS samples on GitHub

下面是基于创建窗口演示的代码。

添加一个ID到你的按钮(对于这个btw来说，使用<i>标签不是最好的主意)：

    <i id="id-about" class="fas fa-info about-button bar-icon"></i>

然后创建一个单击事件处理程序。将此代码放入渲染器进程(在本例中是在index.html中运行的JS )。

const {BrowserWindow} = require('electron').remote
const path = require('path')

const newWindowBtn = document.getElementById('id-about')

newWindowBtn.addEventListener('click', (event) => {
  const modalPath = path.join('file://', __dirname, '../../sections/windows/about.html')
  let win = new BrowserWindow({ width: 400, height: 320 })

  win.on('close', () => { win = null })
  win.loadURL(modalPath)
  win.show()
})

希望这能有所帮助。您可以在ElectronJS Docs (特别是BrowserWindow)中找到更多信息