Electron 如何制作电子产品中的弹出窗口

我想知道如何在我的electron应用程序中添加“关于”按钮，以打开带有软件详细信息的弹出窗口？大概是这样的：

代码 这就是当前我的

index.js

的样子：

const { app, BrowserWindow, Menu } = require('electron');
const isDevMode = require('electron-is-dev');
const { CapacitorSplashScreen, configCapacitor } = require('@capacitor/electron');

const path = require('path');

// Place holders for our windows so they don't get garbage collected.
let mainWindow = null;

// Placeholder for SplashScreen ref
let splashScreen = null;

//Change this if you do not wish to have a splash screen
let useSplashScreen = true;

// Create simple menu for easy devtools access, and for demo
const menuTemplateDev = [
  {
    label: 'Options',
    submenu: [
      {
        label: 'Open Dev Tools',
        accelerator: "CmdOrCtrl+D",
        click() {
          mainWindow.openDevTools();
        },
      },
    ],
  },
  {
    label: 'Help',
    submenu: [
      {
        label: 'Support',
        accelerator: "CmdOrCtrl+H",
        click: async () => {
          const { shell } = require('electron');
          await shell.openExternal('https://example.com/contact-us');
        }
      },
      { type: 'separator' },
      {
        label: 'Quit!',
        accelerator: "CmdOrCtrl+Q",
        click() {
          app.quit();
        }
      }
    ]
  }
];

const menuTemplateProd = [
  {
    label: 'Help',
    submenu: [
      {
        label: 'Support',
        accelerator: "CmdOrCtrl+H",
        click: async () => {
          const { shell } = require('electron')
          await shell.openExternal('https://example.com/contact-us')
        }
      },
      { type: 'separator' },
      {
        label: 'Quit!',
        accelerator: "CmdOrCtrl+Q",
        click() {
          app.quit();
        }
      }
    ]
  }
];

async function createWindow () {
  // Define our main window size
  mainWindow = new BrowserWindow({
    height: 920,
    width: 1600,
    show: false,
    // icon: __dirname + '/Icon/Icon.icns',
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, 'node_modules', '@capacitor', 'electron', 'dist', 'electron-bridge.js')
    }
  });
  mainWindow.setIcon(path.join(__dirname, '/splash_assets/logo.png'));

  configCapacitor(mainWindow);

  if (isDevMode) {
    // Set our above template to the Menu Object if we are in development mode, dont want users having the devtools.
    Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplateDev));
    // If we are developers we might as well open the devtools by default.
    mainWindow.webContents.openDevTools();
  } else {
    Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplateProd));
  }

  if(useSplashScreen) {
    splashScreen = new CapacitorSplashScreen(mainWindow);
    splashScreen.init();
  } else {
    mainWindow.loadURL(`file://${__dirname}/app/index.html`);
    mainWindow.webContents.on('dom-ready', () => {
      mainWindow.show();
    });
  }

}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some Electron APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  // On OS X 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 (mainWindow === null) {
    createWindow();
  }
});

// Define any IPC or other custom functionality below here

有什么建议吗？

已解决 我添加了

新窗口

函数和

新索引

文件。并将我的

index.js

更改为以下代码：

const { app, BrowserWindow, Menu } = require('electron');
const isDevMode = require('electron-is-dev');
const { CapacitorSplashScreen, configCapacitor } = require('@capacitor/electron');

const path = require('path');

// Place holders for our windows so they don't get garbage collected.
let mainWindow = null;
let childWindow = null;  // <---- ADDED

// Placeholder for SplashScreen ref
let splashScreen = null;

//Change this if you do not wish to have a splash screen
let useSplashScreen = true;

// Create simple menu for easy devtools access, and for demo
const menuTemplateDev = [
  {
    label: 'Options',
    submenu: [
      {
        label: 'Open Dev Tools',
        accelerator: "CmdOrCtrl+D",
        click() {
          mainWindow.openDevTools();
        },
      },
    ],
  },
  {
    label: 'Help',
    submenu: [
      {  // <---- ADDED
        label: 'About',  // <---- ADDED
        accelerator: "F1",  // <---- ADDED
        click: async () => {  // <---- ADDED
          createAboutWindow();  // <---- ADDED
        }  // <---- ADDED
      },  // <---- ADDED
      {
        label: 'Support',
        accelerator: "CmdOrCtrl+H",
        click: async () => {
          const { shell } = require('electron');
          await shell.openExternal('https://example.com/contact-us');
        }
      },
      { type: 'separator' },
      {
        label: 'Quit!',
        accelerator: "CmdOrCtrl+Q",
        click() {
          app.quit();
        }
      }
    ]
  }
];

const menuTemplateProd = [
  {
    label: 'Help',
    submenu: [
      {  // <---- ADDED
        label: 'About',  // <---- ADDED
        accelerator: "F1",  // <---- ADDED
        click: async () => {  // <---- ADDED
          createAboutWindow();  // <---- ADDED
        }  // <---- ADDED
      },  // <---- ADDED
      {
        label: 'Support',
        accelerator: "CmdOrCtrl+H",
        click: async () => {
          const { shell } = require('electron')
          await shell.openExternal('https://example.com/contact-us')
        }
      },
      { type: 'separator' },
      {
        label: 'Quit!',
        accelerator: "CmdOrCtrl+Q",
        click() {
          app.quit();
        }
      }
    ]
  }
];

async function createWindow () {
  // Define our main window size
  mainWindow = new BrowserWindow({
    height: 920,
    width: 1600,
    show: false,
    // icon: __dirname + '/Icon/Icon.icns',
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, 'node_modules', '@capacitor', 'electron', 'dist', 'electron-bridge.js')
    }
  });
  mainWindow.setIcon(path.join(__dirname, '/splash_assets/logo.png'));

  configCapacitor(mainWindow);

  if (isDevMode) {
    // Set our above template to the Menu Object if we are in development mode, dont want users having the devtools.
    Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplateDev));
    // If we are developers we might as well open the devtools by default.
    mainWindow.webContents.openDevTools();
  } else {
    Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplateProd));
  }

  if(useSplashScreen) {
    splashScreen = new CapacitorSplashScreen(mainWindow);
    splashScreen.init();
  } else {
    mainWindow.loadURL(`file://${__dirname}/app/index.html`);
    mainWindow.webContents.on('dom-ready', () => {
      mainWindow.show();
    });
  }

}

async function createAboutWindow () {  // <---- ADDED
  // Define our main window size
  childWindow = new BrowserWindow({  // <---- ADDED
    height: 400,  // <---- ADDED
    width: 600,  // <---- ADDED
    show: false,  // <---- ADDED
    minimizable: false,  // <---- ADDED
    maximizable: false,  // <---- ADDED
    parent: mainWindow,  // <---- ADDED
    // icon: __dirname + '/Icon/Icon.icns',  // <---- ADDED
    webPreferences: {  // <---- ADDED
      nodeIntegration: true,  // <---- ADDED
      preload: path.join(__dirname, 'node_modules', '@capacitor', 'electron', 'dist', 'electron-bridge.js')  // <---- ADDED
    }  // <---- ADDED
  });  // <---- ADDED
  childWindow.setIcon(path.join(__dirname, '/splash_assets/logo.png'));  // <---- ADDED

  configCapacitor(childWindow);  // <---- ADDED

  childWindow.removeMenu();  // <---- ADDED

  childWindow.loadURL(`file://${__dirname}/index_child.html`);  // <---- ADDED
  childWindow.webContents.on('dom-ready', () => {  // <---- ADDED
    childWindow.show();  // <---- ADDED
  });  // <---- ADDED
}  // <---- ADDED

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some Electron APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  // On OS X 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 (mainWindow === null) {
    createWindow();
  }
  if (childWindow === null) {  // <---- ADDED
    createAboutWindow();  // <---- ADDED
  }  // <---- ADDED
});

// Define any IPC or other custom functionality below here

const{app，BrowserWindow，Menu}=require（'electron'）；
const isDevMode=require（'electron-is-dev'）；
const{capactorsplashsscreen，configcapactors}=require（“@capactors/electron”）；
const path=require（'path'）；
//为我们的窗户放置支架，这样他们就不会被垃圾收集。
让mainWindow=null；
让childWindow=null；//如果我没有完全忽略某些东西，那么您提供的代码是完全不相关的。如果你没有发布，问题也会一样。现在的问题是：如何制作一个过于模糊的关于窗口。没有办法知道你需要什么。您需要先尝试，然后询问是否有具体问题。@snwflk您好，谢谢您的评论，我共享的代码是“菜单按钮代码”，其中“关于”按钮也将放在那里，因此我认为它是相关的？问题是当我添加“关于”按钮时，如何为其弹出？@snwflk
menuTemplateDev
和
menuTemplateProd
是我的菜单。用于开发和生产版本。