本專案為 Angular 為底進行開發,並整合 Electron 輸出成可跨平台的桌面應用程式。
Electron 是一個使用 JavaScript、HTML 和 CSS 建構桌面應用程式的框架。
內建 Chromium 和 Node.js,達到 Windows、macOS 和 Linux 跨平台應用,不需要本地開發經驗。
平台 | Electron | WinForm | WPF | Tkinter |
---|---|---|---|---|
跨平台 | V | X | X | V |
美觀 | V | X | X | V |
開發語言 | HTML、CSS、JS | VB、C# | XML、C#、CSS | Python |
-
install electron
npm install --save-dev electron
-
git clone
electron/electron-quick-start
專案git clone https://github.com/electron/electron-packager.git
-
將
electron-quick-start
內的 main.js 及 preload.js 複製到專案根目錄 -
修改
main.js
相關設定-
執行主程式路徑
// and load the index.html of the app. // mainWindow.loadFile('index.html'); mainWindow.loadFile("dist/electron-angular/index.html");
-
額外補充:
-
-
修改
index.html
中 base tag 的 href attribute<!--<base href="/" />--> <base href="./" />
-
在
package.json
中增加"main": main.js"
,並在 scripts 處中增加electron
指令。..., "main" : "main.js", ..., "scripts": { ..., "electron": "ng build && electron ." }, ...
-
執行
npm electron
驗證npm electron
-
install
electron-packager
npm install -d electron-packager
-
electron-packager 的語法如下:
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
- sourcedir:表示來源資料夾,. 表示當前來源為資料夾。
- appname:輸出的執行檔名稱。
- --platform:表示要建置的平台,目前有:linux、win32、darwin,、mas、all。
- --arch:表示目前系統架構,選項有:ia32、x64、armv7l、arm64、all。
- --overwrite:若輸出資料夾已存在,加此參數覆寫。
- --asar:針對原始 Web 程式( resources 資料夾)可進行封裝
其他參數可參考 官方文件。
-
Window 64 位元版本
-
Linux 64 位元版本
-
補充說明