隨著最近.NET Core 3的正式發(fā)布，我認(rèn)為我會嘗試一個有趣的小實(shí)驗。我喜歡使用Electron來創(chuàng)建基于Web的桌面應(yīng)用程序。我想了解有關(guān)Blazor（ASP.NET系列的最新成員）的更多信息。在這篇文章中，我將向您確切演示如何在15分鐘內(nèi)開始使用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應(yīng)用程序。我們還需要Electron.NET的.NET Core 3.0，該庫允許Electron和.NET集成。Node.js用于下載，配置實(shí)際的Electron實(shí)例并與之集成。

設(shè)定

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

命令

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

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

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

所有命令應(yīng)按順序執(zhí)行，并且一次執(zhí)行一個。一旦它們?nèi)客瓿?#xff0c;您僅需更改兩個文件即可運(yùn)行該應(yīng)用程序！

文件修改

為了使ASP.NET應(yīng)用程序（在本例中為Blazor應(yīng)用程序）與Electron集成，我們需要對 Program.cs和 Startup.cs進(jìn)行修改。在 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()); } } }

隨著這兩個文件的更新，我們現(xiàn)在可以在Electron內(nèi)運(yùn)行我們的應(yīng)用程序了！

使用

運(yùn)行

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

dotnet electronize start

Blazor在桌面應(yīng)用程序中運(yùn)行

調(diào)試

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

發(fā)布

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

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

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

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

樣例代碼

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

注意事項

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

開發(fā)人員工作流程

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

Electron API/Interop

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

總結(jié)

我們創(chuàng)建了一個全新的Blazor項目，借助Electron.NET增加了對Electron的支持，并創(chuàng)建了一個準(zhǔn)備發(fā)布的安裝程序！盡管在使用開發(fā)堆棧進(jìn)行這種尖端構(gòu)建時確實(shí)存在一些警告，但絕對沒有阻止您使用Blazor構(gòu)建不可思議的桌面應(yīng)用程序的警告。在像您這樣的開發(fā)人員的幫助下，Electron.NET將繼續(xù)改進(jìn)！

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。