使用wxWebView在C++应用程序中显示网页内容

@
目录

• 引言
  
  
  
  • 1.1 什么是wxWebView？
    
  • 1.2 为什么使用wxWebView？
    
  
  
• 准备工作
  
  
  
  • 2.1使用vcpkg 安装和配置wxWidgets
    
  • 2.2 检查是否可用
    
  
  
• 使用wxWebView
  
  
  
  • 3.1 使用CMake构建项目
    
  • 3.2 其他方式启用WebView
    
  
  
• 编写示例代码
  

引言

在现代应用程序开发中，显示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 工具，并将其配置在系统中。这可以通过以下命令完成：

1. > git clone https://github.com/microsoft/vcpkg
2. > .\vcpkg\bootstrap-vcpkg.bat

复制代码

装 wxWidgets 和 wxWebView：使用 Vcpkg 安装 wxWidgets 和 wxWebView，这将处理所有依赖关系并确保库可用。使用以下命令安装：

1. vcpkg install wxwidgets[webview]                       

复制代码

已经安装过，需要重新编译安装，使用一下命令安装：

1. vcpkg install wxwidgets[webview] --recurse

复制代码

2.2 检查是否可用

以Edge后端示例

1. wxWebView::IsBackendAvailable(wxWebViewBackendEdge)

复制代码

可用返回true
使用wxWebView

3.1 使用CMake构建项目

首先，确保已安装并配置了 CMake。接下来，可以按照以下步骤在 CMake 项目中添加 wxWebView 支持：

1. # 查找并包含wxWidgets库
2. find_package(wxWidgets COMPONENTS REQUIRED webview core base)
3. find_package(unofficial-webview2 COMPONENTS REQUIRED)
5. include(${wxWidgets_USE_FILE})
7. # 添加可执行文件并指定源文件
8. add_executable(wxTest WIN32
9.     MyApp.cpp
10.     MyFrame.cpp
11.     CustomFrame.cpp
12.     custom_title_bar.cpp
13.     login/login_dialog.cpp
14.     login/login_dialog_base.cpp)
16. target_link_libraries(wxTest  ${wxWidgets_LIBRARIES})
17. # 底下这些按理说 使用 target_link_libraries(wxTest unofficial::webview2::webview2)就可以了，但是
18. # 我使用的话无法将WebView2Loader.dll这个文件复制到应用程序可执行文件目录下
20. get_target_property(WEBVIEW2_IMPORTED_LOCATION unofficial::webview2::webview2 IMPORTED_LOCATION)
21. get_target_property(WEBVIEW2_IMPORTED_IMPLIB unofficial::webview2::webview2 IMPORTED_IMPLIB)
22. get_target_property(WEBVIEW2_INTERFACE_INCLUDE_DIRECTORIES unofficial::webview2::webview2 INTERFACE_INCLUDE_DIRECTORIES)
23. include_directories(${WEBVIEW2_INTERFACE_INCLUDE_DIRECTORIES})
24. target_link_libraries(wxTest ${WEBVIEW2_IMPORTED_IMPLIB})
25. add_custom_command(TARGET wxTest POST_BUILD
26.     COMMAND ${CMAKE_COMMAND} -E copy_if_different
27.     ${WEBVIEW2_IMPORTED_LOCATION}
28.     $<TARGET_FILE_DIR:wxTest>)

复制代码

3.2 其他方式启用WebView

• 使用cmake构建wxWidgets的话在CMakeLists.txt这个文件中启用wxUSE_WEBVIEW_EDGE，应该就是将他的值设置为1（未尝试）
  

1. set(wxUSE_WEBVIEW_EDGE 1) 或者 set(wxUSE_WEBVIEW_EDGE ON)

复制代码

• 不使用以上方式的话，需要先去WebView2 SDK下载nuget 包，然后将这个包解压到 wxWidgets/3rdparty/webview2 3rdparty/webview2/build/native/include/WebView2.h
  在setup.h 这个文件里启用wxUSE_WEBVIEW_EDGE
  

复制对应的文件(WebView2Loader.dll) 到可执行文件目录下，具体请查看官网: wxWebView Class Reference
编写示例代码

1. #include <wx/wx.h>
2. #include <wx/webview.h>
4. class MyApp : public wxApp
5. {
6. public:
7.         bool OnInit() override {
8.                 wxLog::SetActiveTarget(new wxLogStderr);
9.                 wxFrame* frame = new wxFrame(nullptr, wxID_ANY, "我的网页应用程序", wxPoint(0, 0), wxSize(800, 600));
11.                 bool IsBackendAvailable = wxWebView::IsBackendAvailable(wxWebViewBackendEdge);
12.                 //判断后端是否可用
13.                 if (IsBackendAvailable) {
14.                         //创建一个webview
15.                         wxWebView* web = wxWebView::New(frame, wxID_ANY);
16.                         //加载网址
17.                         web->LoadURL("https://www.example.com/");
18.                 }
19.                 //显示窗口
20.                 frame->Show(true);
21.                 wxLogMessage("是否可用？ %u", IsBackendAvailable);
22.                 return true;
23.         }
24. };
25. wxIMPLEMENT_APP(MyApp);

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！