Electron菜单的创建与事件绑定

小仓桑

已于 2023-03-19 22:17:58 修改

阅读量668

点赞数

分类专栏： Electron 文章标签： electron javascript Powered by 金山文档

于 2023-03-19 21:37:06 首次发布

本文链接：https://blog.csdn.net/qq_43462019/article/details/129657063

版权

Electron 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该文章展示了如何在Electron应用中创建和设置菜单。首先，通过Menu和BrowserWindow模块定义了一个包含多个子菜单的菜单模板，然后在ready事件触发时，将菜单应用到主窗口，并处理点击事件，例如打开新窗口。

摘要由CSDN通过智能技术生成

第一步：创建菜单配置文件

const {Menu, BrowserWindow} = require("electron")
let template = [
    {
        label: '优秀动漫',
        submenu: [
            {
                label: '小仓桑和小仓酱',
                accelerator: 'ctrl+n',
                click: () => {
                    let win = new BrowserWindow({
                        width: 500,
                        height: 500,
                        webPreferences: {nodeIntegration: true}
                    })
                    win.loadFile("./index.html")
                    win.on('close', () => {
                        win = null
                    })
                }
            },
            {
                label: '二二三三',
                click: () => {

                }
            }
        ]
    },
    {
        label: '优秀短片',
        submenu: [
            {label: '优秀短片1'},
            {label: '优秀短片2'}
        ]
    }
]
// 编译菜单
let m = Menu.buildFromTemplate(template);
// 设置菜单
Menu.setApplicationMenu(m);

第二步：引入到main.js文件上

var electron = require('electron')

var app = electron.app // 引用app
var BrowserWindow = electron.BrowserWindow // 控制窗口引用

var mainWindow = null // 声明要打开的主窗口

app.on('ready', () => {
    mainWindow = new BrowserWindow(
        {
            width: 800,
            height: 800,
            webPreferences: {
                nodeIntegration: true,
                contextIsolation: false,
            }
        }
    ) // 窗口的高度宽度
    require('./main/menu')
    mainWindow.loadFile('index.html') // 引入需要加载的页面
    mainWindow.on('close', () => {
        mainWindow = null
    })
})