实现桌面动态壁纸——认识 WebView2 控件

目录

前言

一、什么是 WebView2 ？

二、使用示例存储库

2.1 下载存储库

2.2 编译解决方案项目文件

2.3 运行示例程序

三、如何修改 WebView2 示例

本文来源于：https://blog.csdn.net/qq_59075481/article/details/138637909。

前言

上一节我们讲解了如何将任意窗口嵌入桌面壁纸层和图标层之间，它是向用户展示动画所必需的准备工作。但是，我们并没有去实现动态壁纸的前端部分，动态壁纸的前端组件一般由浏览器微核或视频解码器集成。这一节我将为您介绍基于 WebView2 控件技术的自定义浏览器微核，这将涉及到动态壁纸的前端组件的组成部分。

系列文章：

一、什么是 WebView2 ？

Microsoft Edge WebView2 控件允许在本机应用中嵌入式 Web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge 作为绘制引擎，以在本地应用中显示 Web 内容。使用 WebView2 可以在本机应用的不同部分嵌入 Web 代码，或在单个 WebView2 实例中生成本地应用。

说白了 WebView2 就是 Microsoft Edge 浏览器的一个接口集，便于开发者灵活集成浏览器的功能到任意应用程序中。

二、使用示例存储库

微软提供了一个基于 Microsoft Edge WebView2 控件开发的 Browser 示例，WebView2Browser。

存储库在 Github 上：https://github.com/MicrosoftEdge/WebView2Browser#webview2browser。

此外还有分发版本：分发应用和 WebView2 运行时。

2.1 下载存储库

我们打开项目页面，从右侧的 Release 栏点击最新发布的下载。

然后选择最上面的 ZIP 部分进行下载：

下载后大约 3.43 MB：

2.2 编译解决方案项目文件

解压后我们得到这样的目录：

这里我们注意到 NuGet 包文件并未包含在项目中，但是项目包含的 packages.config 配置文件将在随后用于恢复依赖库和头文件。从配置文件看出，项目依赖 3 个库。

直接打开项目（sln 文件），升级项目文件。

浏览一下项目结构：

选择 “重新生成解决方案”。

然后，我们遇到了一堆报错。

这是什么意思呢？

NuGet 已经自动下载了库文件了，进入项目目录下的 packages 目录就能看到：

显然，这是项目的生成设置乱了。

点击项目属性：

分别在每个配置以及平台选项卡下修改：

1）C/C++ /常规/附加包含目录下添加头文件目录

这里我们需要从项目的头文件代码里面去排查有哪些相对地址出了问题：

例如，需要添加下面内容：

./packages/cpprestsdk.v141.2.10.12.1/build/native/include/;./packages/Microsoft.Web.WebView2.1.0.664.37/build/native/include/;./packages/Microsoft.Windows.ImplementationLibrary.1.0.191107.2/include/;%(AdditionalIncludeDirectories)

2）链接器/输入/附加依赖项下添加 对应解决方案平台 的 “.lib” 文件 路径

x64 debug 就是下面的路径，如果是 release 则 cpprest141_2_10d.lib 改为 cpprest141_2_10.lib。如果是 Win32(x86) 平台，则 路径里面的 x64 改为 x86 即可。

这些都是先从 packages 目录中逐级查看找到对应的文件，然后再填写的。

.\packages\Microsoft.Web.WebView2.1.0.664.37\build
atived\WebView2Loader.dll.lib
.\packages\cpprestsdk.v141.2.10.12.1\build
atived\lib\cpprest141_2_10d.lib

3）从生成事件/生成后事件/命令行 里面添加 文件拷贝指令，将需要的 “.dll 文件” 在生成时复制到编译输出的路径下。

第二行添加的内容（和 .lib 一样，不同平台路径和用的文件不一样）：

xcopy “.\packages\cpprestsdk.v141.2.10.12.1\build
atived\bin\cpprest141_2_10d.dll” “$(OutDir)” /S /I /Y

以上 3 个步骤全部完成后，就可以正常编译了。

2.3 运行示例程序

打开编译结果（演示时选择的是 x64 Release）：

打开后如下图所示，这个就是主程序了。
 

运行一下试试，看上去就是一个精简版的 Edge：

三、如何修改 WebView2 示例

（此部分将放在后期讲解）

文章来源于：https://blog.csdn.net/qq_59075481/article/details/138637909，

转载请注明出处。

本文发布于：2024.05.10，更新于：2024.05.10