从Electron应用程序中删除菜单栏


105

如何从电子应用程序中删除此菜单栏:

菜单栏

它还说“ Hello World”(这是因为我下载了预先构建的电子,并且在打包应用程序后会消失吗?)。我没有将这些代码编码到html中,所以我不知道如何将其发布!

Answers:


150

您可以在窗口上使用w.setMenu(null)或设置frame: false(这也会删除用于关闭,最小化和最大化选项的按钮)。请参见setMenu()BrowserWindow()。还要检查这个线程


Electron现在win.removeMenu()在v5.0.0中添加了)可以删除应用程序菜单,而不是使用win.setMenu(null)


Electron 7.1.x似乎有一个win.removeMenu()无法正常工作的错误。唯一的解决方法是使用Menu.setApplicationMenu(null)


4
frame: false为我做了。
mwilson

5
fwiw removeMenu()仅适用于Linux和Windows
春天

在已经打开的具有菜单的窗口中,由window.open()打开的窗口怎么办?
迈克尔

4
电子7.1.1有一个问题,setMenu并且removeMenu不工作了链接
P·弗斯特

1
原始解决方案或编辑解决方案均无效。这不再是答案。
Tyguy19年

65

用这个:

mainWindow = new BrowserWindow({width: 640, height: 360})
mainWindow.setMenuBarVisibility(false)

参考:https : //github.com/electron/electron/issues/1415

我尝试过mainWindow.setMenu(null),但是没有用。


2
我尝试mainWindow.setMenu(null)使用电子5.0.2,它也无法正常工作。不知道为什么我建议不要在任何地方使用它,如果我是唯一做错事情的人,那我肯定还在徘徊。您的使用建议setMenuBarVisibility尽管会删除菜单栏的可见性,但不会完全删除它。可以通过按键将其恢复Alt
Artium

1
FWIW:随着选举对6.0.x既不.setMenu(null).removeMenu()为我工作。.setMenuBarVisibility(false)删除菜单栏,该Alt键仅在.setAutoHideMenuBar(true)运行时有效。
鲍勃·纳德勒

1
在Arch Linux中,+ 1 setMenu(null)无效,但setMenuBarVisibility(false)按预期方式工作(不能通过alt@Artium所提到的键来调出该栏)。
阿米尔·沙巴尼

这是对我有用的解决方案。标记为正确的答案在Ubuntu 18.04,Electron v6.0.9
Christoffer

大!我需要一种简单的方法来包括键盘快捷键而不显示菜单栏。万分感谢!
Anis R.

27

对于Electron 7.1.1,可以使用以下命令:

const {app, BrowserWindow, Menu} = require('electron')
Menu.setApplicationMenu(false)

6
更新对我的编辑:Menu.setApplicationMenu(null)7.1.2其他解决方案中不起作用!
TessavWalstijn

1
它也适用于7.1.4。请更新正确的答案,以确保每个有此问题的人都能找到解决方案。
Emilio Numazaki,

在电子7.1.6对我的作品
Iuninefrendor

1
@OP-欢迎使用Stack Overflow,感谢您的出色回答!一个注意事项-从其他程序(例如MS Word)复制和粘贴引号时请小心。在大多数情况下,像“电子”这样的带格式引号与像“电子”这样的无格式引号是不同的。
sfarbota

1
在我的电子版7.19中对我有效:绝对应该将其更新为正确答案
Darkrender

9

打包应用程序时,默认菜单将不再存在,如果这在开发过程中困扰着您,则可以setMenu(null)按照@TonyVincent的建议在浏览器窗口上调用。


感谢您提到打包应用程序将删除默认菜单。我想知道这一点。
raddevus

9

从7.0.0开始,大多数上述解决方案不再起作用。 BrowserWindow.setMenu()已由替换Menu.setApplicationMenu(),现在可以更改所有窗口上的菜单。setMenu()removeMenu()不再执行任何操作,而在文档中仍然提到了这一点。

setAutoHideMenuBar()仍然可以使用,但是如果您打算将Alt用作热键修饰符,可能会很麻烦。菜单可见后,您必须单击远离窗口的位置(松散焦点)以再次隐藏菜单。

如果您的应用程序有多个窗口,则不能在每个窗口上分别设置/删除菜单。删除菜单的唯一方法是使用无框架窗口方法。那恰好是我当前应用程序中想要的,但是在所有情况下都不是一个好的解决方案。


谢谢,这是从7.0开始唯一起作用的东西!在docs / changelogs / etc中是否有提及?
rvighne

github项目链接中存在一个未解决的问题。不知道这是计划中的弃用还是错误。
P Fuster

9

菜单可以隐藏自动隐藏(例如在SlackVS Code中 -您可以按Alt来显示/隐藏菜单)。

相关方法:

---- win.setMenu(menu) -将菜单设置为窗口的菜单栏,将其设置为null将删除菜单栏。(这将完全删除菜单

mainWindow.setMenu(null)


---- win.setAutoHideMenuBar(hide) -设置窗口菜单栏是否应自动隐藏。一旦设置菜单栏将只
显示
当用户按下Alt键

mainWindow.setAutoHideMenuBar(true)

资料来源:https : //github.com/Automattic/simplenote-electron/issues/293

还有一种制作无框窗口的方法,如下所示:

(没有关闭按钮,没有任何内容。可以是我们想要的(更好的设计))

const { BrowserWindow } = require('electron')
let win = new BrowserWindow({ width: 800, height: 600, frame: false })
win.show()

https://electronjs.org/docs/api/browser-window#winremovemenu-linux-windows

doc:https//electronjs.org/docs/api/frameless-window

编辑:(新)

win.removeMenu() Linux Windows删除窗口的菜单栏。

https://electronjs.org/docs/api/browser-window#winremovemenu-linux-windows

添加了win.removeMenu()来删除应用程序菜单,而不是使用win.setMenu(null)

从v5按照以下方式添加:

https://github.com/electron/electron/pull/16570

https://github.com/electron/electron/pull/16657

电子v7错误

对于Electron 7.1.1,请使用Menu.setApplicationMenu代替win.removeMenu()

按照这个线程:https
//github.com/electron/electron/issues/16521

最重要的是:必须在创建BrowserWindow之前调用它!否则将无法正常工作!

const {app, BrowserWindow, Menu} = require('electron')

Menu.setApplicationMenu(null);

const browserWindow = new BrowserWindow({/*...*/});

更新(在BrowserWindow构造上设置autoHideMenuBar)

如通过@kcpr评论!我们可以在构造函数上设置属性和许多

到目前为止,最新的电子稳定版本为8.3!
但是在旧版本中,我也检查v1,v2,v3,v4!
它有所有版本!

按照此链接
https://github.com/electron/electron/blob/1-3-x/docs/api/browser-window.md

对于v8.3
https://github.com/electron/electron/blob/v8.3.0/docs/api/browser-window.md#new-browserwindowoptions

doc链接
https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions

从文档中获取选项:

autoHideMenuBar布尔值(可选)-除非按下Alt键,否则自动隐藏菜单栏。默认为false。

这里是一个片段来说明它:


let browserWindow = new BrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true // <<< here
})

1
setAutoHideMenuBar已弃用
SirCode先生

以下Edmar的答案是更好的版本,自动隐藏菜单的最新代码
SirCode先生,19年

1
在Electron 8.2.5中(我怀疑在以前的版本中也是如此),可以定义菜单栏应该在BrowserWindow构造函数中自动隐藏,如下所示:new BrowserWindow({autoHideMenuBar: true})。另外,谢谢您的回答。在我看来,这可能是最完整的一种方法(假设这些方法仍然存在并且不被弃用)。
kcpr

@kcpr谢谢您的回答!我更新了答案以反映这一点!
Mohamed Allal

@MohamedAllal,太棒了!谢谢,我很高兴您认为我的评论很有用。还要感谢您所做的额外研究和分享的结果。
kcpr

6
@"electron": "^7.1.1" : 

mainWindow = new browserWindow({ height: 500, width: 800});
//mainWindow.setAutoHideMenuBar(true);
mainWindow.autoHideMenuBar = true;

在浏览器中没有菜单的情况下可以正常工作。


(电子)“ setAutoHideMenuBar函数”已弃用,将被删除。请改为使用“ autoHideMenuBar属性”。@“ electron”:“ ^ 7.1.1”:mainWindow = new browserWindow({height:500,width:800}); mainWindow.autoHideMenuBar = true;
Rachuri


3

按照此问题的答案,您必须Menu.setApplicationMenu(null) 创建窗口之前致电


嘿,欢迎来到Stack Overflow!指向其他答案的链接更适合作为注释而不是答案。这是因为您实际上并未将链接问题中的答案应用于该用户的特定情况。
大卫·肖邦


0

这些解决方案有错误。当使用下面的解决方案时,Windows会延迟关闭。

Menu.setApplicationMenu(null),
&&
const updateErrorWindow = new BrowserWindow({autoHideMenuBar: true});

我在下面使用了解决方案。现在比较好。

const window= new BrowserWindow({...});
window.setMenuBarVisibility(false);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.