WebView

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 NDEBUGdebugMode = 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 中启用 DevToolsif (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");

Tauri

https://www.devze.com/dev/1753894ILMK4G1ko

资讯详情

准备