https://www.d2school.com/lesson?sn=b5822e7a711ba96da7962e23e0518e54#article-toc-1_1
准备
开发包下载
webview 暂未进入 msys2 的仓库，需到 github https://github.com/webview/webview 克隆项目或下载 zip 包。
下载后，将其 core/include 目录解压到磁盘上某个目录下即可，无需编译。
Windows下开发
在 Windows 下使用 webview 库开发，还需要下载 Windows 的一个 .NET 库（仅开发时需要，我们的程序编译后无需依赖它）。链接：https://www.nuget.org/api/v2/package/Microsoft.Web.WebView2
下载后扩展名为 .nupkg，但可用类似 7Zip 的工具打开后，同样找个目录解压。
Linux 下开发
需安装 GTK3 或 GTK4（建议）的开发包，以 ubuntu 为例，命令为：
sudo apt install libWebKitGTK-devl
macOS 下开发
无需额外下载开发库，系统自带有官方浏览器 Safari 即可。
最小实例
项目结构
- webview # 来自于 https://github.com/webview/webview
- webview2-sdk # 来自于 https://www.nuget.org/api/v2/package/Microsoft.Web.WebView2
- main.cpp
- Sconstruct
main.cpp
#include "webview/webview.h"
#include <iostream>
int main() {
bool debugMode = false;
// #ifndef NDEBUG
debugMode = true;
std::system("chcp 65001 >nul");
// #endif
// 创建一个简单的 Webview 窗口
webview::webview w(debugMode, nullptr);
if (!w.window().ok()) {
std::cout << "window not ok" << std::endl;
return 1;
}
// w.navigate("https://www.d2school.com");
w.set_title("Hello WebView GUI");
w.set_size(400, 300, WEBVIEW_HINT_NONE);
w.set_html("<html><body><h1>Hello</h1></body></html>");
w.run();
}
Sconstruct
import os
from SCons.Script import *
# 项目名称
target = 'hello'
# 编译器标志
env = Environment(
CXXFLAGS=['-std=c++17'],
# CCFLAGS=['-Wall'],
# LINKFLAGS=['-static', '-static-libgcc', '-static-libstdc++'],
)
# 根据构建类型决定是否启用控制台窗口
build_type = ARGUMENTS.get('build', 'Release').capitalize() # 默认 Release
if build_type not in ('Debug', 'Release'):
print("Warning: build type must be 'Debug' or 'Release'. Defaulting to Release.")
build_type = 'Release'
if build_type == 'Debug':
# 控制台程序
pass # 默认就是控制台
else:
# GUI 程序（无控制台）
env.Append(LINKFLAGS=['-mwindows'])
# 添加头文件路径
env.Append(CPPPATH=[
'webview/core/include',
'webview2-sdk/build/native/include',
])
# 源文件
sources = ['main.cpp']
# 链接 Windows 系统库
libs = ['advapi32', 'ole32', 'shell32', 'shlwapi', 'user32', 'version']
# 构建目标
program = env.Program(target, source=sources, LIBS=libs)
调试
启用 DevTools 调试，直接右键页面 → “检查”（如果上下文菜单启用），或者在 HTML 中加入：
<script>
// 在 WebView2 中启用 DevTools
if (window.chrome && chrome.webview) {
chrome.webview.postMessage('debug');
}
</script>
C++ API
// 类型定义 参考：webview/core/include/webview/backends.hh
namespace webview {
using webview = browser_engine;
}
// 创建实例
webview::webview w(debugMode, nullptr);
// 设置窗口
w.set_title("Hello WebView GUI");
w.set_size(400, 300, WEBVIEW_HINT_NONE);
// 设置内容
w.set_html("<h1>Hello, Webview</h1>");
w.navigate("https://bing.com");
C API
// 类型定义
typedef void *webview_t;
// 创建实例
webview = webview_create(debug_enabled ? 1 : 0, nullptr);
// 设置窗口
webview_set_size(webview, 400, 300, WEBVIEW_HINT_NONE);
// 设置内容
webview_set_html(webview, "<h1>Hello, Webview</h1>");
webview_navigate(webview, "https://bing.com");
