一文詳解Electron?快捷鍵使用技巧及示例

更新時間：2023年03月27日 08:31:52 作者：喬珂力

這篇文章主要為大家介紹了Electron?中的快捷鍵使用技巧及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

Electron 中可以設置全局快捷鍵和應用快捷鍵，全局快捷鍵就是注冊到系統(tǒng)里面的，全局生效的快捷鍵；而應用快捷鍵是指當用戶使用該應用程序時才生效的快捷鍵，它們的實現(xiàn)邏輯是不一樣的，接下來就為大家詳細介紹。

全局快捷鍵

Electron 提供的 globalShortcut 模塊可以用于注冊或取消全局快捷鍵。使用方法為：

globalShortcut.register(accelerator, callback) // 注冊單個快捷鍵
globalShortcut.registerAll(accelerators, callback) // 批量注冊快捷鍵

其中參數(shù)的含義

accelerator 必須是有效的快捷鍵字符串
callback 是當注冊成功后，用戶按下快捷鍵之后執(zhí)行的回調(diào)函數(shù)

有效的快捷鍵由多個功能鍵和一個鍵碼中間用加號（+）組合而成，例如：

Ctrl + T
CmdOrCtrl + Shift + Z

常用的功能鍵和鍵碼如下，設置快捷鍵的時候可以從功能鍵里面選擇多個，從鍵碼里面選擇一個：

功能鍵	Cmd、Ctrl、CmdOrCtrl、Alt、Shift、Meta
鍵碼	0~9、A~Z、F1~F24、Space、Tab、Backspace、Delete、Enter、Esc 等

不過有兩點需要注意：

如果快捷鍵字符串無效會直接報錯，因此建議在使用此方法的時候加 try catch 語句，防止程序崩潰。
該方法并不確保一定可以成功注冊全局快捷鍵，因為有可能被電腦上的其他應用提前占用了，此時并不會報錯，而是返回 false，因此我們可以通過返回值來判斷快捷鍵是否注冊成功。

示例代碼

const { app, globalShortcut } = require('electron')
app.whenReady().then(() => {
  registerGlobalShortcut('Cmd+Alt+K')
})
function registerGlobalShortcut(shortcut) {
  if (!shortcut) return false
  let flag = false
  try {
    flag = globalShortcut.isRegistered(shortcut)
    if (flag) return true
    flag = globalShortcut.register(shortcut, () => {
      console.log('toggle shortcut')
    })
  } catch (e) {
    console.error(e)
  }
  return flag
}

注意 globalShortcut 的 API 需要在 app ready 之后才能調(diào)用，否則會直接退出：

Electron.app/Contents/MacOS/Electron exited with signal SIGTRAP

代碼中有一行判斷快捷鍵是否被注冊的函數(shù)：

globalShortcut.isRegistered(accelerator)

該方法只能檢測當前應用是否注冊過這個快捷鍵，并不能檢測到快鍵鍵是否被其他應用占用，即使被其他應用注冊過了，該方法依然會返回 false，只有當前應用成功注冊了這個全局快捷鍵，才會返回 true。

可以使用一些開源的工具來檢測快捷鍵是否被占用，例如 Windows 系統(tǒng)上的 OpenArk ，Mac 上的 Shortcut Detective。

取消快捷鍵注冊的方法：

globalShortcut.unregister(accelerator) // 取消注冊指定快捷鍵
globalShortcut.unregisterAll() // 取消注冊所有快捷鍵

應用快捷鍵

與全局快捷鍵不同，窗口快捷鍵是當窗口處于激活狀態(tài)時，按下按鍵之后觸發(fā)的行為。例如我們打開 word 或 photoshop 軟件，可以用 ctrl + z 撤銷上一步操作，用 ctrl + c 復制等。下圖是 vscode 的菜單和對應的快捷鍵：

在 Electron 應用中，也提供了對應的功能，在創(chuàng)建菜單（Menu）的時候，可以指定窗口快鍵鍵，示例代碼如下：

const { app, BrowserWindow, Menu } = require('electron')
app.whenReady().then(() => {
  createWindow()
})
let win
function createWindow() {
  win = new BrowserWindow({
    width: 600,
    height: 400,
  })
  const tpl = [
    {
      label: '自定義菜單',
      submenu: [
        {
          label: '打開控制臺',
          role: 'toggleDevTools',
        },
        {
          label: '綁定快捷鍵',
          accelerator: 'Ctrl+Shift+K',
          click: () => {
            console.log('menu shortcut pressed')
          },
        },
      ],
    },
  ]
  if (process.platform === 'darwin') {
    tpl.unshift({ label: '' })
  }
  const menu = Menu.buildFromTemplate(tpl)
  Menu.setApplicationMenu(menu)
}

最終的效果是：系統(tǒng)菜單項綁定了快捷鍵，如下圖所示：

當應用處于激活狀態(tài)時，如果用戶觸發(fā)了 Ctrl+Shift+K 快捷鍵，會執(zhí)行回調(diào)函數(shù)，打印相關(guān)信息：

再次強調(diào)，一定要在打開當前應用后觸發(fā)快捷鍵才行，如果在別的應用中觸發(fā)這個快捷鍵是沒有效果的，正如官方文檔中說的：

其實每個桌面軟件都有注冊了自己的「應用快捷鍵」，例如 ctrl+c、ctrl+v 這種通用的都屬于應用快捷鍵。在 Windows 系統(tǒng)上，還可以為每個窗口設置不同的快捷鍵。例如，你可以在一個窗口中設置 Ctrl+O 快捷鍵打開文件，在另一個窗口中設置 Ctrl+S 快捷鍵保存文件。

在開發(fā)的時候，可能會想做這樣的事情：注冊一個不在菜單中顯示的應用快捷鍵便于調(diào)試（例如打開控制臺或者上傳日志等），那有沒有辦法能夠做到不注冊菜單，只注冊快捷鍵呢？有兩種方案：

方法1：把菜單給隱藏掉

MenuItem 有個 visibile 屬性用于設置菜單項是否展示，默認是 true，設置成 false 即可，不過 2015 年的一個 issue 說，在 macOS 系統(tǒng)上如果隱藏菜單，快捷鍵就失效了，但是經(jīng)過筆者實際測試，發(fā)現(xiàn)并沒有失效（macOS 12.6.3 系統(tǒng)），所以這種方法是可行的，而且非常簡單，只需要修改一行代碼即可：

const tpl = [
  {
    label: '自定義菜單',
    submenu: [
      {
        label: '打開控制臺',
        role: 'toggleDevTools',
      },
      {
        label: '綁定快捷鍵',
        accelerator: 'Ctrl+Shift+K',
        visible: false, // 設置菜單項為隱藏菜單
        click: () => {
          console.log('menu shortcut pressed')
        },
      },
    ],
  },
]

方法2：利用 webContents.on('before-input-event') 事件

具體的內(nèi)容可參見這個 issue，利用的是 webContents 的 before-input-event 事件。示例代碼如下：

app.on('web-contents-created', function (event, wc) {
  wc.on('before-input-event', function (event, input) {
    if (input.key === 'x' && input.ctrl && !input.alt && !input.meta && !input.shift) {
      // Do something for Ctrl-X
      event.preventDefault()
    }
  })
})

社區(qū)有開發(fā)者基于此封裝了 electron-localshortcut 包，可以非常方便的給不同的窗口（BrowserWindow）綁定快捷鍵，使用起來更簡單：

const { app, BrowserWindow } = require('electron')
const localShortcut = require('electron-localshortcut')
app.whenReady().then(() => createWindow())
let win1, win2
function createWindow() {
  win1 = new BrowserWindow({ width: 600, height: 400 })
  win1.loadURL('https://www.baidu.com')
  localShortcut.register(win1, 'Ctrl+Shift+K', () => {
    console.log('register local shortcut for win1')
  })
  win2 = new BrowserWindow({ width: 600, height: 400 })
  win2.loadURL('https://www.taobao.com')
  localShortcut.register(win2, 'Ctrl+Shift+T', () => {
    console.log('register local shortcut for win2')
  })
}

以上就是Electron 中的快捷鍵的詳細內(nèi)容，更多關(guān)于Electron 快捷鍵的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: