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

Electron 创建菜单和事件绑定

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 05. Electron创建菜单和事件绑定

发表回复