介绍

先决条件

应用程序编码

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

2.将ElectronNET.API NuGet程序包添加到项目中

要添加NuGet依赖项，可以使用Visual Studio 的熟悉的“NuGet package Manager”：

您还必须安装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 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 HTMLvar 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 JSvar 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 appElectron.App.Exit();}},}},new MenuItem {Label = "Help", Submenu = new MenuItem[] {new MenuItem{Label = "About",Accelerator = "CmdOrCtrl+R",Click = async () =>{// open native  message  windowsvar 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.com/cke4/builder上在线找到该应用程序。

创建适当的配置文件后，必须将其添加到MVC项目中（在客户端）。

实现编辑器所需的组件（js，css，img）必须添加到项目中。这是用于将ckeditor4 HTML编辑器添加到项目中的客户端依赖项的文件树状结构。

6.在主线程和渲染线程之间建立通信

有两个功能需要C＃（主进程）和Html / Js（Render进程）之间的通信。

打开文件
保存存档

这是实现这两个功能所需的两个过程之间的通信模式：

打开文件

保存存档

7.使用文件操作对象

编辑器集成了基本文件的操作：打开，保存。为这些操作实现了一个专用类：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桌面应用程序，请在此处查阅启发本文的书。

带有.NET Core 3和Electron.NET的多平台桌面HTML编辑器相关推荐

Electron项目怎样打包成桌面exe应用
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/a ...
Blazor 服务器上带有 EF Core 的 Azure Cosmos DB
目录快速入门介绍行星文档 Azure Cosmos DB设置实体框架核心数据服务加载文档查询文档创建文档更新文档删除文档搜索元数据(标签或作者) 处理文件审核 Blazor Jav ...
带有.NET Core App的Identity Server 4
什么是Identity Server? Identity Server 4(IdS4)是用于.NET Core应用程序的OpenID Connect和OAuth 2.0框架.它是一种身份验证服务,可为 ...
【译】探索更轻量的Electron替代品来托管Blazor桌面应用程序
本文翻译自 ASP.NET 项目组的 Steve Sanderson 的博客,发表于 2019 年 11 月 1 日.Steve Sanderson 是 Blazor 最早的创造者.这篇文章发布后还有 ...
使用AspNet Core或纯静态HTML文件的跨平台桌面应用程序
目录介绍背景解决方案的说明 A C#类来控制Chrome浏览器将Chrome与.Net Core控制台应用程序(静态Web应用程序)一起使用将Chrome与AspNet Core MVC应 ...
微软发布PowerShell Core第一个版本：支持多平台开发
微软旗下的PowerShell团队正式宣布推出PowerShell Core 6.0,非常诡异的是这明明是Core的第一个版本,但是却用了一个6.0后缀的版本号. "这是我们对PowerSh ...
asp 文本转时间_ASP.NET Core界面开发，DevExpress v19.2增强富文本编辑器功能
由轻量级JavaScript小部件提供支持的70+个高性能DevExpress ASP.NET Core Controls,包含功能完善的报表平台,因此您可以再最短时间内交付响应迅速的业务线应用程序. ...
使用 Vue 和 Electron 开发一款简单的 Markdown 编辑器
2021SC@SDUSC 本文并不涉及自己设计一套 Markdown 渲染组件的部分,Markdown 渲染组件可通过 marked 和 highlight.js 自行实现.但本文重点在于如何使用 E ...
Electron打包（windows平台）
文章目录一.设置npm环境(为了解决打包时下载某些依赖包慢.下载不了的问题): 二.使用electron-packager打包: 1.安装electron-packager 2.快速打包命令: 3. ...

带有.NET Core 3和Electron.NET的多平台桌面HTML编辑器

介绍

先决条件

应用程序编码

1.创建ASP.NET MVC应用程序

2.将ElectronNET.API NuGet程序包添加到项目中

3.在应用程序中实例化ElectronNET.API

4.将自定义菜单添加到应用程序

5.在您的应用程序中添加JavaScript HTML编辑器

6.在主线程和渲染线程之间建立通信

7.使用文件操作对象

8.生成.NET Core 3 / Electron.NET应用程序

当前问题

结论

带有.NET Core 3和Electron.NET的多平台桌面HTML编辑器相关推荐

最新文章

热门文章