隨著最近.NET Core 3的正式發(fā)布，我認(rèn)為我會(huì)嘗試一個(gè)有趣的小實(shí)驗(yàn)。我喜歡使用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

確保同時(shí)安裝 .NET Core SDK 和 Node.js(您可以使用 dotnet--version和 node--version檢查版本)。我們需要.NET Core 3.0，因?yàn)槲覀儗⑹褂胐otnet new搭建Blazor應(yīng)用程序。我們還需要Electron.NET的.NET Core 3.0，該庫(kù)允許Electron和.NET集成。Node.js用于下載，配置實(shí)際的Electron實(shí)例并與之集成。

設(shè)定

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

命令

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)多的命令塊，但是它們都很簡(jiǎn)單，不需要任何用戶交互。讓我們細(xì)分每個(gè)命令的作用：

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

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

文件修改

為了使ASP.NET應(yīng)用程序(在本例中為Blazor應(yīng)用程序)與Electron集成，我們需要對(duì) 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());

}

}

}

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

使用

運(yùn)行

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

dotnet electronize start

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

調(diào)試

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

發(fā)布

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

dotnet electronize build /target win

# OR

dotnet electronize build /target osx

# OR

dotnet electronize build /target linux

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

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

樣例代碼

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

注意事項(xiàng)

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

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

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

Electron API/Interop

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

總結(jié)

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

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

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

總結(jié)

以上是生活随笔為你收集整理的所有受限制的应用程序包_【译】使用Blazor构建桌面应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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