江苏龙网

  1. 主页 > 生活百科 > >

使用.NET5、Blazor和Electron.NET构建跨平台桌面应用

.NET

Electron.NET是一个嵌入了ASP.NET Core的Electron的封装，通过Electron.NET可以构建基于.NET5的跨平台的桌面应用，使得开发人员只需要使用ASP.NET Core和 Blazor就可以胜任桌面应用的开发工作 。
开发环境

  • 操作系统windows/macOS/linux
  • .NET5.0
  • npm
创建新项目
  • 创建文件夹
mkdir ElectronNETDemon
  • 创建解决方案
dotnet new sln
  • 创建项目ElectronNETDemon
dotnet new blazorserver -f net5.0 -o ElectronNETDemon
  • 将项目“ElectronNETDemon/ElectronNETDemon.csproj”添加到解决方案中 。
dotnet sln ElectronNETDemon.sln add ElectronNETDemon
  • 切换到项目目录
cd ElectronNETDemon
  • 将包“ElectronNET.API”的 PackageReference 添加到项目ElectronNETDemon
dotnet add package ElectronNET.API
  • 修改Program.cs使用Electron扩展
public static IHostBuilder CreateHostBuilder(string[] args) =>Host.CreateDefaultBuilder(args).ConfigureWebHostDefaults(webBuilder =>{webBuilder.UseElectron(args);webBuilder.UseStartup<Startup>();});
  • 修改Startup.cs，打开Electron窗口
public void Configure(IApplicationBuilder app, IWebHostEnvironment env){...// Open the Electron-Window hereTask.Run(async () => await Electron.WindowManager.CreateWindowAsync());}
  • 删除应用上的 https 相关配置
  1. launchSettings.json
  2. Startup.cs
app.UseHsts();app.UseHttpsRedirection();
  • 启动应用程序
  1. 要启动应用程序，请确保已将'ElectronNET.CLI'软件包安装为全局工具：
dotnet tool install ElectronNET.CLI -g
  1. 然后初始化Electron.NET项目,electronnet.manifest.json应该出现在你的 ASP.NET Core项目中 。
electronize init
  1. 运行以下命令启动程序
electronize start第一次启动期间可能需要等待漫长的时间，如启动失败可以设置 npm 的源镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用.NET5、Blazor和Electron.NET构建跨平台桌面应用

文章插图
 
  • 构建桌面应用
输入以下命令构建各平台的桌面应用，默认为这些平台生成 x64 包 。
electronize build /target winelectronize build /target osxelectronize build /target linux如需构建 X86 的包，请使用以下命令
electronize build /target custom "win7-x86;win32" /electron-arch ia32将包“AntDesign”的 PackageReference 添加到项目ElectronNETDemon
dotnet add package AntDesign --version 0.1.0-*
  • 修改Startup.cs，在项目中注册Antdesign
public void ConfigureServices(IServiceCollection services){services.AddAntDesign();...}
  • 在 wwwroot/index.html(WebAssembly) 或 Pages/_Host.cshtml(Server) 中引入静态文件
<link href=https://www.isolves.com/it/cxkf/yy/net/2021-11-30/"_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">
  • 在 _Imports.razor 中加入命名空间
@using AntDesign
  • 为了动态地显示弹出组件，需要在 App.razor 中添加一个 组件 。
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true"><Found Context="routeData"><RouteView RouteData=https://www.isolves.com/it/cxkf/yy/net/2021-11-30/"@routeData" DefaultLayout="@typeof(MainLayout)"/>

Sorry, there's nothing at this address.

  • 最后我们就可以在 razor 页面中使用 AntDesign，在Index.razor加入以下代码，触发按钮的点击事件
@inject MessageService _message@page "/"<h1>Hello, world!</h1>Welcome to your new app.<SurveyPrompt Title="How is Blazor working for you?" /><Button Type="primary" OnClick="Success">Hello World!</Button>@code {private async Task Success(){await _message.Success("This is a success message");}}
使用.NET5、Blazor和Electron.NET构建跨平台桌面应用

文章插图
 
本文 GitHub 代码
https://github.com/huangmingji/ElectronNETDemon
相关文档
  • ElectronNet
  • Ant Design Blazor
  • ASP.NET Core Blazor
文章来源于学习使我快乐，作者黄明基


推荐阅读


上一篇：如何在Rescue模式下配置网络和SSH登录

下一篇：2022 python图形界面框架推荐