Electron 是使用 JavaScript,HTML 和 CSS 構建跨平臺的桌面應用程序的一個框架, Electron.NET 是.net 下對 Electron 的封裝實現, 通過它可以比較容易地實現對 Electron 的調用,達成快速開發跨平臺桌面應用程序的目標。
參考《入門乾貨之Electron的.NET實現-Electron.NET》可以很快搭建起一個跨平臺的 Electron 桌面應用程序, Windows 下打包 win 平臺的版本沒有什麼大問題,但是打包 linux 平臺下的版本,會碰到一個 https://service.electron.build 服務異常的問題(fq也沒用),結果就是 electron 需要的包文件下不回來,官方似乎懶得解決這個問題,直白地說了——既然是免費的午餐,喫不成也別抱怨——想打 Linux 的包不妨切換到 Linux 環境下好了。於是...
1.Ubuntu 18.04 下安裝
參考MSDN上的一篇文檔 完成 nodejs 的安裝,使用以下命令安裝 cURL(用於在命令行中從 Internet 下載內容的工具):
$sudo apt-get install curl
使用以下命令安裝 nvm:
$curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
驗證安裝,請輸入:
$command -v nvm
此命令應返回“nvm”,如果你收到“找不到命令”或根本沒有響應,請關閉當前終端,將其重新打開,然後重試。
列出當前安裝的 Node 版本(此時應爲無):
$nvm ls
安裝 Node.js 的最新穩定 LTS 版本(推薦):
$nvm install --lts
驗證 Node.js 是否已安裝,以及是否爲當前默認版本:
$node -v
全局安裝 electron
$npm install -g electron
驗證 electron
$electron -v
安裝打包工具,沒安裝這個之前, electronize build 可能會在下載文件的過程中發生 can not rename file 的錯誤
$npm install -g electron-builder
$npm install -g electron-packager
安裝工具 .net 工具
dotnet tool install ElectronNET.CLI -g
記得設置路徑
export PATH="$HOME/.dotnet/tools:$PATH"
2. 編譯打包
進入工程目錄
$electronize init $electronize build /targte linux /p:PublishReadyToRun=false /p:PublishSingleFile=true
第一次運行 electronize build 在打包時會檢測 cache 中是否有需要的 electron 包,如果沒有的話會從 github 上拉去,在國內網絡環境中拉取的過程大概率會失敗,所以你可以自己去下載一個包放到 ~/.cache 目錄裏,這個過程可能需要fq, 如遇下載失敗別灰心,多嘗試幾次……
不出錯的話,可以看到打包完成的程序文件 bin\Desktop\*.AppImage,如果自己要打 rpm 包,也可以在下級目錄 linux-unpacked\ 找到所有文件及依賴庫。
3. WSL(CentOS7) 安裝補遺
相比起在 Windows 下開發完,再扔到虛擬機或者專門的 Linux 主機上進行打包,能利用 Windows 自帶的 WSL 實現 Linux 環境下的打包工作會方便很多,WSL(CentOS7)下安裝過程與 Ubuntu 下大同小異。
#yum install curl #curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash #nvm install --lts
CentOS root 賬號執行 npm install 指令會報錯 npm install Error: EACCES: permission denied, mkdir node_modules/gifsicle/ ,解決方法是增加命令參數
#npm install -g electron --unsafe-perm=true --allow-root
然後驗證 electron -v 時可能還會遇到以下錯誤:
1) 運行報錯 找不到 libatk.1.0.so.0, /usr/lib 下即使存在這個文件也沒有用, 因爲 electron 依賴的是 /usr/lib64/libatk1.0.so.0,解決方法:
#yum install atk
2) 運行報錯 找不到 libatk-bridge-2.0.so.0
#yum install at-spi2-atk
3) 運行報錯 找不到 libgdk_pixbuf-2.0.so.0
#yum install gdk-pixbuf2
4) 運行報錯 找不到 libgtk-3.so.0
#yum install gtk3
5) 運行報錯 Running as root without --no-sandbox is not supported
#electron -v --no-sandbox
4 Electron.NET + Blazor 遇到的小坑
4.1 Blazor Server 啓動端口問題
electron 啓動後臺的 asp.net core 程序時,appsettings.json 裏面配置的端口是不起作用的。看源碼如果沒有特殊指定,Electron 會從 8000 端口開始找第一個可用的端口給後臺程序啓用監聽,這在 CreateWindowAsync 傳 Url 的時候讓我犯了難,查文檔發現可以在 electron.manifest.json 中增加
"aspCoreBackendPort": 固定端口,
的方式來解決。後來發現更簡單的方法是使用 ElectronNET.API.BridgeSettings.WebPort 來動態獲取後臺服務的端口,這在《入門乾貨...》那篇文章裏提到過,可惜我讀書不仔細,繞了圈子。
4.2 如何在 vs2019 中調試
在 vs2019 中默認的運行項目不會啓動 Electron,命令行中通過 electronize start 啓動的話又需要附加進程來命中斷點進行調試,如何在 vs2019 中啓動 Electron 的同時也能調試呢——在調試中選 Electron.NET App
4.3 Blazor Server Bootstrap 樣式異常
默認的 Blazor Server 程序使用的是 BootStrap 的樣式,Windows 下打包發佈的 electron 程序在 Windows 下運行顯示一切正常,但是到了 Ubuntu 下打包出來的程序,樣式顯示就異常了,最明顯的是左側的菜單列顯示不出來了。我不太會搞前端,看不出箇中緣由,但是發現 Electron 訪問 vs2019 生成的 release\publish 下的後臺程序顯示是正常的,於是嘗試把 linux-unpack\resources\bin 下的文件替換成 publish 下的版本,然後再運行 electron 主程序,這回顯示正常了。謹慎懷疑是否 electron-builder 打包的時候漏了什麼,不過 Linux 下打包使用 Ant Design Blazor 組件開發的 Blazor Server 程序顯示是正常的。