526互联

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

发布时间 2023-11-16 12:00:00作者: 小悠123

@

目录

引言

在现代应用程序开发中，显示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

  1. 使用cmake构建wxWidgets的话在CMakeLists.txt这个文件中启用wxUSE_WEBVIEW_EDGE，应该就是将他的值设置为1（未尝试）
set(wxUSE_WEBVIEW_EDGE 1) 或者 set(wxUSE_WEBVIEW_EDGE ON)
  1. 不使用以上方式的话，需要先去WebView2 SDK下载nuget 包，然后将这个包解压到 wxWidgets/3rdparty/webview2 3rdparty/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);