使用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

wxWidgetswxWebView:使用 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);

热门相关:都市捉妖人   你好,墨先生   苍穹龙骑   至尊剑皇   你好,墨先生