electron中文菜单栏（为Electron项目添加一个自定义的）
electron中文菜单栏（为Electron项目添加一个自定义的）const template = [ { role: 'help' submenu: [ { label: 'About Editor Component' click() { shell.openExternal('https://simplemde.com/'); } } ] } ]; 请注意，JSON 模板的根对象必须是数组，因为我们使用多个顶级菜单项定义了整个应用程序菜单。// 在menu.js 中 **导入** Menu 和 shell 对象 const { Menu
翻译自《Electron_Projects》 Creating a custom menu item
上篇，学习了《Electron整合应用程序菜单简介》，这篇继续：
我们看下当前默认的Help帮助菜单项：
与其他菜单项一样，如果您不提供自定义应用程序菜单模板，Electron shell 会在运行时为您执行此操作。 让我们改变它并提供一个简单的About关于菜单项，点击它将打开我们的应用程序用到的的 SimpleMDE 编辑器组件的主页：
首先，在项目的根文件夹中创建一个名为menu.js的新文件。
将菜单放在单独的文件中是一种很好的做法，这样每次您的应用程序需要更改或改进时，您都可以快速找到菜单项。
在这里，您需要从 Electron 框架导入 Menu 和 shell 对象。 Menu 对象提供了一个 API，我们可以使用它从JSON模板构建应用程序菜单。 shell 对象将帮助我们使用可用于导航的 URL 地址调用浏览器窗口：
// 在menu.js 中 **导入** Menu 和 shell 对象
const { Menu shell } = require('electron');
接下来，我们需要一个 JSON 格式的应用程序菜单模板格式。 将以下代码附加到 menu.js 文件的末尾，使其包含一个简单的菜单模板：
const template = [
{
role: 'help'
submenu: [
{
label: 'About Editor Component'
click() {
shell.openExternal('https://simplemde.com/');
}
}
]
}
];
请注意，JSON 模板的根对象必须是数组，因为我们使用多个顶级菜单项定义了整个应用程序菜单。
如您所见，有一个对象的 role 属性设置为 help。 这定义了一个名为help的顶级菜单项。 我们将在一分钟内关注role的含义，所以现在就按原样处理。 之后，我们创建一个子菜单数组来保存子菜单项，并声明一个带有点击触发的About Editor Component子菜单，会调用外部浏览器打开我们指定的官网。
这是一个最小的模板，只是为了向您展示如何组装自定义应用程序菜单。 要将我们的第一个模板编译成一个真正的菜单，我们需要调用 Menu.build From Template 函数，它将我们的 JSON 内容转换为一个 Electron Menu 对象：
const menu = Menu.buildFromTemplate(template);
module.exports = menu;
注：加下menu.js文件的最后
现在 menu.js的全部内容如下：
const { Menu shell } = require('electron');
const template = [
{
role: 'help'
submenu: [
{
label: 'About Editor Component'
click() {
shell.openExternal('https://simplemde.com/');
}
}
]
}
];
const menu = Menu.buildFromTemplate(template);
module.exports = menu;
我们构建了一个新的菜单实例，并通过module.exports 调用将其导出。 Module exporting 是一个 Node.js 特性，它允许我们将菜单实例导入到其他文件中。 在我们的例子中，我们需要从 menu.js 文件中导出菜单并将其导入 index.js，这是我们程序的核心部分所在。
切换到 index.js 文件并更新其内容，现在index.js的内容如下：
const { app BrowserWindow Menu } = require('electron');
const menu = require('./menu');
let window;
app.on('ready' () => {
window = new BrowserWindow({
width: 800
height: 600
webPreferences: {
nodeIntegration: true
}
});
window.loadFile('index.html');
});
Menu.setApplicationMenu(menu);
您应该熟悉大多数文件。 我们从之前创建的 menu.js 文件中导入菜单对象。 然后，我们构建主应用程序窗口并将 index.html 文件加载到其中。 最后，我们根据我们的自定义模板设置一个新的应用程序菜单：
现在，请保存更改并用npm start启动应用程序。 鉴于我们刚刚重新定义了整个应用程序菜单，您应该只看到两个菜单项：Electron和Help。 Electron菜单是你在 macOS 上运行时就有的，而Help 菜单是我们之前在代码中定义的。
单击“Help”菜单并确保您可以看到“About Editor Component”条目。 如果您单击“About Editor Component”菜单条目，您的系统浏览器应该打开并加载 我们所定义的编辑器官网。
现在您可以创建菜单项，下一篇，我们再学习不同的菜单项角色。
