Electron教程（六）应用菜单设置例子

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)
}

效果如下：