electron添加系统顶部菜单定义菜单事件

Z时代
2024-01-10
分类：技术分享

对于一般的入门级electron程序来说，大多数人应该不会设置顶部菜单。而且很多人会希望把顶部菜单设置为空，如果您希望设置顶部菜单为空的话，可以参考底部相关链接。在本文中，苏南大叔将要讲述应用程序菜单的基本设置姿势。

本文测试环境：mac/electron-quick-start。本文的主要切入点，就是：以"最简单的方式添加菜单"入手讲述。

设置木有任何菜单

官方提供的设置菜单为空的代码是这样的：

// const {Menu} = require('electron')
function createWindow () {
Menu.setApplicationMenu(null)
//...}

对于开发版的mac，设置为null后，菜单会显示默认菜单。但是打包之后，就没有相关的默认菜单了。您也许需要下面的代码：

app.on('ready', () => {
Menu.setApplicationMenu(Menu.buildFromTemplate([]))})

添加最简单的菜单

这里就显示用最简单方法添加菜单的方式。

const { Menu,dialog} = require('electron')
app.on('ready', () => {
let template = [{
label: '测试菜单',
submenu: [{
label: '菜单role',
accelerator: 'CmdOrCtrl+1',
role: 'selectall'
}, {
type: 'separator'
}, {
label: '菜单click',
accelerator: 'CmdOrCtrl+2',
click: (item, focusedWindow) => {
dialog.showMessageBox({
title: "帮助",//信息提示框标题
message: "alert",//信息提示框内容
buttons: ["ok"],//下方显示的按钮
noLink:true, //win下的样式
type: "info",//图标类型
}, function (index) {
console.log(index);
});
}
}]
}];
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)})