使用Web前端技术开发桌面应用---Electron 创建菜单和基本使用

news/2024/7/19 14:07:20 标签: js, 前端, electron

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。

在这里插入图片描述

每一个桌面应用都会有一个窗口，这个视频就学习一下在Electron中使用Menu来完成菜单的创建。话不多说，直接动手操作。

编写菜单模板

在Electron中编写菜单，需要先建立一个模板，这个目标很类似我们JSON或者类的数组。

我们打开项目，在项目的根目录下新建一个文件夹menu，然后新建一个menu.js文件,然后编写如下代码。

const { Menu } = require('electron')

var template = [
    {
        label:'菜单A',
        submenu:[
            {label:'A子菜单1'},
            {label:'A子菜单2'}
        ]

    },
    {
        label:'菜单B',
        submenu:[
            {label:'B子菜单1'},
            {label:'B子菜单2'}
        ]
    }
]

var m = Menu.buildFromTemplate(template)

Menu.setApplicationMenu(m)

然后再打开主进程main.js文件，在ready生命周期中，直接加入下面的代码，就可以实现自定义菜单了。

require('./main/menu.js')

需要注意的是，Menu属于是主线程下的模块，所以只能在主线程中使用，这个要记清楚。

使用菜单打开新窗口

有了菜单之后，可以在菜单中加入click事件，代码如下:

const {Menu, BrowserWindow} = require('electron');

var template = [
    {
        label:'菜单A',
        submenu:[
            {
                label:'A子菜单1',
                click:() => {
                    var win = new BrowserWindow({
                        width:500,
                        height:500,
                        webPreferences:{
                            nodeIntegration:true
                        }
                    })
                    win.loadFile('remotePage.html')

                    win.on('closed',() => {
                        win = null;
                    })
                }
            },
            {label:'A子菜单2'}
        ]
    },
    {
        label:'菜单B',
        submenu:[
            {label:'B子菜单1'},
            {label:'B子菜单2'}
        ]
    }
];

var m = Menu.buildFromTemplate(template);

Menu.setApplicationMenu(m);