Electron菜单

分类：Electron作者：编程之家用户

原生菜单和上下文菜单

创建原生应用菜单和上下文菜单

进程：主进程

new Menu() 创建新菜单

静态方法

  1. Menu.setApplication(menu)

    设置应用菜单。

  2. Menu.getApplicationMenu()

    获取菜单，返回 Menu | null 。

  3. Menu.sendActionToFirstResponder(action) macOS

    将 action 发送到应用程序的第一个响应方。用于默认的 macOS 菜单行为。

  4. Menu.buildFromTemplate(template)

    设置菜单模板。返回 Menu 。

    template 是一个数组对象，数组中每一项是一个 MenuItem 。

实例方法

  1. menu.popup([options])

    • options Object(optional)
      • window BrowserWindow（可选）- 默认为弹出窗口。
      • x 默认为当前鼠标光标位置。如果声明了 y，则必须声明。
      • y 默认为当前鼠标光标位置。如果声明了 x，则必须声明。
      • positionItem macOS 要定位在鼠标光标下指定坐标处的菜单项的索引。默认值为-1。
      • callback 在菜单关闭后被调用的回调函数

    将菜单作为 browserWindow 中的上下文菜单弹出。

  2. menu.closePopup([browserWindow])

    关闭 browserWindow 中的上下文菜单。

  3. menu.append(menuItem)

    将 menuItem 追加到菜单 。

  4. menu.getMenuItemById(id)

    返回具有指定 id 项的 MenuItem 。

  5. memu.insert(pos,menuItem)

    • pos ： Integer

    将 menuItem 插入菜单的 pos 位置。

实例事件

  1. menu-will-show

    返回 event Event

    调用 menu.popup() 时触发。

  2. menu-will-close

    返回 event Event

    手动关闭弹出或者调用 menu.closePopup() 时触发。

实例属性

  1. menu.items
    • items 包含菜单项的MenuItem[] 数组。

示例

在主进程代码 main.js 的同级目录创建 menu.js ，内容如下：

const { Menu, BrowserWindow, shell } = require('electron')

const isMac = process.platform === 'darwin'

const template = [
    {
        label: '主页'
    },
    {
        label:'技术网站推荐',
        submenu:[
            {
                label:'Vue.js',click(){
                    //在浏览器中打开链接
                    shell.openExternal('https://cn.vuejs.org/')     
                },
                enabled:true
            },
            {
                type:'separator'            
            },
            {
                label: 'w3school', click() {
                    //打开新窗口,加载网址，若加载本项目的文件，需要使用win.loadFile('fielPath')
                    var win = new BrowserWindow({
                        webPreferences:{                //允许渲染进程使用node
                            nodeIntegration:true
                        }
                    })

                    win.loadURL('https://www.w3school.com.cn/')

                    win.on('close',function(){
                        win = null
                    })
                }
            },
            {
                label:'百度',click(menuItem,browserWindow,event){
                    //在当前窗口重新加载新内容
                    browserWindow.loadURL('http://www.baidu.com')
                }
            }
        ]
    },
    {
        label:'退出',
        accelerator:'ctrl+q',           	//快捷键设置
        role:isMac ? 'close' : 'quit'     	//使用系统配置项--退出应用
    }
]

const menu = Menu.buildFromTemplate(template)

Menu.setApplicationMenu(menu)

在 main.js 中 ready 事件 加入

require('./menu.js')

效果图：

添加菜单项到应用程序菜单或者上下文菜单中

进程：主进程

new MenuItem([options])

  • options Object

    • id

    • click Function(optional) 菜单项单击回调事件

      • menuItem
      • browserWindow
      • event

    • label

    • sublable

    • type 可能值有 normal, separator, submenu, checkbox , radio

    • role 指定菜单的行为，定义了click 之后此项忽略

    • toolTip 鼠标悬停文本。

    • accelerator 注册快捷键，绑定到该菜单项

    • registerAccelerator Boolean (optional) Linux Windows - 设为false，则accelerator不生效。

    • icon 图标

    • enabled Boolean - 设为false，则该菜单项将会置灰且不可点击。

    • acceleratorWorksWhenHidden Boolean macOS- 默认 true。设为false,会阻止accelerator项。

    • visible Boolean - 设为false，则隐藏该菜单项。

    • checked Boolean - 只为 checkbox 或者radio 类型菜单项指定。

    • before

    • after

    • beforeGroupContaining

    • afterGrounpContaining

角色

通过角色可以为 menu 添加预定义行为

role 可能值（内置角色）：

  • undo

  • redo

  • cut

  • copy

  • paste

  • pasteAndMatchStyle

  • selectAll

  • delete

  • minimize - 最小化当前窗口。

  • close - 关闭当前窗口.

  • quit - 退出程序

  • reload - 重新加载当前窗口。

  • forcereload - 忽略缓存，重新加载当前窗口。

  • toggledevtools - 在当前窗口中隐藏/显示开发者工具。

  • togglefullscreen - 将当前窗口切换至全屏模式。

  • resetzoom - 将主页的缩放级别重置为初始大小.

  • zoomin - 主页面放大 10%.

  • zoomout -主页面缩小 10%.

  • fileMenu - Whole default "File" menu (Close / Quit)

  • editMenu-默认的 "编辑" 菜单 (包括撤消、复制等)

  • viewMenu - 整个默认的“视图”菜单 (Reload, Toggle Developer Tools, 等等.)

  • windowMenu - 整个默认的“窗口”菜单 (Minimize, Zoom, 等等.).

macOs 提供了额外的 role:

  • appMenu - Whole default "App" menu (About, Services, etc.)
  • about-映射到 orderFrontStandardAboutPanel 操作.
  • hide-映射到 hide 操作.
  • hideOthers-映射到 hideOtherApplications 操作.
  • unhide-映射到 unhideAllApplications 操作.
  • startSpeaking-映射到 startSpeaking 操作.
  • stopSpeaking-映射到 stopSpeaking 操作.
  • front-映射到 arrangeInFront 操作.
  • zoom-映射到 performZoom 操作.
  • toggleTabBar-映射到 toggleTabBar 操作.
  • selectNextTab - 映射到 selectNextTab 操作.
  • selectPreviousTab - 映射到 selectPreviousTab 操作.
  • mergeAllWindows - 映射到 mergeAllWindows 操作.
  • moveTabToNewWindow - 映射到 moveTabToNewWindow 操作.
  • window - 这个子菜单是"Window" 菜单.
  • help-这个子菜单是 "Help" 菜单.
  • services - The submenu is a "Services" menu. This is only intended for use in the Application Menu and is not the same as the "Services" submenu used in context menus in macOS apps, which is not implemented in Electron.
  • recentDocuments-这个子菜单是 "Open Recent" 菜单.
  • clearRecentDocuments -映射到 clearRecentDocuments 操作.

在 macOS 上指定 role 时, label 和 accelerator 是影响菜单项的唯一选项。 所有其它选项都将被忽略。 不过，仍然支持小写的role，如toggledevtools。

实例属性

属性 类型 描述
menuItem.id String 指定该选项的唯一id，可被动态修改。
menuItem.label String 可见标签
menuItem.sublabel String 可见副标签
menuItem.click Function menuItem.click(event,focuseWindow,focuseWebContents)
menuItem.menu Menu
menuItem.submenu Menu 子菜单
menuItem.type String 菜单项的类型 normal, separator, submenu, checkbox , radio
menuItem.role String undo, redo, cut, copy, paste, pasteAndMatchStyle, delete, selectAll, reload, forceReload, toggleDevTools, resetZoom, zoomIn, zoomOut, togglefullscreen, window, minimize, close, help, about, services, hide, hideOthers, unhide, quit, startSpeaking, stopSpeaking, close, minimize, zoom, front, appMenu, fileMenu, editMenu, viewMenu, recentDocuments, toggleTabBar, selectNextTab, selectPreviousTab, mergeAllWindows, clearRecentDocuments, moveTabToNewWindow, windowMenu
menuItem.accelerator Accelerator
menuItem.icon String|NativeImage 图标
menuItem.toolTip String 鼠标悬停文本。macOS
menuItem.enabled Boolean 是否启用该项。
menuItem.visible Boolean 是否可见。
menuItem.checked Boolean 是否选中该项。
menuItem.registerAccelerator Boolean 加速器是应该向系统注册还是只显示。
menuItem.commandId Number 该项的唯一顺序id。

右键菜单

实现方法一：在渲染进程中实现，代码如下：

const { remote } = require('electron')

const template = [
    {
        label:'百度'
    },{
        label:'360'
    }
]

var m = remote.Menu.buildFromTemplate(template)

window.addEventListener('contextmenu',function(e){
    e.preventDefault()
    m.popup({window:remote.getCurrentWindow()})
})

实现方法二：在主进程中先注册菜单，再通过主进程监听渲染进程中右键事件。

menu.js

const { Menu, ipcMain, BrowserWindow } = require('electron')

const template = [
    {
        label:'百度'
    },{
        label:'360'
    }
]

var m = Menu.buildFromTemplate(template)

ipcMain.on('contextMenu',function(){
    m.popup(BrowserWindow.getFocusedWindow())
})

渲染进程文件：

const { ipcRenderer } = require("electron");
window.addEventListener('contextmenu', function (e) {
    e.preventDefault();
    ipcRenderer.send('contextMenu');
})

原文地址：https://www.cnblogs.com/ting-hui/p/13553352.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

electron打包中的坑如何解决
这篇文章主要讲解了“electron打包中的坑如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“electron...
electron打包的坑如何解决
这篇文章主要介绍“electron打包的坑如何解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“electron打包的坑如何...
VSCode中如何调试Electron应用的主进程代码
这篇文章主要为大家分析了VSCode中如何调试Electron应用的主进程代码的相关知识点，内容详细易懂，操作细节合理，具有一定参考价值。如果感兴趣的话，不妨跟着跟...
如何在VSCode上调试Electron应用的主进程代码
这篇“如何在VSCode上调试Electron应用的主进程代码”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价
使用electron-vue搭建桌面应用程序项目
vue-cli+electron一种新的脚手架(vue-electron)vue-electron主要业务逻辑都放在src下的renderer文件夹内，和之前的vue-cli搭建项目流程没有任何区别 GIT地址：https://github.com/SimulatedGREG/electron-vue 搭建项目：1.全局安装脚手架：npminstall--globalvue-cli
electron安装
1、首先成功安装Node.js。2、配置好环境变量path,参加上一篇博客《NodeJs安装》3、全局安装electron，并测试。如下图
为Electron 安装 vue-devtool等扩展
相关代码:https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js在SPA逐渐成为构建优秀交互体验应用的主流方式后，使用Electron开发跨平台的软件是一个优秀的解决方案。下面简单介绍一下Electron-vue安装vue-devtool的方式。安装步骤下载vue-de
Electron学习一——— electron的基础创建
前言本人是做java开发的（菜鸟），做web项目的朋友们基本上都会遇到同样一个，永远不知道客户会怎么样使用，或者说永远不知道客户会用什么浏览器打开我们做出来的应用，就算你跟他说明了一定得用某某某浏览器打开，还是有人会用别的浏览器打开，这种情况通常我们会去做适配（前端），最近公司有需求
electron-builder的使用初接触，有些含义不懂
electron-builder是将electron做的桌面应用打包成安装包的插件。一、安装使用yarn安装，使用npm安装的有问题（没有尝试），先安装yarn工具。npminstall-gyarn安装electron-builderyarnaddelectron-builder--save-dev二、配置在package.json 中配置"build":{
asar 如何解密加密？electron 的 asar 的具体用法
来源：https:/ewsn.net/say/electron-asar.html 在electron中，asar是个特殊的代码格式。asar包里面包含了程序猿编写的代码逻辑。默认情况下，这些代码逻辑，是放置在resource/app目录下面的，明文可见，这样的话，也就有了代码加密（asar打包）的需求 asar如何解密加密？electron的asar的
iview框架使用electron运行图标无法显示问题
 字体图标丢失问题解决方案 重新打包文件npmrunbuild再次运行electron 
electron-vue 图片加载失败后使用默认头像
<img:src="item.headUrl"alt=""class="contact-head":onerror="morenImage">data(){return{morenImage:'this.src="static/image/head.png"',//默认头像}}
electron-vue打包引用的图标不显示问题
在electron-vue中使用了字体图标，但是打包成.exe文件后图标不显示，路劲问题把字体图标放到static目录下就可以了，静态图片也一样我原来放在其它地方不行改到static目录就可以了
electron-vue 设置cookie
//设置登录cookiesetCookie(name,value){varDays=30;varexp=newDate();vardate=Math.round(exp.getTime()/1000)+Days*24*60*60;constcookie={url:this.webApi,name:name,value:value,e
Electron笔记
vue部分cnpminstall-gvue-clivueinitsimulatedgreg/electron-vuemy-projectelectron下载失败解决办法：单独设置electron为淘宝镜像，npmconfigsetelectron_mirrorhttps:/pm.taobao.org/mirrors/electron/yarnconfigsetelectron_mirrorhttps:/pm.taobao.org
electron打包分发
原始的方式打包下载对应的版本号的ReleaseElectron然后把对应的项目方便整理成这样的目录结构(Windows下)node_modules重新安装，不然可能启动失败把整文件夹给别人就可以了如果想改名子可以用改名工具rcedit应用程序打包成一个文件为了缓解windows路径名过长的问题（就
electron开发客户端注意事项兼开源个人知识管理工具“想学吗”
窗口间通信的问题electron窗口通信比nwjs要麻烦的多electron分主进程和渲染进程，渲染进程又分主窗口的渲染进程和子窗口的渲染进程主窗口的渲染进程给子窗口的渲染进程发消息1234567891011subWin.webContents.on('dom-ready', () => {    subWin.webCo
javascript – 具有下载属性的电子问题
按照上一个问题here,我有一个使用Electron平台和Javascript的桌面应用程序,我使用以下方法将HTML5画布转换为JPEG：<aid="download"download="Path.jpg">DownloadJPG</a>然后,functiondownload(){vardt=canvas.toDataURL('image/jpeg');this.href
Electron实现第一个应用 &quot;hello world&quot;
一.什么是Electron?它和NW.js的区别是什么？Electron是GitHub开发的桌面应用开发框架，它支持使用HTML、CSS、JavaScript来构建跨平台的桌面应用。Electron和NW.js(NW.js是什么可以百度下)的区别是：1.整合Chromium和Node.js的方式不同。在NW.js中，Chromium是直接被打补丁打进去
electron-vue 打开文件目录，打开文件夹，
1.打开父子模态创建，<button@click="showModalHandler">父子模态窗口</button>/enderer渲染器中主注册事件showModalHandler(){ipcRenderer.send("child-down-modal");}//主进程中触发事件/***父子模态窗口*/letchildDownModal;ipcMain.on(&#
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot