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, 如遇下载失败别灰心,多尝试几次……

不出错的话,可以看到打包完成的程序文件 binDesktop*.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 生成的 releasepublish 下的后台程序显示是正常的,于是尝试把 linux-unpack esourcesin 下的文件替换成 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 的样式就丢了。

原文地址:https://www.cnblogs.com/towerbit/p/15218466.html