electron自定义边框_如何在Electron JS应用程序中添加或自定义菜单？

electron自定义边框

Electron JS本机菜单API (Electron JS Native Menu API)

An application menu is common in most native desktop applications, just like the example below;

就像下面的示例一样，应用程序菜单在大多数本机桌面应用程序中很常见。

There are several ways to approach this task, but I will use just one method in this article.

有几种方法可以完成此任务，但是在本文中我将仅使用一种方法。

• Open your main JavaScript file and type the code below,

  打开您的主要JavaScript文件，然后输入以下代码，

  //menu//
  
  const electron = require ('electron')
  
  const app = electron.app // electron module
  const BrowserWindow = electron.BrowserWindow //enables UI
  const Menu = electron.Menu // menu module
  
  app.on('ready', _ => {
      new BrowserWindow()
  
      const template = [
          {
              label: 'Help',
          },
          {
              label: 'File',
          },
          {
              label: 'Edit',
          },
          {
              label: 'View',
          },
          {
              label: 'Run',
          }
      ]
      const menu = Menu.buildFromTemplate (template)
      Menu.setApplicationMenu (menu)
  })
  
  

• From the code above, we simply started by calling the electron module it's self as usual,

  从上面的代码开始，我们只是像往常一样将电子模块称为自身，

• Creating a new browser window or "desktop window" and also calling the menu module required to build or customize an app menu.

  创建新的浏览器窗口或“桌面窗口”，并调用构建或自定义应用程序菜单所需的菜单模块。

• In this tutorial, we will use menu.buildFromTemplate to build the application's menu.

  在本教程中，我们将使用menu.buildFromTemplate来构建应用程序的菜单。

• As you can see, menu.buildFromTemplate accepts an array which includes the menu items in a kind of JSON format.

  如您所见， menu.buildFromTemplate接受一个数组，该数组包含一种JSON格式的菜单项。

• Finally, "menu.buildFromTemplate" which was assigned to a variable is passed as the menu parameter to "menu.setApplicationMenu".

  最后，将分配给变量的“ menu.buildFromTemplate”作为菜单参数传递给“ menu.setApplicationMenu”。

• Run your code and enjoy your output.

  运行您的代码并享受您的输出。

• Options related to the menu can be found in their official documentation.

  与菜单相关的选项可在其官方文档中找到。

Output:

输出：

翻译自: https://www.includehelp.com/electron-js/add-or-customize-menus-in-an-electron-js-application.aspx

electron自定义边框