【问题标题】:Remove menubar from Electron app从 Electron 应用程序中删除菜单栏
【发布时间】:2016-12-29 17:43:44
【问题描述】:

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

它还说“Hello World”(这是因为我下载了预先构建的电子,并且一旦我打包应用程序就会消失吗?)。我没有把这些编码到html中,所以我不知道如何把它弄出来!-

【问题讨论】:

    标签: node.js electron


    【解决方案1】:

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


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


    Electron 7.1.x 似乎有一个错误,win.removeMenu() 不起作用。唯一的解决方法是使用Menu.setApplicationMenu(null),但是,这将禁用所有菜单快捷方式,如用于切换全屏等的 F11


    在新版本的 Electron 中,您可以在创建 browserWindow 时设置autoHideMenuBar: true,按 Alt 将再次显示菜单栏。

    const mainWindow = new BrowserWindow({
      autoHideMenuBar: true,
    })
    

    【讨论】:

    • fwiw removeMenu() 仅适用于 Linux 和 Windows
    • 在一个已经打开的有菜单的窗口中由 window.open() 打开的窗口怎么办?
    • Electron 7.1.1 的问题是 setMenuremoveMenu 不再工作 link
    • 原始解决方案或编辑解决方案都不起作用。这应该不再是答案。
    【解决方案2】:

    使用这个:

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

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

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

    【讨论】:

    • 我用电子 5.0.2 尝试了mainWindow.setMenu(null),但它对我来说也不起作用。不知道为什么我看到建议在任何地方使用它,如果我是唯一一个做错事的人,我就会徘徊。您使用 setMenuBarVisibility 的建议,虽然删除了菜单栏的可见性,但并没有完全删除它。可以通过按Alt 键将其恢复。
    • FWIW:在选举 6.0.X 中,.setMenu(null).removeMenu() 都不适合我。 .setMenuBarVisibility(false) 删除菜单栏,Alt 键仅在运行 .setAutoHideMenuBar(true) 时有效。
    • +1,在 Arch Linux 中,setMenu(null) 不起作用,但 setMenuBarVisibility(false) 可以按预期工作(按 alt 可以将栏 无法恢复@Artium 提到的键)。
    • 这是对我有用的解决方案。标记为正确的答案不适用于 Ubuntu 18.04、Electron v6.0.9
    • 这是最好的答案,因为隐藏菜单中的键盘快捷键仍然有效。因此,您可以使用带有加速器的默认 macOS 菜单和所有内容,并且它们可以在没有丑陋的 Windows 菜单的情况下在 Windows 上运行。
    【解决方案3】:

    对于 Electron 7.1.1,你可以使用这个:

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

    【讨论】:

    • 为我更新编辑:Menu.setApplicationMenu(null)7.1.2 工作过其他解决方案对我不起作用!
    • 它也适用于 7.1.4。请更新正确答案,以确保遇到此问题的每个人都能找到解决方案。
    • 在电子 7.1.6 中为我工作
    • 在电子 7.19 中为我工作这绝对应该更新为正确答案
    • 这个答案适用于 Electron v10.1.1。谢谢:)
    【解决方案4】:

    菜单可以隐藏自动隐藏(如 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

    文档: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 评论!我们可以在构造函数上设置属性和许多

    目前最新的稳定版 Electron 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

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

    来自该选项的文档:

    autoHideMenuBar Boolean(可选)- 自动隐藏菜单栏,除非按下 Alt 键。默认为假。

    这里有一个 sn-p 来说明它:

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

    【讨论】:

    • setAutoHideMenuBar 已弃用
    • 下面 Edmar 的回答是更好的版本,自动隐藏菜单的最新代码
    • 在 Electron 8.2.5 中(我怀疑在以前的版本中也是如此)可以定义菜单栏应该在 BrowserWindow 构造函数中自动隐藏,如下所示:new BrowserWindow({autoHideMenuBar: true})。顺便说一句,谢谢你的回答。在我看来,这可能是最完整的一个(假设这些方法仍然存在并且没有被弃用)。
    • @kcpr 谢谢你的回答!我更新了答案以反映这一点!
    【解决方案5】:

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

    【讨论】:

      【解决方案6】:

      从 7.0.0 开始,上述大多数解决方案不再有效。 BrowserWindow.setMenu() 已被 Menu.setApplicationMenu() 取代,现在它会更改所有窗口上的菜单。 setMenu()removeMenu() 不再做任何事情,顺便说一下,文档中仍然提到。

      setAutoHideMenuBar() 仍然有效,但如果您打算使用 Alt 作为热键修饰符,可能会很麻烦。一旦菜单可见,您必须单击离开窗口(失去焦点)以再次隐藏菜单。

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

      【讨论】:

      • 谢谢,这是自 7.0 以来唯一有效的方法! docs/changelogs/etc 中有没有提到这一点?
      • github 项目link 中存在一个问题。不知道是计划中的弃用还是错误。
      【解决方案7】:
      @"electron": "^7.1.1" : 
      
      mainWindow = new browserWindow({ height: 500, width: 800});
      //mainWindow.setAutoHideMenuBar(true);
      mainWindow.autoHideMenuBar = true;
      

      在浏览器中没有菜单的情况下按预期工作。

      【讨论】:

      • (electron) 'setAutoHideMenuBar function' 已弃用并将被删除。请改用“autoHideMenuBar 属性”。 @"electron": "^7.1.1" : mainWindow = new browserWindow({ height: 500, width: 800}); mainWindow.autoHideMenuBar = true;
      【解决方案8】:

      在创建 browserWindow 时将 autoHideMenuBar 设置为 true

      mainWindow = new BrowserWindow({
          autoHideMenuBar: true,
          width: 1200,
          height: 800
      })
      

      【讨论】:

        【解决方案9】:

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

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

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

        const window= new BrowserWindow({...});
        window.setMenuBarVisibility(false);
        
        

        【讨论】:

          【解决方案10】:

          电子12.0.6

              let mainWindow = new BrowserWindow({
                  autoHideMenuBar: true
              });
          

          【讨论】:

            【解决方案11】:

            根据this issue 的回答,您必须在创建窗口之前调用Menu.setApplicationMenu(null)

            【讨论】:

            • 嗨,欢迎来到 Stack Overflow!指向其他答案的链接更适合作为 cmets,而不是答案。这是因为您实际上并未将链接问题中的答案应用于此用户的特定场景。
            【解决方案12】:

            在 main.js 的这一行之前:

            mainWindow = new BrowserWindow({width: 800, height: 900})
            
            mainWindow.setMenu(null) //this will r menu bar
            

            【讨论】:

              【解决方案13】:

              2020 年更新,唯一对我有用的东西:

              Menu.setApplicationMenu(new Menu());
              

              【讨论】:

              • 这是截至 2020 年 12 月 2 日唯一有效的答案
              【解决方案14】:

              根据官方文档@https://github.com/electron/electron/blob/v8.0.0-beta.1/docs/api/menu.md,从 7.1.2 开始执行此操作的正确方法是:

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

              【讨论】:

                【解决方案15】:

                setMenu(null); 是最佳答案,autohidemenu 将显示在应用程序的开头

                
                    function createWindow(){
                        const win = new BrowserWindow({
                            width: 1500,
                            height: 800,
                            webPreferences:{
                                nodeIntergration: true
                            }
                        });
                        win.setMenu(null);
                    win.loadFile("index.html");
                    }
                    app.whenReady().then(createWindow);
                

                【讨论】:

                  【解决方案16】:

                  这里的大多数答案对较新的版本无效。对于 9.0 或更高版本,Menu.setApplicationMenu(null); 应该可以工作。顺便说一下,从电子包导出的Menuconst {Menu} = require('electron');

                  【讨论】:

                    猜你喜欢
                    • 1970-01-01
                    • 2020-03-01
                    • 2015-12-14
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 2021-05-12
                    • 1970-01-01
                    相关资源
                    最近更新 更多