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

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

开发环境

• 操作系统Windows/macOS/Linux
• .NET5.0
• npm

创建新项目

• 创建文件夹

mkdir ElectronNETDemon

• 创建解决方案

dotnet new sln

• 创建项目ElectronNETDemon

dotnet new blazorserver -f net5.0 -o ElectronNETDemon

• 将项目“ElectronNETDemon/域名oj”添加到解决方案中。

dotnet sln 域名 add ElectronNETDemon

• 切换到项目目录

cd ElectronNETDemon

• 将包“域名”的 PackageReference 添加到项目ElectronNETDemon

dotnet add package 域名

• 修改域名使用Electron扩展

public static IHostBuilder CreateHostBuilder(string[] args) =>
    域名teDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
        {
            域名lectron(args);
            域名tartup<Startup>();
        });

• 修改域名，打开Electron窗口

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    // Open the Electron-Window here
    域名(async () => await 域名teWindowAsync());
}

• 删除应用上的 https 相关配置

1. 域名
2. 域名

域名sts();
域名ttpsRedirection();

• 启动应用程序

1. 要启动应用程序，请确保已将\'域名\'软件包安装为全局工具：

dotnet tool install 域名 -g

2. 然后初始化域名项目,域名应该出现在你的 域名 Core项目中。

electronize init

3. 运行以下命令启动程序

electronize start

第一次启动期间可能需要等待漫长的时间，如启动失败可以设置 npm 的源镜像

npm install -g cnpm --registry=https://域名域名

• 构建桌面应用

输入以下命令构建各平台的桌面应用，默认为这些平台生成 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-*

• 修改域名，在项目中注册Antdesign

public void ConfigureServices(IServiceCollection services)
{
    域名ntDesign();
    
    ...
}

• 在 wwwroot/域名(WebAssembly) 或 Pages/域名ml(Server) 中引入静态文件

<link href="_content/AntDesign/css/ant-design-域名" rel="stylesheet">
<script src="_content/AntDesign/js/ant-design-域名"></script>

• 在 域名r 中加入命名空间

@using AntDesign

• 为了动态地显示弹出组件，需要在 域名r 中添加一个 组件。

<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，在域名r加入以下代码，触发按钮的点击事件

@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 域名ess("This is a success message");
    }
}

本文 GitHub 代码

https://域名/huangmingji/ElectronNETDemon

相关文档

• ElectronNet
• Ant Design Blazor
• 域名 Core Blazor