Electron.Net + Linux + Blazor 初嘗備忘錄

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 程序顯示是正常的。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章