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 的樣式就丟了。