WebView2嵌入Qt以使用Edge替代webEngine（Qt添加外部运行库，以WebView2为 ...

日志：1. 近来学习做项目时深感webEngine加载网页的缓慢和编译后的痴肥，所以尝试着使用WebView2调用Edge浏览器来减减负。
2. 想要添加其他运行库同样可以参照此方法
1. 下载组件

• Microsoft Edge WebView2
  
• WebView2Samples，此为WebView2所有功能的示例工程（可以选择不下载）。
  

2. 获取WebView2包

有两种方法供选择，一种是直接解压缩.nupkg支持包，另一种是使用vs打开WebView2Samples中的示例工程后安装NuGet程序包获取。
方法一. 直接解压缩.nupkg支持包

进入网页后点击右侧的下载按钮，来下载下面两个支持包
Microsoft.Web.WebView2.1.0.902.49
Microsoft.Windows.ImplementationLibrary.1.0.191107.2

下载后发现是.nupkg文件，可以直接使用解压缩软件解压。这里我使用Bandizip解压缩。

方法二. 使用vs安装NuGet程序包获取

打开下载的WebView2Samples示例包，打开如下路径（WebView2Samples\GettingStartedGuides\Win32_GettingStarted），此为WebView2Samples的原始示例工程。使用vs打开此示例工程，这里借鉴微软官方的配置教程，Win32 应用中的 WebView2 入门。

在使用<管理 NuGet程序包>安装必要组件后，此时打开工程目录会发现多了一个packages文件夹。

最终，我们可以得到下面两个运行WebView2的必要支持包。

3. 嵌入Qt工程

如何新建一个Qt工程这里不再赘述，我们直接开始嵌入WebView2。
将WebView2加入Qt编译

• 将packages包复制到地点工程路径，我的复制在external/packages处。
  
  
  
  
• 这里我使用CMake嵌入，至于Qt的qmake工程可以借鉴CMakeLists.txt文件，应该能够很轻松的嵌入。
  下面是必要在CMakeLists.txt添加的内容。Map_Upper_Computer为我的项目的名称。
  

1. # 设置扩展包路径,CMAKE_CURRENT_SOURCE_DIR为工程所在路径，一般默认包含子啊工程中，不必额外设置。
2. set(CMAKE_EXTERNAL_PACKAGES ${CMAKE_CURRENT_SOURCE_DIR}/external/packages)
3. # 添加扩展包头文件目录。一般运行库所需的头文件
4. include_directories(${CMAKE_EXTERNAL_PACKAGES}/Microsoft.Web.WebView2.1.0.2957.106/build/native/include)
5. include_directories(${CMAKE_EXTERNAL_PACKAGES}/Microsoft.Windows.ImplementationLibrary.1.0.240803.1/include)
6. # 添加扩展包库目录，根据自身所在平台选择arm64/x64/x86，为lib文件所在目录
7. link_directories(${CMAKE_EXTERNAL_PACKAGES}/Microsoft.Web.WebView2.1.0.2957.106/build/native/x64)
9. # 链接lib文件可以和原有的合并，即
10. target_link_libraries(Map_Upper_Computer PRIVATE
11.     Qt${QT_VERSION_MAJOR}::Widgets
12.     Qt${QT_VERSION_MAJOR}::WebEngineWidgets
13.     Qt${QT_VERSION_MAJOR}::WebEngineCore
14.     Qt${QT_VERSION_MAJOR}::SerialPort
15.     Qt${QT_VERSION_MAJOR}::Qml
16.     Qt${QT_VERSION_MAJOR}::Quick
17.     WebView2LoaderStatic.lib
18.     WebView2Loader.dll.lib
19. )

复制代码

运行示例工程

这里给出嵌入项目的示例代码，有些简陋，验证是否移植成功，主打一个能用就行。
头文件

1. #ifndef MAPWEB_H
2. #define MAPWEB_H
4. #include <QWidget>
5. #include <QProcess>
6. #include <windows.h>
7. #include <wrl.h>
8. #include <wil/com.h>
9. #include <WebView2.h>
10. #include <QResizeEvent>
12. using namespace Microsoft::WRL;
14. namespace Ui {
15.         class mapWeb;
16. }
18. class mapWeb : public QWidget
19. {
20.         Q_OBJECT
22. public:
23.         explicit mapWeb(QWidget* parent = nullptr);
24.         ~mapWeb();
26. private:
27.         Ui::mapWeb* ui;
29.         wil::com_ptr<ICoreWebView2Controller> webviewController;
30.         wil::com_ptr<ICoreWebView2> webview;
32.         void initializeWebView2();
33.         void resizeEvent(QResizeEvent* event);
35. };
37. #endif // MAPWEB_H

复制代码

源文件

1. #include "mapWeb.h"
2. #include "ui_mapweb.h"
4. mapWeb::mapWeb(QWidget* parent)
5.         : QWidget(parent), ui(new Ui::mapWeb)
6. {
7.         ui->setupUi(this);
8.         initializeWebView2();
9. }
11. mapWeb::~mapWeb()
12. {
13.         if (webviewController) {
14.                 webviewController = nullptr;
15.         }
16.         if (webview) {
17.                 webview = nullptr;
18.         }
19.         delete ui;
20. }
22. void mapWeb::initializeWebView2()
23. {
24.         HWND hwnd = (HWND)this->winId();
26.         //  WebView2 用户数据存储路径
27.         LPCWSTR userDataFolder = L"C:\\ProgramData\\Cache";
29.         // 创建 WebView2 控制器
30.         CreateCoreWebView2EnvironmentWithOptions(nullptr, userDataFolder, nullptr,
31.                 Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
32.                         [this, hwnd](HRESULT result, ICoreWebView2Environment* env) -> HRESULT
33.                         {
34.                                 if (FAILED(result)) {
35.                                         qDebug() << "WebView2 环境创建失败: " << result;
36.                                         return result;
37.                                 }
39.                                 env->CreateCoreWebView2Controller(hwnd, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
40.                                         [this, hwnd](HRESULT result, ICoreWebView2Controller* controller) -> HRESULT
41.                                         {
42.                                                 if (FAILED(result) || !controller) {
43.                                                         qDebug() << "WebView2 控制器创建失败: " << result;
44.                                                         return result;
45.                                                 }
47.                                                 webviewController = controller;
48.                                                 webviewController->get_CoreWebView2(&webview);
49.                                                 // 设置创建的框体的大小
50.                                                 RECT bounds;
51.                                                 GetClientRect(hwnd, &bounds);
52.                                                 webviewController->put_Bounds(bounds);
54.                                                 webview->Navigate(L"https://www.bing.com");
56.                                                 return S_OK;
57.                                         }).Get());
59.                                 return S_OK;
60.                         }).Get());
61. }
62. // 监视框体变动以实时更改界面大小
63. void mapWeb::resizeEvent(QResizeEvent* event)
64. {
65.         if (webviewController) {
66.                 RECT bounds;
67.                 GetClientRect((HWND)this->winId(), &bounds);
68.                 webviewController->put_Bounds(bounds);
69.         }
70.         QWidget::resizeEvent(event);
71. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。