使用 .NET Core 3 和 Electron.NET 的多平台桌面 HTML 编辑器
4.93/5 (10投票s)
从零开始使用 .NET Core 3 和 Electron.NET 开发多平台桌面应用程序
引言
借助 .NET Core 3，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 的（如果您使用 .NET Core 的 3.1 版本，它将无法工作…甚至无法安装）。
应用程序编码
应用程序的开发可以描述为一个简单的过程。
1. 创建 ASP.NET MVC 应用程序
首先，您需要创建一个标准的 .NET Core 3 ASP.NET MVC 应用程序，例如使用以下命令，但您也可以使用 Visual Studio。
dotnet new mvc -o Multiplatform.HtmlEditor
2. 将 ElectronNET.API NuGet 程序包添加到项目中
要添加 NuGet 依赖项，您可以使用 Visual Studio 中熟悉的“NuGet 包管理器”。
您还需要安装 CLI 工具。
添加所需的 dotnet CLI Electron.NET 全局工具
dotnet tool install ElectronNET.CLI -g --version 5.30.1
3. 在应用程序中实例化 ElectronNET.API
这是通过在 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 控制器实现的：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();
}
}
请注意，菜单控制器可用于调用（同步或异步）应用程序的多个功能。
5. 将 JavaScript HTML 编辑器添加到您的应用程序
HTML 编辑器本身是一个免费的 JavaScript 组件：CKeditor4。
该网站允许您通过生成一个 config.js 文件来个性化编辑器的菜单。此文件可直接从 ckeditor4 网站下载：https://github.com/ckeditor/ckeditor4。
一个专门的网站允许您使用专用的图形界面配置编辑器。您可以在线找到此应用程序：https://ckeditor.npmjs.net.cn/cke4/builder。
创建适当的配置文件后，您必须将其添加到 MVC 项目（客户端）。
为实现编辑器，所需的组件（js、css、img）必须添加到项目中。这是将 ckeditor4 HTML 编辑器添加到项目中的客户端依赖项的文件结构。
6. 建立主线程和渲染线程之间的通信
有两个函数需要 C#（主进程）和 Html/Js（渲染进程）之间的通信。
- 打开文件
- 保存文件
这是实现这两个功能所需的进程间通信的示意图。
| 打开文件
|
| 保存文件
|
7. 使用文件操作对象
该编辑器集成了基本的文件操作：打开、保存。为此操作实现了一个专用类：FileOperations.cs。这个静态对象集成了示例所需的两个匹配方法。
一旦每个步骤都成功完成（并经过测试），应用程序就完成了，嗯，几乎完成了，您需要构建项目，并且关于您想要生成的可执行文件的类型，这可能有点棘手。
8. 构建 .NET Core 3 / Electron.NET 应用程序
对于本文的第一个版本，暴露了最明显（实际上是基本的）可执行部署类型。
这部分在 ElectronNET GitHub 网站上有很好的文档记录。
- 首先，您需要使用以下命令为 ASP.NET MVC 应用程序创建 Electron 配置文件
electronize init
- 之后，您可以使用以下命令执行应用程序
electronize start
此命令将执行构建和项目还原，第一次执行时可能需要一些时间（需要加载 Electron 包装器）。
当前问题
- 我还没能更新应用程序的图标（正在处理中）。
- 在 Mac OS X 上，菜单显示为“Electron”而不是“File”。
结论
Electron.NET 的使用似乎是 ASP.NET 开发人员开发多平台桌面应用程序（适用于 Windows、Linux 和 MacOS X）的首选解决方案。Electron.NET 使之成为可能。
通过将 Web 应用程序封装到桌面应用程序中，许多 JavaScript 组件可以重用或回收用于桌面开发，这是这种方法的一个优点。有大量的 JavaScript 组件可以很好地添加到桌面应用程序中（用于导航、GUI 效果…）。
然而，Electron.NET 的使用并未针对 Windows 平台进行优化，并且原始项目中的许多方法在 .NET Core 包装器中不可用。此外，Elentron.NET 要求您掌握 JavaScript 编程，而不是 ASP.NET C# 知识。
但是 Electron.NET 是一个很棒的包装器，如果您想从您的网站开发中生成桌面应用程序，可以使用它。
如果 Electron.NET 不符合您的期望，还有许多其他解决方案可用于使用 C# .NET Core 3 编写多平台 GUI 桌面应用程序，请在此处查看启发本文的书籍：here。
历史
- 2020 年 1 月 6 日：初稿