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

4.4 electronize start 出錯 (2021-9-17 更新)

 

如果遇到這個錯誤,建議檢查一下引用 Electron.Net項目的名字,就是 *.csproj 的 *,如果名字里面有字符點,例如 XXX.YYY,把中間的 “.” 去掉。

另外 Blazor Server 的項目最好也不要在名字中間有點,因為如果有的話,對應的 Shared/MainLayout.razor.css 有可能不能正常生成,運行起來 XXX.YYY.styles.css 這個資源找不到(404),缺省 的 BootStrap 的樣式就丟了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM