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. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 05. Electron创建菜单和事件绑定

发表评论

提供最优质的资源集合

立即查看 了解详情