如何使用 HTML/CSS UI 构建原生 C++ 应用程序？答案

【问题标题】：How to build native C++ apps with HTML/CSS UI?如何使用 HTML/CSS UI 构建原生 C++ 应用程序？
【发布时间】：2013-07-05 05:32:58
【问题描述】：

是否可以在使用 HTML 和 CSS 作为用户界面的同时开发 C++ 程序？我知道使用 Webkit 容器使用 Javascript 进行编程，但我对 C++ 开发非常感兴趣。

当我在 Windows 下开发时，我就爱上了 C# WPF，但现在我搬到了 Linux，我还没有找到一个很好的工具来使用接口标记。为此，我想将非常轻量级且易于使用的 HTML 和 CSS 与 C++ 代码和 WPF 之类的东西混合使用。

哦，还有一件事：我正在寻找桌面开发，而不是 Web。

【问题讨论】：

标签： c++ html css user-interface desktop-application

【解决方案1】：

是的，这是可能的。你想要的是一个 C++ Web 框架。您可以先查看CppCMS——一个免费的高性能 Web 开发框架（不是 CMS），旨在快速 Web 应用程序开发。

编辑：在澄清问题后，我认为Awesomium 将非常适合您的需求。

您可以通过嵌入 WebKit（或 Gecko）来实现相同的功能，但据我所知，这正是 Awesomium 在幕后所做的。

另一种选择是librocket——一个专为游戏应用程序设计的 C++ 接口中间件包。您可以从描述中猜到它非常适合游戏或实时应用程序。

【讨论】：

但这会编译成可执行文件吗？我正在寻找桌面，而不是网络。
您希望用户能够启动浏览器并导航到localhost 并使用您的应用程序界面吗？还是您希望用户打开可执行文件并显示 Web 界面？
@RobertDinu 我想他想用 C++ 构建一个桌面应用程序并用 HTML/CSS 创建用户界面
@RobertDinu：还有一个更小/更轻的库，称为 libRocket (librocket.com)，它可能对 OP 有用。如果您认为合适，可以将其添加到您的答案中。
我可以看到这将如何节省大量时间。这种方法会在任何时候导致问题吗？

【解决方案2】：

Sciter 就是这样——带有 C/C++ API 的可嵌入 HTML/CSS 引擎。紧凑且多平台。

然后检查this article。

Sciter 具有相同的 feature set as WPF，但使用 HTML/CSS 而不是 XAML 并使用本机 API。

开箱即用的功能：

HTML、CSS、SVG、aPNG（动画 PNG）、图像精灵，
<plaintext> - 语法高亮编辑器，
<htmlarea> - 所见即所得的 HTML 编辑器，
<frame type=pager> - 打印预览和 HTML/CSS 打印，
动画，
HTTP 客户端、REST/JSON 客户端、WebSocket 的、DataSockets，
等

在 Windows、MacOS 和 Linux 上运行来自相同来源的 Sciter UI 的相同应用程序：

免责声明：我是 Sciter Engine 的作者。

2021 年更新：您还可以使用Sciter.JS，它是使用标准 JavaScript (ES2020) 脚本引擎的 Sciter 版本。

【讨论】：

我是 C++ 的初学者，但我发现文档很少而且对初学者来说很可怕。文档应该从如何在代码块甚至 shell 中运行演示开始，看看它是否有效......请在您的项目中添加更多营销工作
@repzero 查看这篇文章codeproject.com/Articles/859098/…，我觉得适合C++初学者。
@repzero 对于代码块，只需在该 IDE 中打开 {sciter-sdk}/demos/usciter/usciter.cbp，选择 Release64 目标并单击“构建并运行”按钮 - 您应该会看到应用程序正在运行。
@c-smile 感谢您的指导。当我尝试在代码块中运行项目时，我收到一个致命错误“gtk/gtk.h no such file or directory”，此错误来自在“sciter-x-types.h”头文件中包含语句...我正在运行 debian jessie..我有一个名为 gtk 的文件夹，其中包含 gtk.h 文件。这个文件夹位于'/user/include/gtk-2.o/gtk'..有什么建议吗？
在 Linux Sciter 上需要 GTK3。如果要构建示例，则需要 gtk 开发包，请尝试sudo apt-get install libgtk-3-dev

【解决方案3】：

我认为Electron 将是对其他答案的一个很好的补充。

它使用 NodeJS 来运行 Webkit 窗口。 Electron 本身只是 html/css/js，但您可以在您的 Electron 应用程序中使用任何节点模块 - 包括自定义的、本机编译的 C++ 代码。嵌入 C++ 代码的可能模块是 node-gyp。

但是请注意，与其他答案相比，此工作流程可能包含更多的 JS。

我最喜欢的文本编辑器Atom 是用 Electron 制作的。

【讨论】：

【解决方案4】：

您可以使用Chromium Embedded Framework 在您的应用中嵌入 HTML5 内容。您将获得 Chromium 的强大功能和速度，并能够以与开发 Web 应用程序相同的方式构建 GUI 应用程序。

【讨论】：

Chromium 的威力和速度 ... 和大小 ;)

【解决方案5】：

我建议查看Ultralight HTML UI Engine
非开源，可用于 C++。支持 OpenGL 和 DirectX 渲染。

Ultralight 是将 HTML UI 集成到您的 C++ 应用程序。

它是由 Awesomium 的创建者制作的，他不幸决定删除 Awesomium。

如果您需要更重的东西，我建议您查看CEF。这是一个非常强大（和开源）的工具。

【讨论】：

考虑到 Awesomium 的能力，它是封闭源代码非常非常不幸:(
我尝试了 Ultralight 但失败了。由于 lib-not-found 错误，甚至无法运行浏览器示例。包含文件夹肯定在我的 PATH 变量中。尝试编译基本应用程序但没有成功。编译器找不到没有声明的类设置，因为我可以使用 grep 证明。 (Ubuntu 18.4)
@testalucida 您可以在 Ultralight 的 Slack 工作区寻求支持。

【解决方案6】：

2021 年写作。

您可以使用 Web 程序集 (https://webassembly.org/)。 Web 程序集或 WASM 允许您使用任何语言（例如 C++）编写应用程序。然后将其编译为浏览器可以运行的 Web 程序集。像其他程序集一样考虑 wasm，但对于浏览器。在撰写此答案时，所有主流浏览器都附带 WASM 引擎，因此入门不会遇到任何问题。

请参阅 C++ 的 Web 汇编官方文档：

免责声明：我与 WASM 没有任何隶属关系

【讨论】：

【解决方案7】：

我建议RmlUI

它是 librocket 的一个活跃分支，具有更多功能。它非常模块化，您可以自己处理渲染、事件处理和用户输入（或从提供的示例中复制一个）。

注意：RmlUI 不支持完整的 HTML5/CSS3 规范，只支持其中的一个子集。支持动画。

【讨论】：