Chromely - Electron 的轻量级替代品

• 下载应用 - 252.5 KB
• Chromely Github

引言

Chromely 是一个“轻量级”的 .NET/.NET Core HTML5 Chromium 桌面框架，可替代 Electron.NET 和 Electron，面向 .NET/.NET Core 开发人员。

Chromely 在不使用 WinForms 或 WPF 的情况下构建 HTML5 桌面应用。Chromely 使用 Windows 和 Linux 原生 GUI API 作为 Chromium 的宿主。它使用 CEF 实现的 Xilium.CefGlue 和 CefSharp 来嵌入 Chromium。

使用 Chromely，您可以构建（带或不带 Node/NPM 的）单页应用程序 (SPA) HTML5 桌面应用。使用 Angular、React、Vue 或类似 JavaScript 框架构建 SPA 应用非常容易。您可以使用 Visual Studio Code 或任何熟悉的 IDE，只要 Chromely 知道编译/打包后的文件中的入口 HTML 文件即可。更多信息，请参阅 - Chromely-Apps。

背景

在开发 WPF 项目 SugarDesk 时，我曾尝试将 SugarCrm 报表集成到我的项目中，当时最吸引我的选项是使用 Electron。然后，我发现了 CefSharp，但不满意其局限性——您只能使用 位图渲染，而不是纯 HTML 渲染。简而言之，我最终创建了一个不带 WPF 的解决方案，并决定与社区分享。

Electron 的替代品？

是的，算是吧。

• Electron 是真正的跨平台，而 Chromely 目前只支持 Windows 和 Linux。
• Chromely 仅适用于 .NET/.NET Core 开发。

相较于 Electron 的一些优势：

• Chromely 不需要 Node 或 NPM。最终安装和使用都不需要 Node。
• Chromely 非常轻量。要在 .NET 或 .NET Core 中使用 Electron，您需要 Edge.js 等库，或者像 Electron.NET 中那样在 ASP.NET NET 中托管 Electron。Chromely 使用精简的原生 GUI 宿主。
  这里的“轻量级”指的是简洁性——用更少的东西实现相同的功能，如果您愿意这么说的话。Chromely 仍然依赖 Chromium，在这方面不一定更轻。
• 由于这是在 .NET/.NET Core 中完成的，.NET/.NET Core 开发人员无需学习新技能。
• 方便 WPF/WinForms 开发人员用很少或无需 Web 开发经验即可开始 HTML5 桌面开发。

使用代码

下载、构建并运行附带的源代码，或按照以下步骤操作。

此处描述的步骤将针对 CefSharp Windows 应用。对于 CefGlue 和 SPA 应用，请查看 Chromely GitHub。

1. 创建 .NET 控制台应用程序
2. 确保构建平台目标为 x64。
3. 在项目属性中，将“控制台应用程序”更改为“Windows 应用程序”[项目 -> 属性 -> 应用程序 -> 输出类型：“Windows 应用程序”]。
4. 从 Nuget 添加 Chromely.CefSharp.Winapi。（可能会显示警告，如果发生这种情况，请卸载项目然后重新加载。）
   • Chromely.CefSharp.Winapi 具有以下依赖项，应予以验证：
     • 来自 Nuget 的 Winapi（确保安装最低 4.0 版本，该版本为 .NET Standard 发布）
     • 来自 Nuget 的 CefSharp.Common。
     • 来自 Nuget 的 Chromely.Core
5. 在项目根目录下创建一个 index.html 文件。将 文件 的内容复制到 index.html。确保 index.html 设置为“始终复制”或“仅当较新版本时复制”。
6. 将以下代码片段添加到 Program.cs 的 Main 函数中。

     1.  class Program
     2.  {
     3.    static int Main(string[] args)
     4.    {
     5.        string appDirectory = AppDomain.CurrentDomain.BaseDirectory;
     6.        string startUrl = $"file:///{appDirectory}index.html";
     7.
     8.        ChromelyConfiguration config = ChromelyConfiguration
                                             .Create()
                                             .WithAppArgs(args)
                                             .WithHostSize(1000, 600)
                                             .WithStartUrl(startUrl);
   
     9.        var factory = WinapiHostFactory.Init();
     10.       using (var window = factory.CreateWindow(() => new CefSharpBrowserHost(config),
                     "chromely", constructionParams: new FrameWindowConstructionParams()))
               {
     11.           window.SetSize(config.HostWidth, config.HostHeight);
     12.           window.CenterToScreen();
     13.           window.Show();
     14.           return new EventLoop().Run(window);
               }
           }
       }
   
   // Creates Chromely window of size 1000 x 600 pixels.
   // Sets the window title to "chromely"
   // Sets start URL to "index.html"
   // Centers the window 

7. 构建项目。
8. 运行构建的 EXE 文件。
9. 如果成功，将显示以下内容：

   

它是如何工作的？

精简窗口/宿主

Chromely 基于 CefGlue/CefSharp。两者都基于实现 Chromium 的 CEF。 Chromely 的方法是使用一个非常精简的原生 GUI 宿主来创建 HTML5 桌面应用。以 Win32 GUI API 为例

    10.   var window = factory.CreateWindow(() => new CefSharpBrowserHost(config),
 

这使用 WinApi 创建了一个窗口/宿主

配置

宿主和 CEF 都是可配置的。宿主属性（如大小、图标）可以在配置类中设置。CEF 命令行参数和设置也是可配置的。配置详情可在 Chromely Configuration 找到。

      5.        string appDirectory = AppDomain.CurrentDomain.BaseDirectory;
      6.        string startUrl = $"file:///{appDirectory}index.html";
      7.
      8.        ChromelyConfiguration config = ChromelyConfiguration
                                          .Create()
                                          .WithAppArgs(args)
                                          .WithHostSize(1000, 600)
                                          .WithStartUrl(startUrl);
 

运行窗口/宿主

      11.           window.SetSize(config.HostWidth, config.HostHeight);
      12.           window.CenterToScreen();
      13.           window.Show();
      14.           return new EventLoop().Run(window);
 

此代码片段设置窗口大小、居中窗口、显示窗口，并以无限循环运行窗口直到关闭。

结论

这是对 Chromely 的简要介绍。 Chromely 提供了一个完整简洁/轻量级的框架，作为使用 Chromium 嵌入式框架 (CEF) 的一种不同方法，以实现现代 HTML5 GUI，而无需通常的 WPF 和 WinForms。我打算在未来的文章中重点介绍 Chromely 的功能，但是，Chromely github 网站 包含更多信息。

 

关注点

Chromely 解决了哪些问题？很多，部分或全部取决于您从哪个角度看待它。如果您想开发纯 HTML5 桌面应用，Chromely 是您的选择。如果您想在需要 WPF 或 WinForms 控件的项目中添加/集成 HTML5，那么 NeutroniumCore 或 NanUI 等替代方案可能是更好的选择。

它与其他纯 HTML5 桌面框架相比如何？如前所述，Electron 也许是纯跨平台桌面框架的最大参与者。 Chromely 为 .NET/.NET Core 开发提供了比 Electron 更轻量级的替代方案。此外，Chromely 不是纯跨平台——目前仅支持 Windows 和 Linux。

它如何帮助开发者？ Chromely 的前提是，在不使用 Node/NPM 的情况下，转向 HTML/Web 领域 UI 开发人员将更容易过渡，反之亦然。

参考文献

1. WinApi - https://github.com/prasannavl/WinApi
2. Cef - https://bitbucket.org/chromiumembedded/cef
3. CefSharp - https://github.com/cefsharp/CefSharp

历史

1. 2018 年 5 月 13 日 - 文章提交。
2. 2018 年 5 月 14 日 - 添加了 Chromely Github 链接。
3. 2018 年 5 月 23 日 - 修正了拼写错误。
4. 2018 年 5 月 28 日 - 更新了文章。
5. 2018 年 5 月 29 日 - 修正了拼写错误。