Sdl窗口实现web view

关注

原创 2025-10-26 21:07:10 1k 阅读 AI 写同款· GEO 优化 ›

嵌入式图形库开发绚丽界面(lvgl、emwin、awtk) 早些年的单片机开发中，很多都是使用文字菜单界面，这种界面让人感觉非常的朴实无华，内容言简意赅，如果使用图形库进行开发，你的产品一下子就让别人觉得有点高级，更容易去接收它。对于现在来说，很多的嵌入式图形库都可以做出绚丽的界面，占用RAM小，网上资料也多，学习难度不大。下面仅介绍几款常用的图形库。阅读详情

跟AI 1番探索之后发现，这个比较轻量级的，这个能实现我们需求的，通常有这个we bk it和，Mini blink，但是呢，后者因为过度的这个简化，它可能没有一些音视频的控制功能，未经考证，所以我们还是使用这个we bk it来进行相关操作

1. WebKit 预编译包官网/下载地址

- WebKitGTK+ 预编译包（Windows 版）官方获取渠道：webkitgtk.org

之后点击右下角的releases stabletarball

里面的这个webkitGTK 2.50.1，啊，之后浏览器开始自动下载，下载完成之后解压

不想下载的同学，可以直接搜我的免费资源

2. Windows 10 + VS Code + CMake 配置 WebKit 预编译环境步骤

前提：已配置好 SDL、LVGL、C++ SDK 和 CMake 项目结构，仅需新增 WebKit 依赖。

步骤 1：编译

由于我们是在WINDOWS端调试，我们直接把这个报错信息给它注释掉，设置成win

之后呢，又显示缺少strawberry perl

我们看到这个官网进去有一个latest release，我们点击这个msi文件下载下来

看到这个说明PERl的安装已经完成了注意此时一定要重启vs code不然是识别不到的。

随时出现了这种奇怪的问题我们只需要删除build文件夹再重新刷新一下cm ake插件栏然后项目状态就可以找见

之后呢，再点击一下配置按钮，就可以为我们当前的web ki TG TK项目来进行一个配置

此时我们发现依旧报错，他似乎总是默认的匹配到了我们另外一个插件eide当中使用的perl，此时，我们尝试使用set指令

set(PERL_EXECUTABLE "你的perl安装目录/bin/perl.exe" CACHE FILEPATH "Path to Perl executable")

此时又显示没有装这个ruby，最低需要2.5的版本

这个的安装呢，也是非常的简单，直接搜索它的官网，然后就能找到一个链接，点击下载就是了

为了避免后续的一些问题，我们还是选择这个with devkit来下载，但是呢，最终发现这个链接是github的链接，实在是没有办法下下来，最终我们在gitcode的这成功找见了它的一个镜像，我们直接用它就好

结果呢，又又又又又报错了，这次又显示是一个叫做g perf，的一个东西，它没有安装，紧接着呢，我们一定要去搜gperf WINDOWS，要不然你下载的是linux的，没有办法编译

这时候呢，一定要注意，我们成功安装这个gperf之后一定要在cmake里面按照上面的方式添加

set(GPERF_ EXECUTABLE 你的gperf.exe的路径)

否则在配置的时候是识别不到你的这个exe

本以为一切已经万事大吉，结果最终再次发生报错，说是没有权限，这大概是因为我的整个操作都是在7z点zip这个软件解码之后没有成功复制，只好在这个WINDOWS自带的c目录底下的temp当中操作的大概可可能，这是一个平常应用没有办法操作到的地方，而且有一个更恶心的情况就是WINDOWS你把temp里面的东西是没有办法拷贝到桌面的几次均为失败，你只能给它复制到别的盘里边

步骤 2：配置 CMakeLists.txt（关联 WebKit 依赖）

在已有 CMake 项目的 CMakeLists.txt 中，新增 WebKit 的头文件路径、库路径和链接库，示例代码如下（需替换你的 WebKit 解压路径）：

cmake
# 1. 设置 WebKit 预编译包路径（替换为你的实际解压路径）
set(WEBKIT_DIR "D:/ThirdParty/webkitgtk-2.42.5-win64")

# 2. 引入 WebKit 头文件（让编译器找到 #include <webkit2/webkit2.h>）
include_directories(${WEBKIT_DIR}/include)
include_directories(${WEBKIT_DIR}/include/webkit2)
include_directories(${WEBKIT_DIR}/include/gtk-3.0) # WebKit 依赖 GTK，需引入其头文件

# 3. 链接 WebKit 库路径（让链接器找到 .lib 文件）
link_directories(${WEBKIT_DIR}/lib)

# 4. 关联 WebKit 所需的库文件（核心库，无需改）
set(WEBKIT_LIBS
webkit2gtk-4.0.lib # WebKit 核心库
gtk-3.lib # 依赖的 GTK 库
gdk-3.lib # 依赖的 GDK 库
gobject-2.0.lib # 依赖的 GLib 库
glib-2.0.lib # 依赖的 GLib 库
)

# 5. 把 WebKit 库链接到你的项目目标（替换为你的项目目标名，如 "tv_box_demo"）
target_link_libraries(你的项目目标名
${WEBKIT_LIBS}
# 保留你已有的 SDL、LVGL 等链接库
SDL2.lib
lvgl.lib
)

步骤 3：处理动态库（避免运行时“找不到 .dll”错误）

WebKit 预编译包的 bin  目录下有大量 .dll  文件（如 webkit2gtk-4.0-37.dll 、 gtk-3-0.dll ），需让程序运行时能找到这些文件，二选一即可：

1. 简单方案：将 D:\ThirdParty\webkitgtk-2.42.5-win64\bin  下的所有 .dll 文件，复制到你的 CMake 项目编译输出目录（如 build/Debug  或 build/Release ，与生成的 .exe  同目录）；
2. 长效方案：将 D:\ThirdParty\webkitgtk-2.42.5-win64\bin  添加到系统环境变量 Path  中（添加后需重启 VS Code，让环境变量生效）。

步骤 4：验证配置（写测试代码编译运行）

在项目中写一段简单的 WebKit 初始化代码，验证是否能正常编译（无需运行，先确认无编译错误）：

cpp
#include <webkit2/webkit2.h>
#include <gtk/gtk.h>

int main(int argc, char* argv[]) {
// 初始化 GTK（WebKit 依赖 GTK）
gtk_init(&argc, &argv);
// 创建 WebView 实例（验证头文件和库是否关联成功）
WebKitWebView* web_view = WEBKIT_WEB_VIEW(webkit_web_view_new());
// 释放资源
g_object_unref(web_view);
return 0;
}

在 VS Code 中通过 CMake 编译项目，若无“头文件找不到”“未定义符号”等错误，说明 WebKit 预编译环境配置完成。

需要我帮你生成一份适配你现有项目结构的 CMakeLists.txt 片段，或者补充 WebKit 与 SDL 结合的测试代码吗？