electron快捷键_如何在Electron JS应用程序中添加键盘快捷键？

electron快捷键

Just like in any other native desktop application, keyboard shortcuts save time and make it easy to perform some tasks like closing an app, copy, paste, zoom-in, cut, and more.

就像在其他任何本机桌面应用程序中一样， 键盘快捷键可以节省时间，并且可以轻松执行一些任务，例如关闭应用程序 ， 复制 ， 粘贴 ， 放大 ， 剪切等。

In this tutorial, we will add a keyboard shortcut that will accompany a menu item.

在本教程中，我们将添加一个与菜单项一起提供的键盘快捷键 。

That is, rather than clicking on that menu item, the user can simply press the keyboard shortcut and the task will be done.

也就是说，用户无需单击该菜单项，只需按下键盘快捷键即可完成任务。

This tutorial only handles keyboard shortcuts. If you're new in Electron JS, consider checking my recent articles under the list of articles.

本教程仅处理键盘快捷键 。 如果您是Electron JS的新手，请考虑在文章列表下查看我最近的文章。

In Electron JS, accelerators are responsible for adding keyboard shortcuts. Below is the definition of accelerators from their official documentation:

在Electron JS中， 加速器负责添加键盘快捷键。 以下是加速器官方文档中的定义：

Accelerators are Strings that can contain multiple modifiers and a single key code, combined by the + character, and are used to define keyboard shortcuts throughout your application.

加速器是可以包含多个修饰符和单个键代码(由+字符组合)的字符串，用于在整个应用程序中定义键盘快捷键。

For example, CTRL+A, CTRL+SHIFT+Q

例如， CTRL + A ， CTRL + SHIFT + Q

Where "CTRL" is the modifier and "Q" is the key code.

其中“ CTRL”是修饰语， “ Q”是键控代码。

The full list of modifiers and key codes can be found on their official documentation.

修饰符和键控代码的完整列表可以在其官方文档中找到。

Open your main JavaScript file and type the following,

打开您的主要JavaScript文件，然后键入以下内容：

const electron = require ('electron')

const app = electron.app // electron module
const BrowserWindow = electron.BrowserWindow //enables UI
const Menu = electron.Menu // menu module

let win

app.on('ready', _ => {
    win = new BrowserWindow({
    width: 800,
    height: 600,
    })
    const template = [
        {
            label: 'Help',   // Help menu item
            submenu: [{ // adds submenu items
                    label: 'About US',
                },{
                    label: 'Quit',
                    role: 'quit', // gives this menu the role to close app when clicked  
                    accelerator: 'Ctrl+Q'  // creates a shortcut to this action

                }]
        }
    ]
    // sets the menu
	const menu = Menu.buildFromTemplate (template)
    Menu.setApplicationMenu (menu)
})

You can see the way the shortcut is written beside the submenu just like in any other native desktop application. On pressing the above command, watch as the app closes.

您可以像在其他任何本机桌面应用程序中一样，在子菜单旁边看到编写快捷方式的方式。 按下上面的命令后，请注意该应用程序是否关闭。

Shortcuts can also be added using the globalShortcut module using the register method.

也可以使用register方法使用globalShortcut模块添加快捷方式。

Example: In the same file above modify the code;

示例：在上面的同一文件中修改代码；

const electron = require ('electron')
const {globalShortcut } = require('electron')

const app = electron.app // electron module
const BrowserWindow = electron.BrowserWindow //enables UI
const Menu = electron.Menu // menu module

let win

app.on('ready', _ => {
    win = new BrowserWindow({
    width: 800,
    height: 600,
    })

    globalShortcut.register('Control+L', () => {  // creates a global shortcut
        console.log ('gobal shortcut presses')      // action when shortcut is pressed
                        })
    const template = [
        {
            label: 'Help',   // Help menu item
            submenu: [{                             // adds submenu items
                    label: `About US`,
                },{
                    label: 'Quit',
                    role: 'quit',            // gives this menu the role to close app when clicked  
                    accelerator: 'Ctrl+Q'   // creates a shortcut to this action

                }]
        }
    ]
    const menu = Menu.buildFromTemplate (template)     // sets the menu
    Menu.setApplicationMenu (menu)

})

Whenever "CTRL+L" is pressed, that statement is logged or printed out on the console as seen above

每当按下“ CTRL + L”时 ，该语句就会被记录或打印在控制台上，如上所示

Thanks for reading.

谢谢阅读。

Drop your comments if in need of help.

如果需要帮助，请删除您的评论。

翻译自: https://www.includehelp.com/electron-js/add-keyboard-shortcuts-in-electron-js-application.aspx

electron快捷键