Electron 키보드 단축키

이 절에서는 Electron의 키보드 단축키를 배웁니다.Electron에서 키보드 단축키는 가속기라고 불리는데 응용 프로그램 메뉴의 조종에 분배될 수도 있고 전역적으로 분배될 수도 있기 때문에 응용 프로그램이 키보드의 핵심을 얻지 못하더라도 촉발할 수 있다.Electron에는 주 프로세스와 렌더 프로세스 두 가지가 있기 때문에 각각 주 프로세스에 단축키를 등록하고 렌더 프로세스에 단축키를 등록할 수 있습니다.
주 프로세스 등록 단축키
메인 프로세스에서 단축키를 등록하는 데는 두 가지 방식이 있는데 하나는 Menu 모듈을 이용하여 단축키를 모의하는 것이고 다른 하나는 전역 단축키이다.
로컬 단축키
우리는 Electron의 Menu 모듈을 사용하여 키보드 단축키를 설정할 수 있으며, app가 초점 상태에 있을 때만 단축키를 터치할 수 있어 사용이 비교적 적다.우리는 Menuitem를 만들 때 accelerator 속성을 지정해야 합니다.
예:

const { Menu, MenuItem } = require('electron');
const menu = new Menu();

menu.append(new MenuItem({
   label: 'Print',
   accelerator: 'Ctrl+P',
   click: () => { console.log('    ') }
}))

또한 사용자의 운영 체제에 따라 다양한 키 조합을 구성할 수도 있습니다.

accelerator: process.platform === 'darwin' ? 'Alt+Ctrl+I' : 'Ctrl+Shift+I'

전역 단축키
응용 프로그램에 키보드 초점이 없을 때, 우리는 globalshortcut 모듈을 사용하여 키보드 이벤트를 감지할 수 있다.우리는 아래의 이 예를 보았다.
예:
다음 코드에서는 개발자 도구의 단축키를 Alt+B로 설정합니다.

//   electron
const {app, BrowserWindow,globalShortcut} = require('electron');
let win;

function createWindow() {
  //        
  win = new BrowserWindow({
    width: 800,
    height: 400,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  //   index.html  
  win.loadFile('../html/index.html');

  //          
//   win.webContents.openDevTools();

  //   window    ，        
  win.on('closed', () => {
    win = null;
  });
}

// Electron          ，        ，      
app.on('ready', createWindow);
//           
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

//      
app.on('ready', async () => {
    globalShortcut.register('Alt+B', function () {
      win.webContents.openDevTools();
    })
    createWindow();
})

그리고 우리는 npm start 시작 프로그램을 실행하고 Alt+B 키만 누르면 개발자 도구를 열 수 있습니다.
바로 가기를 설정하지 않으려면 다음과 같이 바로 가기를 로그아웃할 수도 있습니다.

app.on('ready', () => {
    //      
    globalShortcut.register('Alt+B', () => {
        console.log('  Alt+B');
    })
    //        
    globalShortcut.unregisterAll();
})

렌더 프로세스 등록 단축키
렌더링 프로세스 등록 단축키도 두 가지 방법이 있는데 하나는 브라우저를 이용하여 키보드 이벤트를 감청하는 것이고 다른 하나는 제3자 모듈을 이용하는 것이다.
브라우저 창 바로 가기
우리는 탐색 창을 이용하여 키보드 이벤트를 감지할 수 있으며, 이것은 일반적인 방법으로 어떤 키를 눌렀는지 스스로 판단할 수 있다.

window.addEventListener('keyup', doSomething, true);

세 번째 파라미터true는 감청기가 다른 감청기 앞에서 버튼을 받아 다른 감청기가 호출되지 않도록 한다는 뜻이다stopPropagation().
타사 모듈 활용
만약 우리가 수동으로 단축키 분석을 하고 싶지 않다면, 일부 라이브러리에서 고급 키 검사를 할 수 있다. 예를 들어 Mousetrap.
우선 우리는 이 라이브러리를 설치한 다음에 Script 라벨을 사용하여 도입해야 한다

npm install mousetrap --save

HTML 페이지에 index.js 파일을 도입합니다.

  
    
    
  
  
    
  ，   ！
      
  

index.js 파일 내용:

const Mousetrap = require('mousetrap');

// 1：     
Mousetrap.bind('4', () => { console.log('4') })
Mousetrap.bind('?', () => { console.log('      !') })
Mousetrap.bind('esc', () => { console.log('escape') }, 'keyup')

// 2：  
Mousetrap.bind('Alt+shift+k', () => { console.log('alt+shift+k') })

// 3：            
Mousetrap.bind(['Alt+k', 'ctrl+k'], () => {
    console.log('Alt+k    ctrl+k');
    //   false              
    return false;
})

// Gmail    
    Mousetrap.bind('g i', () => { console.log('     ') });
Mousetrap.bind('* a', () => { console.log('  ') });

// konami code!
Mousetrap.bind('up up down left right right left b a enter', () => {
    console.log('xkd_v3  ');
})