zoukankan      html  css  js  c++  java
  • 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 的样式就丢了。

  • 相关阅读:
    Asp.net Core Kestrel 免费实现https
    sqlserver空间数据 + c# 实现查询附近的设备
    abp.vNext mvc版中的js和css
    asp.net core 3.x Identity
    asp.net core 3.x 授权默认流程
    Asp.Net WebApi 上传文件方法(原生js上传和JQ ajax上传)
    一个简单的.NET轻量级的ORM——Dikeko.ORM
    Mysql常见安装问题梳理(以5.6版本为例)
    Asp.netCore RESTful WebApi 小结
    初识Asp.netCore RESTful WebApi
  • 原文地址:https://www.cnblogs.com/towerbit/p/15218466.html
Copyright © 2011-2022 走看看