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;

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

Electron JS | add or customize menus (1)

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.
与菜单相关的选项可在其官方文档中找到。