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'
分隔条
然后调用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创建菜单和事件绑定
码云笔记 » 05. Electron创建菜单和事件绑定