从零开始学Electron笔记（七）
从零开始学Electron笔记（七）Electron中的系统快捷键及应用打包
在之前的文章我们介绍了一下Electron中的对话框 Dialog和消息通知 Notification，接下来我们继续说一下Electron中的系统快捷键及应用打包。
全局快捷键模块就是 globalShortcut，意思就是我们打开软件以后，按键盘上的快捷键，就可以实现用快捷键实现特定的功能，相当于用键盘快捷键触发某些事件。
globalShortcut 官方地址：https://www.electronjs.org/docs/api/global-shortcut
globalShortcut 模块可以在操作系统中注册/注销全局快捷键, 以便可以为操作定制各种快捷键。
注意: 快捷方式是全局的; 即使应用程序没有键盘焦点, 它也仍然在持续监听键盘事件。 在应用程序模块发出 ready 事件之前, 不应使用此模块。
我们的目录结构如下：
globalShortcut 模块存在于主进程中，我们先来通过代码来看一下 globalShortcut 的注册及调用，代码主要在 index.js 中，如下：
1 const {app, BrowserWindow, globalShortcut, dialog} = require('electron') 2 3 function createWindow() { 4 // 创建浏览器窗口 5 const win = new BrowserWindow({ 6 width: 800, 7 height: 600, 8 webPreferences: { 9 nodeIntegration: true 10 } 11 }) 12 13 //引入 menu.js 14 require('./menu'); 15 // 并且为你的应用加载index.html 16 win.loadFile('index.html'); 17 18 // 打开开发者工具 19 win.webContents.openDevTools() 20 } 21 22 // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法 23 // 部分 API 在 ready 事件触发后才能使用。 24 app.whenReady().then(createWindow); 25 26 app.on('ready', () => { 27 // 注册一个 'CommandOrControl+X' 的全局快捷键 28 const ret = globalShortcut.register('Command+X', () => { 29 dialog.showMessageBox({ 30 message: 'Command+X 快捷键调用成功！' 31 }).then(() => { 32 }); 33 }); 34 35 if (!ret) { 36 dialog.showMessageBox({ 37 message: 'Command+X 快捷键调用失败！' 38 }).then(() => {}); 39 } 40 41 // 检查快捷键是否注册成功 42 dialog.showMessageBox({ 43 message: 'Command+X 快捷键注册 ' + globalShortcut.isRegistered('Command+X') 44 }).then(() => {}); 45 }); 46 47 app.on('will-quit', () => { 48 // 注销快捷键 49 globalShortcut.unregister('Command+X'); 50 51 // 注销所有快捷键 52 globalShortcut.unregisterAll() 53 });
在上面的代码中可以看出，我们注册了一个 Command+X 的快捷键，并且弹出一个 dialog 的对话框。
我们在注册系统快捷键的时候要先使用 globalShortcut.isRegistered() 方法，来检测快捷键是否注册成功，因为你可能同时打开很多软件，它们已经占用了一些快捷键的组合，所以并不是你100%可以注册成功的。
在关闭程序的时候要注销所有的快捷键，因为我们注册的是全局的快捷键，所以当我们关闭软件或者窗口时，记得一定要注销我们的快捷键。防止关闭后打开其他软件和他们的快捷键冲突。
当我们使用了Electron开发完应用后，一定想着如何打包成exe文件，打包的方式有很多，甚至根据你使用不同的前端框架，打包方式也会有所不同。这里我们用原汁原味的打包方式，用electron-package 打包。
首先我们先通过 npm 来下载 electron-package 包，
npm install electron-packager --save
然后在控制台输入
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
其中我们需要输入6个参数，这6个参数意思分别是：
- location of project : 项目所在路径
- name of project : 打包的项目名称
- platform : 确定了你要构建哪个平台的应用（Windows、Mac还是Liux）
- architecture: 决定了使用x86还是x64还是两个架构都需要
- electron version: electron 的版本
- optional options: 可选选项
为了打包方便我们可以在 package.json 的 scripts 中添加如下代码，相当于快捷方式的作用：
"packager": "electron-packager ./ myElectron --all --out ./dist --overwrite --icon=./img/icon/icon.ico"
在项目中新建 dist 文件夹。
使用 npm run packager 就可以进行打包了，打包的时间会非常长，而且如果你安装了一些安全软件，还要时刻看着安全软件的禁止操作，如果不小心被禁止掉了，可能会造成打包的失败。
最后我们来看一下运行打包的结果：
双击 myElectron 就可以运行我们打包的程序来。
