<返回更多

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

2021-11-30    IT狂人日记
加入收藏

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

开发环境

创建新项目

mkdir ElectronNETDemon
dotnet new sln
dotnet new blazorserver -f net5.0 -o ElectronNETDemon
dotnet sln ElectronNETDemon.sln add ElectronNETDemon
cd ElectronNETDemon
dotnet add package ElectronNET.API
public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
        {
            webBuilder.UseElectron(args);
            webBuilder.UseStartup<Startup>();
        });
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    // Open the Electron-Window here
    Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
}
  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 win
electronize build /target osx
electronize 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-*
public void ConfigureServices(IServiceCollection services)
{
    services.AddAntDesign();
    
    ...
}
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
@using AntDesign
<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 />
@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

相关文档

文章来源于学习使我快乐 ,作者黄明基

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>