Electron教程(六)应用菜单设置例子
Electron教程(一)什么是 Electron,由来、适用场景 和 Electron 的环境搭建
Electron教程(二)启动过程:主进程,渲染进程是什么
Electron教程(三)如何打包 electron 程序:electron-forge 的使用教程
Electron教程(四)使用 Vue Browser 版,创建小工具应用
Electron教程(五)读取本地文件内容, ipcMain ipcRenderer 之间的交互
Electron教程(六)应用菜单设置例子
Electron教程(七)结语
官方文档说明: https://www.electronjs.org/docs/latest/api/menu
这里放一个我写的一个项目的菜单例子,用作参考
app.on('ready', ()=>{
createMainWindow() // 执行创建主窗口的一些动作
createMenu() // 创建菜单
})
// 创建 menu
function createMenu() {
let menuStructure = [
{
label: '配置',
submenu: [
{
label: '配置',
click() {
createConfigWindow()
}
},
{
label: '刷新', // 刷新页面
click() {
refreshWindows()
}
},
{
label: '打开调试窗口',
click(menuItem, targetWindow) {
targetWindow.openDevTools()
}
},
{
label: '关闭调试窗口',
click(menuItem, targetWindow) {
targetWindow.closeDevTools()
}
},
]
},
{
label: '编辑',
role: 'editMenu'
},
{
label: '文件夹',
submenu: [
{label: '打开 Rime 配置文件夹', click() {shell.openPath(getRimeConfigDir())}},
{label: '打开 Rime 程序文件夹', click() {shell.openPath(getRimeExecDir())}},
{
label: '打开工具配置文件夹', click() {
let configDir = path.join(os.homedir(), CONFIG_FILE_PATH)
shell.openPath(configDir)
}
},
]
},
{
label: '码表处理工具',
submenu: [
{
label: '码表处理工具',
click() {
showToolWindow()
}
},
]
},
{
label: '关于',
submenu: [
{label: '最小化', role: 'minimize'},
{label: '关于', role: 'about'},
{type: 'separator'},
{label: '退出', role: 'quit'},
]
},
]
let menu = Menu.buildFromTemplate(menuStructure)
Menu.setApplicationMenu(menu)
}
效果如下: