srcmini本文概述
在Electron应用程序内部, 你将能够使用HTML, CSS和JavaScript创建上下文菜单, 但是如果我们想弄乱应用程序上的本机内容(例如复制文本, 选择所有文本或切换), 有时它们还不够用到全屏。如果要向使用操作系统本机界面的应用程序添加自定义上下文菜单, 则可以使用Electron上下文菜单模块来实现它。
在本文中, 我们将向你展示如何轻松实现和自定义Electron Application的本机上下文菜单。
1.安装Electron上下文菜单
Electron没有内置的上下文菜单。你应该自己处理。但这既繁琐又难以正确。该模块为你提供了一个不错的可扩展上下文菜单, 其中包括诸如文本的剪切/复制/粘贴, 图像的保存图像和链接的复制链接等项目。它还在开发时添加了”检查元素”菜单项, 以像在Chrome中一样在检查器中快速查看项目。你可以在主过程和渲染器过程中直接使用此模块。要安装此模块, 请打开终端, 切换到Electron项目的目录, 然后运行以下命令：
npm install electron-context-menu这将在你的项目中安装该模块, 并允许你稍后在代码中使用require(‘electron-context-menu’)来使用它。有关此模块的更多信息, 请访问Github上的官方存储库。
2.了解上下文菜单的工作方式
上下文菜单基本上是可以通过Electron上下文菜单来实现的功能。该函数将带有API支持的选项的对象作为第一个参数(此处有更多信息)。在主过程中, 可以自定义上下文菜单：
// ./main.js
const {app, BrowserWindow} = require('electron');
const contextMenu = require('electron-context-menu');
// Add an item to the context menu that appears only when you click on an image
contextMenu({
prepend: (params, browserWindow) => [{
label: 'Rainbow', // Only show it when right-clicking images
visible: params.mediaType === 'image'
}]
});
// Your code that starts a new application
let win;
(async () => {
await app.whenReady();
win = new BrowserWindow();
})();或直接在渲染器过程中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>, Chromium <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>.
<script>
const contextMenu = require('electron-context-menu');
// This code adds 2 new items to the context menu to zoom in the window (in and out)
// Read other steps for more information
contextMenu({
prepend: (params, browserWindow) => [
{
role: "zoomIn"
}, {
role: "zoomOut"
}, ], });
</script>
</body>
</html>
2.1。使用自定义行为将项目添加到上下文菜单
如果要在项目中添加执行自定义JavaScript函数的项目, 则需要检查Electron的MenuItem类的文档, 因为基本上这是你需要在上下文菜单之前或之后添加的对象。你可以使用自定义操作将新项目添加到上下文菜单, 将对象添加到上下文菜单的prepend / append数组中, 该对象至少具有标签和当用户单击新选项时执行的click回调：
const contextMenu = require('electron-context-menu');
contextMenu({
prepend: (params, browserWindow) => [
{
label: 'Destroy Atomic Bombs', click: (menuItem, browserWindow, event) => {
// Note that the alert function is only avaialble in the renderer process
//alert("You destroyed all the atomic bombs in the world, thanks :3")
// If executed from the main process, the console log function will appear in the terminal, not in the developer tools
console.log("You destroyed all the atomic bombs in the world, thanks :3")
}
}
]
});请注意, 先前的代码是在渲染器进程中执行的, 因此console.log函数将在开发人员工具的console选项卡上输出信息：
2.2。使用预定义的行为将项目添加到上下文菜单
Electron上下文菜单上的预定义行为旨在执行浏览器级别的功能, 例如最小化窗口, 关闭窗口, 缩放窗口, 选择所有文本等。这可以通过MenuItem的role属性进行分配。最好为与标准角色匹配的任何菜单项指定角色, 而不是尝试在单击功能中手动实现该行为, 因此内置角色行为将提供最佳的本机体验。标签和加速器值在使用角色时是可选的, 并且将默认使用每个平台的适当值。每个菜单项都必须具有角色, 标签, 或者在分隔符的情况下必须具有类型。角色属性可以具有以下值：
- 撤消
- 重做
- 切
- 复制
- 糊
- pasteAndMatchStyle
- 全选
- 删除
- 最小化-最小化当前窗口。
- 关闭-关闭当前窗口。
- 退出-退出应用程序。
- 重新加载-重新加载当前窗口。
- forceReload-重新加载当前窗口, 忽略缓存。
- toggleDevTools-在当前窗口中切换开发人员工具。
- toggleFullScreen-在当前窗口上切换全屏模式。
- resetZoom-将焦点页面的缩放级别重置为原始大小。
- zoomIn-将焦点页面放大10％。
- zoomOut-将焦点页面缩小10％。
- editMenu-整个默认的”编辑”菜单(撤消, 复制等)。
- windowMenu-整个默认的”窗口”菜单(最小化, 关闭等)。
以下附加角色在macOS上可用：
- 关于-映射到orderFrontStandardAboutPanel操作。
- hide-映射到hide操作。
- hideOthers-映射到hideOtherApplications操作。
- 取消隐藏-映射到unhideAllApplications操作。
- startSpeaking-映射到startSpeaking操作。
- stopSpeaking-映射到stopSpeaking操作。
- front-映射到arrangeInFront操作。
- zoom-映射到performZoom操作。
- toggleTabBar-映射到toggleTabBar操作。
- selectNextTab-映射到selectNextTab操作。
- selectPreviousTab-映射到selectPreviousTab操作。
- mergeAllWindows-映射到mergeAllWindows操作。
- moveTabToNewWindow-映射到moveTabToNewWindow操作。
- window-子菜单是”窗口”菜单。
- help-子菜单是”帮助”菜单。
- 服务-子菜单是”服务”菜单。
- 最近的文档-子菜单是”打开最近的”菜单。
- clearRecentDocuments-映射到clearRecentDocuments操作。
在macOS上指定角色时, 标签和加速器是唯一会影响菜单项的选项。所有其他选项将被忽略。小写的角色, 例如toggledevtools, 仍然受支持。 MacOS托盘中的顶级菜单项未启用和可见性属性。例如, 要将2个新选项添加到上下文菜单中以允许用户放大和缩小, 我们可以这样添加它们：
contextMenu({
prepend: (params, browserWindow) => [
{
role: "zoomIn"
// If you want to change the label "Zoom In"
// label: "Custom Zoom In Text"
}, {
role: "zoomOut"
// If you want to change the label "Zoom Out"
// label: "Custom Zoom Out Text"
}, ], });这将生成以下上下文菜单：
2.3。自定义预定义行为标签
本地化所必需, 你可以覆盖上下文菜单的预定义操作上显示的文本, 例如西班牙语：
可以通过上下文菜单的labels属性覆盖这些标签, 如下所示：
contextMenu({
// Change the labels of the predefined context menu
// e.g Cut, Copy, Paste
labels: {
cut: 'Custom Cut Text', copy: 'Custom Copy Text', paste: 'Custom Paste Text', save: 'Custom Save Image Text', saveImageAs: 'Custom Save Image As… Text', copyLink: 'Custom Copy Link Text', copyImageAddress: 'Custom Copy Image Address Text', inspect: 'Custom Inspect Element Text'
}
});请注意, 具有预定义行为的项目标签需要在分配期间进行分配, 而不是在上下文菜单的labels属性中进行分配。为了完成本文, 我们建议你也阅读该模块的官方文档, 因为它提供了很多东西, 除了此处的基础知识之外, 我们没有涵盖其他所有内容, 因此请查看文档。
编码愉快！
评论前必须登录！
注册