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 .之后，就可以看到效果了：

以上关于05. Electron创建菜单和事件绑定的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。