Electron是GitHub開發的一個開源框架,可以使用Node.js與Chromium來完成桌面GUI應用程式的開發,Electron已被多個開源Web應用程式用於開發前端與後端,官方網站如下,
網站移動到最下面可看到簡單的使用方法,如下所示,
點擊右上角Clone or download->Download ZIP進行下載
下載完成解完壓縮,開啟Visual Studio Code這軟體來安裝並執行Electron,
在終端機依次輸入
cd electron-quick-start
npm install && npm start
顯示結果如下,
npm start此指令主要是去執行electron-quick-start-master->main.js
在Electron中可以更換icon圖片,首先在electron-quick-start-master資料夾新增icons資料夾,在裏頭放一張圖片,如下所示,
接下來在electron-quick-start-master->main.js中的mainWindow = new BrowserWindow({width: 800, height: 600})增加icon的路徑,如下所示,
mainWindow = new BrowserWindow({
width: 800,
height: 600,
icon: path.join(__dirname, 'icons/Mushroom.ico')
})
接下來執行npm start來看結果,
Electron有一個重要功能是將撰寫好程式打包輸出成桌面GUI應用程式,這時需要輸入以下指令,
npm install electron-packager --save-dev
在electron-quick-start-master->package.json中的"devDependencies"中會多出electron-packager與版本,如下所示,
接下來需要在"scripts"增加執行electron-packager的指令,指令如下,
"build":"electron-packager . MyApp --platform=win32 --arch=x64 --version=1.7.10
--icon=icons/Mushroom.ico --asar=true --out=dist --ignore=node_modules/electron-* "
指令內容說明如下:
electron-packager . MyApp: 將目前全部資料打包成MyApp這個名字
--platform = darwin(Mac),win32(Windows),linux(LINUX)
--arch = ia32,x64,all
--version = Electron版本
--icon = icon路徑
--asar = true or false,設定trun是把程式文件封裝,比較不容易被看到原始碼
--out = 輸出文件名稱(dist)
--ignore = 忽略檔案不要打包,建議把electron都忽略掉,因為打包後裡面就有了,可以減少檔案大小
接下來執行,並等待一段時間,
npm run build
產生dist資料夾,如下所示,
進入electron-quick-start-master->dist->MyApp-win32-x64中找MyApp.exe,如下所示,
點擊後開啟結果如下,
留言列表
