隨著最近.NET Core 3的正式發布，我認為我會嘗試一個有趣的小實驗。我喜歡使用Electron來創建基于Web的桌面應用程序。我想了解有關Blazor（ASP.NET系列的最新成員）的更多信息。在這篇文章中，我將向您確切演示如何在15分鐘內開始使用Blazor和Electron！

先決條件

• .NET Core 3.0 SDK

• Node.js with npm

確保同時安裝 .NET Core SDK 和 Node.js（您可以使用 dotnet--version和 node--version檢查版本）。我們需要.NET Core 3.0，因為我們將使用dotnet new搭建Blazor應用程序。我們還需要Electron.NET的.NET Core 3.0，該庫允許Electron和.NET集成。Node.js用于下載，配置實際的Electron實例并與之集成。

設定

安裝程序需要一些簡單的步驟。盡管大多數步驟只是命令，但是有2個文件需要手動編輯。設置完項目后，只需要一個命令就可以啟動它！

命令

mkdir blazor-electron-demo cd blazor-electron-demo dotnet new blazorserver --no-https dotnet add package ElectronNET.API dotnet new tool-manifest dotnet tool install ElectronNET.CLI dotnet electronize init

相當多的命令塊，但是它們都很簡單，不需要任何用戶交互。讓我們細分每個命令的作用：

mkdir blazor-electron-demo cd blazor-electron-demo	為我們的項目創建一個文件夾，并將其設置為當前工作目錄。確保將其更改為您首選的項目名稱！
dotnetnewblazorserver--no-https	使用腳手架模板創建了一個新的服務器端Blazor應用程序，不使用HTTPs。
dotnet addpackageElectronNET.API	安裝NuGet程序包，該程序包將Electron支持添加到ASP.NET應用程序。
dotnetnewtool-manifest	增加了對本地安裝的“ dotnet”工具的支持。
dotnet tool installElectronNET.CLI	在項目本地安裝所需的 ElectronNET.CLI。
dotnet electronize init	設置Electron.NET清單并更新啟動配置文件。

所有命令應按順序執行，并且一次執行一個。一旦它們全部完成，您僅需更改兩個文件即可運行該應用程序！

文件修改

為了使ASP.NET應用程序（在本例中為Blazor應用程序）與Electron集成，我們需要對 Program.cs和 Startup.cs進行修改。在 Program.cs中：

using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore; using Microsoft.AspNetCore.Hosting; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.Hosting; using Microsoft.Extensions.Logging; using ElectronNET.API; // ADD THIS! namespace blazor_electron_demo { public class Program { public static void Main(string[] args) { CreateHostBuilder(args).Build().Run(); } public static IHostBuilder CreateHostBuilder(string[] args) => Host.CreateDefaultBuilder(args) .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>() .UseElectron(args); // ADD THIS! }); } }

在 Startup.cs中：

using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Hosting; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; using blazor_electron_demo.Data; using ElectronNET.API; // ADD THIS! namespace blazor_electron_demo { public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); services.AddServerSideBlazor(); services.AddSingleton<WeatherForecastService>(); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Error"); } app.UseStaticFiles(); app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); }); // ADD THIS! Task.Run(async () => await Electron.WindowManager.CreateWindowAsync()); } } }

隨著這兩個文件的更新，我們現在可以在Electron內運行我們的應用程序了！

使用

運行

我們的應用程序可以兩種不同的方式運行。通過命令行或通過Visual Studio的“運行”對話框（通過在使用dotnet electroize init的安裝過程中添加的啟動配置文件）進行。

dotnet electronize start

Blazor在桌面應用程序中運行

調試

運行后，您可以從Visual Studio的“調試”>“附加到進程...”中附加調試器，并按項目名稱進行過濾。運行.NET應用程序時，斷點將完全按預期工作。您甚至可以調試Razor文件中的代碼！唯一的缺點是，當您需要進行更改時，必須停止應用程序，編輯更改并重新啟動它。我們稍后再討論。

發布

感謝Electron.NET，我們可以通過一個命令將應用程序發布到特定于平臺的安裝程序中！

dotnet electronize build /target win # OR dotnet electronize build /target osx # OR dotnet electronize build /target linux

Windows Note: 我確實遇到了一個例外 Thegiven key'target'wasnotpresentinthe dictionary.在 mingw64提示符下運行命令時。使用本機 cmd或 powershell提示符再次嘗試命令。

此命令將在./bin/desktop文件夾下創建一個新的安裝程序。在內部，您將找到適合您平臺的安裝程序！

樣例代碼

我創建了一個GitHub存儲庫，展示了我們剛剛進行的所有更改。如果遇到問題，請使用它作為資源，或者在Twitter上與我聯系！

注意事項

雖然這兩種技術的結合很有趣，但確實有其缺點。從開發人員工作流問題到API不匹配，這些問題可能很煩人，但對于使用Blazor和Electron而言，它們決不是交易障礙。

開發人員工作流程

最嚴重的問題是迭代開發過程緩慢。此時，開發人員的工作流程包括啟動應用程序，手動附加調試器，測試應用程序，然后停止應用程序進行更改并最終重新啟動周期。如果沒有更改后的熱重載功能，這將大大增加開發難度。Electron.NET的維護者建議在瀏覽器中開發該應用程序以完成大部分任務，并且僅切換到electronic進行定期測試。

Electron API/Interop

Electron.NET很年輕，但是功能全面。創建從C＃和.NET到JavaScript＆Node.js / Electron的功能橋梁并非易事。但是您很有可能會發現未實現的方法或事件。請記住，Electron.NET是人們在業余時間創建的免費庫。每個功能可能都不存在，但這就是開源的光芒所在。如果您在API或功能中發現了一個漏洞，需要進行一些工作，那么請分叉該項目并嘗試自己找到修復程序。大多數時候，構建軟件是協作的成果，幫助解決問題而不是僅僅等待解決問題會非常有意義。

總結

我們創建了一個全新的Blazor項目，借助Electron.NET增加了對Electron的支持，并創建了一個準備發布的安裝程序！盡管在使用開發堆棧進行這種尖端構建時確實存在一些警告，但絕對沒有阻止您使用Blazor構建不可思議的桌面應用程序的警告。在像您這樣的開發人員的幫助下，Electron.NET將繼續改進！

特別向Rob Horner和John Sedlak表示感謝，感謝他幫助編輯本文！謝謝羅伯和約翰！

與往常一樣，如果您喜歡這篇文章，請在Twitter上告訴我！如果您有任何問題或不了解某些內容，也請告訴我！我非常感謝您的反饋！

總結

以上是生活随笔為你收集整理的【译】使用Blazor构建桌面应用的全部內容，希望文章能夠幫你解決所遇到的問題。

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