使用wxWebView在C++应用程序中显示网页内容
@
引言
在现代应用程序开发中，显示Web内容已经成为一种常见需求。wxWidgets是一个跨平台的C++库，它提供了许多UI组件，其中包括一个强大的wxWebView控件，可以帮助您在C++应用程序中嵌入Web内容。无论您是要显示在线文档、嵌入Web应用程序，还是只是在您的应用程序中显示一些在线信息，wxWebView都可以满足您的需求。
1.1 什么是wxWebView？
wxWebView是wxWidgets库中的一个重要组件，它允许您在应用程序内部嵌入Web内容。与使用外部浏览器打开链接不同，wxWebView允许您在应用程序的界面内部显示HTML、CSS和JavaScript等Web技术创建的内容。这意味着您可以实现与Web交互的丰富功能，而不必离开您的应用程序。
1.2 为什么使用wxWebView？
使用wxWebView具有许多优点，其中一些包括：
-
跨平台性： wxWebView可以在不同操作系统上工作，包括Windows、Linux和macOS，因此您可以轻松创建跨平台的应用程序。
-
内嵌性： 您可以将Web内容无缝集成到您的应用程序界面中，为用户提供一致的体验。
-
交互性： wxWebView支持JavaScript，因此您可以创建与Web内容进行交互的功能。
-
自定义性： 您可以选择不同的后端实现，包括WebKit、Edge和IE（仅限Windows），以满足您的特定需求。
准备工作
2.1使用vcpkg 安装和配置wxWidgets
vcpkg是一个强大的开源 C/C++ 依赖项管理器，它可以帮助您轻松地安装和配置 wxWidgets 库。以下是一些关键步骤：
首先，您需要获取 Vcpkg 工具，并将其配置在系统中。这可以通过以下命令完成：
> git clone https://github.com/microsoft/vcpkg
> .\vcpkg\bootstrap-vcpkg.bat
装 wxWidgets 和 wxWebView：使用 Vcpkg 安装 wxWidgets 和 wxWebView，这将处理所有依赖关系并确保库可用。使用以下命令安装：
vcpkg install wxwidgets[webview]
已经安装过，需要重新编译安装，使用一下命令安装：
vcpkg install wxwidgets[webview] --recurse
2.2 检查是否可用
以Edge后端示例
wxWebView::IsBackendAvailable(wxWebViewBackendEdge)
可用返回true
使用wxWebView
3.1 使用CMake构建项目
首先，确保已安装并配置了 CMake。接下来，可以按照以下步骤在 CMake 项目中添加 wxWebView 支持：
# 查找并包含wxWidgets库
find_package(wxWidgets COMPONENTS REQUIRED webview core base)
find_package(unofficial-webview2 COMPONENTS REQUIRED)
include(${wxWidgets_USE_FILE})
# 添加可执行文件并指定源文件
add_executable(wxTest WIN32
MyApp.cpp
MyFrame.cpp
CustomFrame.cpp
custom_title_bar.cpp
login/login_dialog.cpp
login/login_dialog_base.cpp)
target_link_libraries(wxTest ${wxWidgets_LIBRARIES})
# 底下这些按理说 使用 target_link_libraries(wxTest unofficial::webview2::webview2)就可以了，但是
# 我使用的话无法将WebView2Loader.dll这个文件复制到应用程序可执行文件目录下
get_target_property(WEBVIEW2_IMPORTED_LOCATION unofficial::webview2::webview2 IMPORTED_LOCATION)
get_target_property(WEBVIEW2_IMPORTED_IMPLIB unofficial::webview2::webview2 IMPORTED_IMPLIB)
get_target_property(WEBVIEW2_INTERFACE_INCLUDE_DIRECTORIES unofficial::webview2::webview2 INTERFACE_INCLUDE_DIRECTORIES)
include_directories(${WEBVIEW2_INTERFACE_INCLUDE_DIRECTORIES})
target_link_libraries(wxTest ${WEBVIEW2_IMPORTED_IMPLIB})
add_custom_command(TARGET wxTest POST_BUILD
COMMAND ${CMAKE_COMMAND} -E copy_if_different
${WEBVIEW2_IMPORTED_LOCATION}
$<TARGET_FILE_DIR:wxTest>)
3.2 其他方式启用WebView
- 使用cmake构建wxWidgets的话在CMakeLists.txt这个文件中启用wxUSE_WEBVIEW_EDGE，应该就是将他的值设置为1（未尝试）
set(wxUSE_WEBVIEW_EDGE 1) 或者 set(wxUSE_WEBVIEW_EDGE ON)
- 不使用以上方式的话，需要先去WebView2 SDK下载nuget 包，然后将这个包解压到
wxWidgets/3rdparty/webview23rdparty/webview2/build/native/include/WebView2.h
在setup.h 这个文件里启用wxUSE_WEBVIEW_EDGE
复制对应的文件(WebView2Loader.dll) 到可执行文件目录下，具体请查看官网: wxWebView Class Reference
编写示例代码
#include <wx/wx.h>
#include <wx/webview.h>
class MyApp : public wxApp
{
public:
bool OnInit() override {
wxLog::SetActiveTarget(new wxLogStderr);
wxFrame* frame = new wxFrame(nullptr, wxID_ANY, "我的网页应用程序", wxPoint(0, 0), wxSize(800, 600));
bool IsBackendAvailable = wxWebView::IsBackendAvailable(wxWebViewBackendEdge);
//判断后端是否可用
if (IsBackendAvailable) {
//创建一个webview
wxWebView* web = wxWebView::New(frame, wxID_ANY);
//加载网址
web->LoadURL("https://www.example.com/");
}
//显示窗口
frame->Show(true);
wxLogMessage("是否可用？ %u", IsBackendAvailable);
return true;
}
};
wxIMPLEMENT_APP(MyApp);