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 相關配置

launchSettings.json

Startup.cs

app.UseHsts(); app.UseHttpsRedirection();

• 啟動應用程序

要啟動應用程序，請確保已將'ElectronNET.CLI'軟件包安裝為全局工具：

dotnet tool install ElectronNET.CLI -g

然后初始化Electron.NET項目,electronnet.manifest.json應該出現在你的 ASP.NET Core項目中。

electronize init

運行以下命令啟動程序

electronize start

第一次啟動期間可能需要等待漫長的時間，如啟動失敗可以設置 npm 的源鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 構建桌面應用

輸入以下命令構建各平臺的桌面應用，默認為這些平臺生成 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-*

• 修改Startup.cs，在項目中注冊Antdesign

public void ConfigureServices(IServiceCollection services) {services.AddAntDesign();... }

• 在 wwwroot/index.html(WebAssembly) 或 Pages/_Host.cshtml(Server) 中引入靜態文件

<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet"> <script src="_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 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");} }

本文 GitHub 代碼

https://github.com/huangmingji/ElectronNETDemon

相關文檔

• ElectronNet

• Ant Design Blazor

• ASP.NET Core Blazor

總結

以上是生活随笔為你收集整理的使用.NET5、Blazor和Electron.NET构建跨平台桌面应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。