Mac系统开发Electron应用时如何隐藏默认的Electron顶部菜单

问题原因 #

macOS 系统规范强制要求顶部菜单栏的第一个选项必须为应用自身的专属菜单，无法单独删除这个位置的菜单。你看到的默认「Electron」菜单就是系统预留的应用菜单，没有正确配置应用名称时就会显示默认的Electron标识。

解决方法 #

你不需要删除这个菜单，只需要替换它的显示名称和内容即可，步骤如下：

1. 配置应用名称
   • 开发阶段：在主进程入口代码的最顶部、app.whenReady() 触发之前，设置应用名称，示例：

     // 必须放在ready事件之前设置才会生效
     app.name = '你想要的应用名称'
     

   • 打包阶段：在打包工具配置中设置产品名，比如用electron-builder的话在package.json中添加配置：

     {
       "build": {
         "productName": "你的应用名称"
       }
     }
     

2. 调整菜单模板代码
   macOS 会自动把第一个菜单的label替换为当前应用名称，你原来代码里写的label: 'Test'不会生效，直接保留submenu配置即可，调整后参考代码：

const { app, Menu } = require('electron')
app.name = 'Test' // 提前设置应用名
const isMac = process.platform === 'darwin'

const mainMenu = Menu.buildFromTemplate(
    [
        ...(isMac ? [{
            // 不需要写label，系统会自动替换为app.name
            submenu: [
                { role: 'about' },
                { type: 'separator' },
                { role: 'services' },
                { type: 'separator' },
                { role: 'hide' },
                { role: 'hideothers' },
                { role: 'unhide' },
                { type: 'separator' },
                { role: 'quit' }
            ]
        }] : []),
        {
            label: 'File',
            submenu: [
                isMac ? { role: 'close' } : { role: 'quit' }
            ]
        },
        // 其他菜单内容
    ]
)

app.whenReady().then(() => {
    Menu.setApplicationMenu(mainMenu)
    // 后续创建窗口逻辑
})

可选极端方案（不推荐） #

如果你确实不需要整个顶部菜单栏，可以在创建BrowserWindow时配置隐藏菜单栏：

const mainWindow = new BrowserWindow({
  autoHideMenuBar: true, // 鼠标移到顶部才会显示，或者直接设为false完全隐藏
  // 其他窗口配置
})

这个方案会隐藏所有菜单，不符合Mac用户的使用习惯，非特殊场景不建议使用。

内容的提问来源于stack exchange，提问作者sunjiayang