electron写桌面程序（Electron跨平台桌面应用开发）
electron写桌面程序（Electron跨平台桌面应用开发）八 引入前端框架Vue.js 3七 自定义窗口四 系统托盘功能五 主进程和渲染进程中的通知和通信六 详细讲解主进程和渲染进程
本系列是Electron框架跨平台应用开发的入门教程：
一 第一个Electron应用
二 自定义菜单
三 自定义应用图标和窗口置顶
四 系统托盘功能
五 主进程和渲染进程中的通知和通信
六 详细讲解主进程和渲染进程
七 自定义窗口
八 引入前端框架Vue.js 3
本章目标本章的目标是给之前的应用程序添加自定义菜单。
在第一章中运行的应用程序中可以看到，我们的应用程序已经带有一个菜单。
现在我们就来自定义一个菜单。
一、添加自定义应用程序菜单1.创建 menu.js 文件将菜单放在一个单独的文件中，这将总是一个好的实践，这样的话在每次你的应用程序需要修改时，你能很快找到菜单。
这里，你需要从Electron框架中引入Menu和shell对象。Menu对象提供了一个API，通过它我们能从一个JSON模板创建一个应用程序菜单，然后shell对象将帮助我们激活一个窗口并跳转至指定的URL。
menu.js的完整代码如下：
const { Menu dialog } = require('electron');
const template = [
{
label: '帮助'
role: 'help'
submenu: [
{
label: '关于electronapp'
click() {
dialog.showMessageBox({
message: '这是一个Electron应用！'
type: 'info'
title: 'electron应用'
});
}
}
]
}
];
const menu = Menu.buildFromTemplate(template);
module.exports = menu;
这里我们定义了一个名为“帮助”的顶级菜单，它的role属性是help。然后，我们又创建了一个子菜单数组去包含子菜单项，此子菜单项声明了一个“关于”菜单并响应了一个点击事件去激活一个外部窗口。最后我们调用Menu.buildFromTemplate方法将JSON模板转变为一个Electron菜单对象，还创建了一个新的菜单实例，并通过module.exports调用将它导出。
2.修改 main.js
代码如下：
const { app BrowserWindow Menu } = require('electron')
const menu = require('./menu');
function createWindow () {
const win = new BrowserWindow({
width: 800
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate' () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed' () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
Menu.setApplicationMenu(menu);3. 启动应用
npm start
点击“关于…”子菜单看看会发生什么。
至此，我们的自定义菜单已经添加成功了。
到目前为止，我们只是用最小的模板来演示如何添加应用程序菜单。但在实际我们用过的应用程序中，菜单不会这么简单，那接下来我们就来扩充这个菜单。
二、扩充菜单1.修改 menu.jsconst { Menu dialog } = require('electron');
const template = [
// 文件菜单
{
label: '文件'
submenu: [
{
label: '退出'
role: 'close'
}
]
}
// 编辑菜单
{
label: '编辑'
submenu: [
{ label: '撤销' role: 'undo' }
{ label: '重做' role: 'redo' }
{ type: 'separator' }
{ label: '剪切' role: 'cut' }
{ label: '复制' role: 'copy' }
{ label: '粘贴' role: 'paste' }
{ label: '删除' role: 'delete' }
{ type: 'separator' }
{ label: '全选' role: 'selectAll' }
]
}
// 查看菜单
{
label: '查看'
submenu: [
{
label: '开发者工具'
role: 'toggleDevTools'
}
{
type: 'separator'
}
{
label: '全屏'
role: 'togglefullscreen'
}
]
}
// 帮助菜单
{
label: '帮助'
role: 'help'
submenu: [
{
label: '关于electronapp'
click() {
dialog.showMessageBox({
message: '这是一个Electron应用！'
type: 'info'
title: 'electron应用'
});
}
}
]
}
];
const menu = Menu.buildFromTemplate(template);
module.exports = menu;2. 启动应用
现在我们就来启动应用看看效果
npm start
至此，我们的自定义菜单已经添加完成，我们可以点击各个菜单中的子菜单项看看效果，可以看到各子菜单已经具备基本功能和快捷键了，这是Electron中通过菜单项MenuItem中的role属性预定义的，不需要我们写额外的代码。关于role的更详细信息，可以参考Electron官网的 MenuItem(https://www.electronjs.org/zh/docs/latest/api/menu-item)文档。
