05. Electron创建菜单和事件绑定

本文将学习一下在Electron中使用Menu来完成菜单的创建。

编写菜单模板

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

在项目的根目录下新建一个文件夹main，以后主进程中用到的代码我们都写到这里。

然后新建一个menu.js文件，然后编写如下代码：

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

var template = [
    {
        label: '乐库',
        submenu: [
            {label:'儿童大全'},
            {label:'抖音热歌'},
            {label:'车载音乐'},
            {label:'网红歌曲'}
        ]
    },
    {
        label: '电台',
        submenu: [
            {label:'主题'},
            {label:'场景'},
            {label:'心情'}
        ]
    }
]

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: '乐库',
        submenu: [
            {
                label:'儿童大全',
                click:() => {
                    var win = new BrowserWindow({
                        width:500,
                        height:500,
                        webPreferences: {
                            nodeIntegration: true
                        }
                    });
                    win.loadFile('children.html');
                    win.on('closed', ()=>{
                        win = null
                    })
                }
            },
            {label:'抖音热歌'},
            {label:'车载音乐'},
            {label:'网红歌曲'}
        ]
    },
    {
        label: '电台',
        submenu: [
            {label:'主题'},
            {label:'场景'},
            {label:'心情'}
        ]
    }
]

var m = Menu.buildFromTemplate(template);// 加载模板

Menu.setApplicationMenu(m);// 设置窗口的菜单

部分代码代表意思：

label : 菜单名字
submenu： 子菜单项
click: 点击事触发
type: 'separator' 分隔条

更多信息参考官方文档MenuItem,Menu.

然后调用Menu.buildFromTemplate()加载模板，Menu.setApplicationMenu()去设置窗口的菜单。

当然为了更好看一点，我们还可以为菜单加上分隔条：

{ type: 'separator' }

meun.js 完整代码如下：

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

var template = [
    {
        label: '乐库',
        submenu: [
            {
                label:'儿童大全',
                click:() => {
                    var win = new BrowserWindow({
                        width:500,
                        height:500,
                        webPreferences: {
                            nodeIntegration: true
                        }
                    });
                    win.loadFile('children.html');
                    win.on('closed', ()=>{
                        win = null
                    })
                }
            },
            {
                type: 'separator' 
            },
            {label:'抖音热歌'},
            {label:'车载音乐'},
            {label:'网红歌曲'}
        ]
    },
    {
        label: '电台',
        submenu: [
            {label:'主题'},
            {label:'场景'},
            {label:'心情'}
        ]
    }
]

var m = Menu.buildFromTemplate(template);// 加载模板

Menu.setApplicationMenu(m);// 设置窗口的菜单

这时候我们打开终端输入electron .之后，就可以看到效果了：