2021
11/20
23:30
你的位置:首页 > ASP.net教程 > 使用.NET5,Blazor和Electron.NET构建跨平台桌面应用

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

发布时间:2021-11-20 23:30:30

原标题:使用.NET5,Blazor和Electron.NET构建跨平台桌面应用

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

开发环境

创建新项目

  • 创建文件夹
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 here Task.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=

  • 构建桌面应用

输入以下命令构建各平台的桌面应用,默认为这些平台生成 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="#" rel="stylesheet"><script src='/images/loading.gif' data-original="_content/AntDesign/js/ant-design-blazor.js"></script>
  • 在 _Imports.razor 中加入命名空间
@using AntDesign
  • 为了动态地显示弹出组件,需要在 App.razor 中添加一个 组件。
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true"> <Found Context="routeData">  <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/> </Found> <NotFound>  <LayoutView Layout="@typeof(MainLayout)">   <p>Sorry, there's nothing at this address.</p>  </LayoutView> </NotFound></Router><AntContainer />
  • 最后我们就可以在 razor 页面中使用 AntDesign,在Index.razor加入以下代码,触发按钮的点击事件
@inject MessageService _message@page "/"<h1>Hello, world!</h1>Welcome to your new app.<SurveyPrompt /><Button Type="primary" OnClick="Success">Hello World!</Button>@code { private async Task Success() {  await _message.Success("This is a success message"); }}

本文 GitHub 代码

https://github.com/huangmingji/ElectronNETDemon

相关文档

  • ElectronNet
  • Ant Design Blazor
  • ASP.NET Core Blazor

作者:黄明基
出处
如果你喜欢本文章,欢迎转载,请保留此段声明,且在文章页面明显位置给出原文连接。
如果文中有什么错误,欢迎指出。以免更多的人被误导。欢迎大家扫描右边二维码关注公众号。




原标题:使用.NET5,Blazor和Electron.NET构建跨平台桌面应用

关键词:asp.net,ASP

转载请保留本文网址: http://www.www.d5897.com/a/1259398.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#www.d5897.com (#换成@)。
Baidu