Electron快捷鍵使用技巧有哪些

這篇文章主要介紹“Electron快捷鍵使用技巧有哪些”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“Electron快捷鍵使用技巧有哪些”文章能幫助大家解決問題。

引言

Electron 中可以設(shè)置全局快捷鍵和應(yīng)用快捷鍵，全局快捷鍵就是注冊(cè)到系統(tǒng)里面的，全局生效的快捷鍵；而應(yīng)用快捷鍵是指當(dāng)用戶使用該應(yīng)用程序時(shí)才生效的快捷鍵，它們的實(shí)現(xiàn)邏輯是不一樣的。

全局快捷鍵

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

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

其中參數(shù)的含義

• accelerator 必須是有效的快捷鍵字符串

• callback 是當(dāng)注冊(cè)成功后，用戶按下快捷鍵之后執(zhí)行的回調(diào)函數(shù)

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

• Ctrl + T

• CmdOrCtrl + Shift + Z

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

不過有兩點(diǎn)需要注意：

• 如果快捷鍵字符串無效會(huì)直接報(bào)錯(cuò)，因此建議在使用此方法的時(shí)候加 try catch 語句，防止程序崩潰。

• 該方法并不確保一定可以成功注冊(cè)全局快捷鍵，因?yàn)橛锌赡鼙浑娔X上的其他應(yīng)用提前占用了，此時(shí)并不會(huì)報(bào)錯(cuò)，而是返回 false，因此我們可以通過返回值來判斷快捷鍵是否注冊(cè)成功。

示例代碼

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)用，否則會(huì)直接退出：

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

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

globalShortcut.isRegistered(accelerator)

該方法只能檢測(cè)當(dāng)前應(yīng)用是否注冊(cè)過這個(gè)快捷鍵，并不能檢測(cè)到快鍵鍵是否被其他應(yīng)用占用，即使被其他應(yīng)用注冊(cè)過了，該方法依然會(huì)返回 false，只有當(dāng)前應(yīng)用成功注冊(cè)了這個(gè)全局快捷鍵，才會(huì)返回 true。

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

取消快捷鍵注冊(cè)的方法：

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

應(yīng)用快捷鍵

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

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

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: '打開控制臺(tái)',
          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)菜單項(xiàng)綁定了快捷鍵，如下圖所示：

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

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

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

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

方法1：把菜單給隱藏掉

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

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

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

具體的內(nèi)容可參見這個(gè) 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')
  })
}

關(guān)于“Electron快捷鍵使用技巧有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。