從零開始學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 就可以執行我們打包的程式來。
&n