從零開始學Electron筆記（七）

豐寸發表於2020-07-22
筆記

在之前的文章我們介紹了一下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 就可以執行我們打包的程式來。

 

相關文章