• 【Electron】vue+electron应用设置菜单


    一、前言

    本文主要介绍electron应用如何自定义菜单,以及在哪些地方可以使用Menu模块。一般情况menu只是设置给mac系统的,因为windows系统在应用做了无边框之后,是不会显示应用菜单的(这里Linux暂时不考虑)。点击查看Menu详情

    二、适用场景及实施

    1.应用内菜单自定义

    这个菜单是指的这里

    这里主要用到Menu的两个Api,分别是Menu.buildFromTemplate(template)Menu.setApplicationMenu(menu)

    这里我们这样实现, 首先创建一个ElectronMenu.js文件,用于存放创建菜单。

    // ElectronMenu.js
    import { app, Menu } from 'electron'
    // 设置菜单栏, win表示当前窗口实例
    export function createMenu (win) {// darwin表示macOS,这里我们选择对macOS系统的创建应用内菜单if (process.platform === 'darwin') {const template = [{label: '我的超级应用',submenu: [{ label: '关于', accelerator: 'CmdOrCtrl+I', role: 'about' },// 这里可以自定义菜单项,如下可以与渲染进程通信{ label: '检测更新',click: () => { win.webContents.send('menuCheckUpdate') },accelerator: '这里可以设置快捷键',enabled: false '这里设置是否可点击'},{ type: 'separator' }, // 分割线{ label: '隐藏', role: 'hide' },{ label: '隐藏其他', role: 'hideOthers' },{ type: 'separator' },{ label: '服务', role: 'services' },{ label: '退出', accelerator: 'Command+Q', click: () => {app.quit()} }]},{label: '编辑',submenu: [{ label: '复制', accelerator: 'CmdOrCtrl+C', role: 'copy' },{ label: '粘贴', accelerator: 'CmdOrCtrl+V', role: 'paste' },{ label: '剪切', accelerator: 'CmdOrCtrl+X', role: 'cut' },{ label: '撤销', accelerator: 'CmdOrCtrl+Z', role: 'undo' },{ label: '重做', accelerator: 'Shift+CmdOrCtrl+Z', role: 'redo' },{ label: '全选', accelerator: 'CmdOrCtrl+A', role: 'selectAll' }]},{label: '窗口',role: 'window',submenu: [{label: '缩放',role: 'Zoom'}, {label: '最小化',role: 'minimize'}, {label: '关闭',role: 'close'}]},{label: '帮助',role: 'help',submenu: [{label: '开发者工具',role: 'toggledevtools',accelerator: 'CommandOrControl+alt+i'}]}]const menu = Menu.buildFromTemplate(template)Menu.setApplicationMenu(menu)} else {// windows及linux系统不设置菜单Menu.setApplicationMenu(null)}
    } 
    
    • 1
    • 2
    • 3
    • 4
    • 5

    之后再background.js中引入一下

    import { createMenu } from './ElectronMenu'
    // 设置菜单栏, win是窗口实例
    createMenu(win) 
    
    • 1
    • 2
    • 3

    这样就实现了应用内的菜单设置。

    这里能够查看关于菜单项的详情,例如是否可点击,设置快捷键等。点击查看MenuItem详情

    这里能够查看关于菜单项的role有哪些点击查看role详情

    这里最好给任何一个菜单指定 role去匹配一个标准角色, 而不是尝试在 click 函数中手动实现该行为。 内置的 role 行为将提供最佳的原生体验。

    2.系统托盘添加Menu

    这个菜单指的这里

    这里主要是在设置系统托盘(Tray)的文件中,如下

    import { app, Tray, Menu } from 'electron'
    let tray = new Tray()
    const contextMenu = Menu.buildFromTemplate([{ label: '退出', click: () => { app.quit() } }
    ])
    tray.setContextMenu(contextMenu) 
    
    • 1
    • 2
    • 3
    • 4
    • 5

    3.右键菜单

    // 主进程
    import { Menu, ipcMain } from 'electron';
    const contextMenuTemplate = [{label: '剪切',role: 'cut',},{label: '复制',role: 'copy',},{label: '粘贴',role: 'paste',}
    ];
     
    const contextMenu = Menu.buildFromTemplate(contextMenuTemplate);
     
    // 监听右键事件
    ipcMain.on('contextMenu', (e, arg) => {// 这里可以指定菜单出现的位置contextMenu.popup()
    }) 
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    之后在渲染进程中

    const { ipcRenderer } = require("electron")
    // 监听鼠标右键 
    window.addEventListener("contextmenu", (e) => { e.preventDefault(); ipcRenderer.send('contextMenu', e)
    }); 
    
    • 1
    • 2
    • 3
    • 4

    这里可以不止设置右键菜单的事件,也可以在你渲染进程需要的时候,去唤起系统自带的菜单。毕竟系统自带的role,原生的功能要更加强大,比如说,复制、粘贴等,自己写这个功能可太费劲了-.-!!

    三、后记

    这里我们可以灵活的使用系统的菜单角色,让我们省去很多事情。

    本篇完结! 撒花! 感谢观看! 希望能帮助到你!

    最后,最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。



    有需要的小伙伴,可以点击下方卡片领取,无偿分享

  • 相关阅读:
    睿趣科技:抖音开小店大概多久可以做起来
    利用元胞自动机-人工神经网络模型预测城市未来土地利用
    C# - XMLHelper :一个操作XML的简单类库
    js节流和防抖
    DevOps持续部署的关键要素
    如何让iOS设备上App定时执行后台任务(上)
    1022 D进制的A+B
    C# winform chart 饼状图的使用布局
    笔记:KMP的复习
    MapRecuce框架原理
  • 原文地址:https://blog.csdn.net/pfourfire/article/details/126872604