目录
介绍
先决条件
应用程序编码
1.创建ASP.NET MVC应用程序
2.将ElectronNET.API NuGet程序包添加到项目中
3.在应用程序中实例化ElectronNET.API
4.将自定义菜单添加到应用程序
5.在您的应用程序中添加JavaScript HTML编辑器
6.在主线程和渲染线程之间建立通信
7.使用文件操作对象
8.生成.NET Core 3 / Electron.NET应用程序
当前问题
结论
- Github repo
借助.NET Core 3，C＃开发人员现在可以开发出真正的多平台GUI应用程序。您可以在最近发行的书中找到有关这些解决方案的研究：
- 为macOS，Linux和Windows构建C＃GUI应用程序
Electron.NET是本书介绍的解决方案之一，它提供了所有基于同一.NET Core 3项目为Windows，Linux和Mac OS X编写GUI应用程序的方法。Electron.NET是围绕着著名的Electron框架（基于NodeJS）的.NET Core包装器。
为了说明该工具的用法，我将开发一个HTML编辑器应用程序。该原型程序说明了Electron.NET在跨平台桌面应用程序中使用JavaScript组件的能力。
在我们的例子中，CKeditor用于实现编辑器本身。
Electron.NET应用程序是从ASP.NET MVC Web应用程序构建的，因此通过使用.NET Core的Electron包装器，扩展了桌面应用程序的特定功能：Electron.NET。
先决条件在使用Electron.NET 检查HTMLEditor应用程序的开发之前，您必须安装适当的开发环境。
因此，您应该已经在计算机上安装了：
- NodeJS
- NPM
- 适用于dotnet CLI的Electron.NET全局工具（请参阅GitHub网站）
检查该项目的GitHub网站： https://github.com/ElectronNET/Electron.NET.。
该HtmlEditor应用程序使用Electron.NET的5.30.1版本。
请注意，您必须仔细检查是否使用了适当的.NET Core版本，Electron.NET的当前版本是针对.NET Core 3.0的（如果使用3.1版的.NET Core，它将无法正常工作……甚至没有安装）。
应用程序编码应用程序的开发可以描述为一个简单的过程。
1.创建ASP.NET MVC应用程序首先，您必须使用以下命令创建一个标准的.NET Core 3 ASP.NET MVC应用程序，但是您可以使用Visual Studio进行创建。
dotnet new mvc -o Multiplatform.HtmlEditor要添加NuGet依赖项，可以使用Visual Studio 的熟悉的“NuGet package Manager”：
您还必须安装CLI工具。要添加所需的dotnet CLI Electron.NET全局工具：
dotnet tool install ElectronNET.CLI -g --version 5.30.1这是通过在MVC应用程序中添加Electron包装器的实例来完成的。实际上，在startup.cs文件中：
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
} else {
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints => {
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
// Open the Electron-Window here
//Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
if (HybridSupport.IsElectronActive) {
ElectronBootstrap();
}
}
public async void ElectronBootstrap()
{
var browserWindow = await Electron.WindowManager.CreateWindowAsync
(new BrowserWindowOptions {
Width = 1000,
Height = 800,
Show = false,
});
browserWindow.OnReadyToShow += () => browserWindow.Show();
browserWindow.SetTitle("HTMLEditor 2020");
}该应用程序现在在桌面容器中运行，但未集成任何功能：
除了在应用程序中添加Electron之外，还从不必要的代码（页面，日志记录，配置…）中清除了默认的ASP.NET MVC应用程序。
4.将自定义菜单添加到应用程序当应用程序作为桌面应用程序运行后，您必须修改默认的本地菜单。为此，应用程序的“本地”菜单是通过专用的MVC Controller：MenusController.cs实现的。
>
public class MenusController : Controller
{
public IActionResult Index()
{
if (HybridSupport.IsElectronActive) {
var menu = new MenuItem[] {
new MenuItem {
Label = "File", Submenu = new MenuItem[] {
new MenuItem {
Label = "Open HTML",
Accelerator = "CmdOrCtrl+O",
Click = async () =>
{
// Open file HTML
var mainWindow = Electron.WindowManager.BrowserWindows.First();
var options = new OpenDialogOptions
{
Title = "Open HTML file",
Filters = new FileFilter[]
{
new FileFilter { Name = "HTML",
Extensions = new string[] {"html","htm" } }
}
};
var result = await Electron.Dialog.ShowOpenDialogAsync
(mainWindow, options);
if (result.First() != "")
{
string OpenfilePath = result.First();
string strContent = FileOperation.openRead(OpenfilePath);
//Call Render JS
var mainWindow1 =
Electron.WindowManager.BrowserWindows.First();
Electron.IpcMain.Send
(mainWindow1,"setContent",strContent);
mainWindow.SetTitle(OpenfilePath);
}
}
},
new MenuItem { Label = "Save HTML",
Accelerator = "CmdOrCtrl+S",
Click = async () =>
{
var mainWindow = Electron.WindowManager.BrowserWindows.First();
Electron.IpcMain.Send(mainWindow,"saveContent");
}
},
new MenuItem { Type = MenuType.separator },
new MenuItem {
Label = "Exit",
Accelerator = "CmdOrCtrl+X",
Click = () =>
{
// Exit app
Electron.App.Exit();
}
},
}
},
new MenuItem {
Label = "Help", Submenu = new MenuItem[] {
new MenuItem
{
Label = "About",
Accelerator = "CmdOrCtrl+R",
Click = async () =>
{
// open native message windows
var options = new MessageBoxOptions
("This is a demo application for Electron.NEt
and .NET CORE 3.");
options.Type = MessageBoxType.info;
options.Title = "About HTMLEditor";
await Electron.Dialog.ShowMessageBoxAsync(options);
}
}
}
}
};
Electron.Menu.SetApplicationMenu(menu);
}
return View();
}
}请注意，菜单控制器可用于调用（同步或异步）应用程序的多个功能。
HTML编辑器本身是一个免费的JavaScript组件：CKeditor4。该网站允许您通过生成config.js文件来个性化编辑器的菜单。该文件可从ckeditor4网站直接下载： https://github.com/ckeditor/ckeditor4。
专用网站允许您使用专用图形界面配置编辑器。您可以在https://ckeditor.com/cke4/builder上在线找到该应用程序。
创建适当的配置文件后，必须将其添加到MVC项目中（在客户端）。
实现编辑器所需的组件（js，css，img）必须添加到项目中。这是用于将ckeditor4 HTML编辑器添加到项目中的客户端依赖项的文件树状结构。
有两个功能需要C＃（主进程）和Html / Js（Render进程）之间的通信。
- 打开文件
- 保存存档
这是实现这两个功能所需的两个过程之间的通信模式：
打开文件
保存存档
编辑器集成了基本文件的操作：打开，保存。为这些操作实现了一个专用类：FileOperations.cs。该static对象集成了示例所需的两种匹配方法。
一旦成功完成了每个步骤（并测试了这些步骤），应用程序就完成了，至此，您必须构建项目，并且对于要生成的可执行文件的类型可能有些棘手。
8.生成.NET Core 3 / Electron.NET应用程序对于本文的第一个版本，公开了最明显的（实际上是基本的）可执行文件部署类型。
这部分在ElectronNET GitHub网站上有很好的记录。
- 首先，您必须使用以下命令为ASP.NET MVC应用程序创建Electron配置文件：
electronize init- 之后，您可以使用以下命令执行应用程序：
electronize start此命令将完成构建以及项目的还原，第一次执行可能会花费一些时间（必须加载Electron包装器）。
- 我尚未设法更新应用程序的图标（正在使用该图标）
- 在Mac OS X的菜单栏中，菜单显示“Electron”而不是“File”。
对于想要开发多平台桌面应用程序（适用于Windows，Linux和MacOS X）的ASP.NET开发人员，Electron.NET的使用似乎是一种选择的解决方案。Electron.NET使之成为可能。
通过将Web应用程序封装到桌面应用程序中，可以将许多JavaScript组件重复使用或回收用于桌面开发，这是这种方法的强项。有很多JavaScript组件可以很好地添加到桌面应用程序中（用于导航，GUI效果……）。
但是，Electron.NET的使用并未针对Windows平台进行优化，并且.NET Core包装器中没有原始项目的许多方法。此外，Elentron.NET要求您比实际的ASP.NET C＃知识更精通JavaScript编程。
但是Electron.NET是一个很好的包装器，如果您想从网站开发中生成桌面应用程序，可以使用它。
如果Electron.NET不符合您的期望，那么还有许多其他解决方案可以使用C＃.NET Core 3编写多平台GUI桌面应用程序，请在此处查阅启发本文的书。
