具有视觉组合的 Win32 示例应用

此 WebView2 示例在 Win32 本机应用程序中嵌入 WebView2 控件。

• 示例名称： WebView2SampleWinComp
• 存储库目录： WebView2SampleWinComp
• 解决方案文件： WebView2SampleWinComp.sln

此示例生成为 Win32 Visual Studio 2019 项目。 它在 WebView2 环境中使用C++和 HTML/CSS/JavaScript。

此示例使用 Windows 运行时 合成 API (也称为视觉层) 来利用 Windows UI 功能，并在 C++ Win32 应用程序中创建更好的外观和功能。

此示例展示了一系列 WebView2 事件处理程序和 API 方法，这些处理程序和 API 方法允许本机 Win32 应用程序直接与 WebView 交互，反之亦然。

如果这是你第一次使用 WebView，我们建议首先遵循 教程 Win32 应用中的 WebView2 入门，该教程介绍如何创建 WebView2 并演练一些基本的 WebView2 功能。

另请参阅 WebView2SampleWinComp 的自述文件。

步骤 1 - 安装具有C++支持的 Visual Studio

Microsoft Visual Studio 是必需的。 此示例不支持Microsoft Visual Studio Code。

此示例生成为 Win32 Visual Studio 2019 项目。

1. 如果尚未安装 Visual Studio (所需的最低版本) ，请参阅在为 WebView2 设置开发环境中的安装 Visual Studio。 按照该部分中的步骤进行操作，然后返回到此页并继续执行以下步骤。

2. 若要使用 Visual Studio 2017，请在“项目属性配置”属性>“”常规>平台工具集“>中更改项目的”平台工具集”。 可能还需要将Windows SDK更改为可用的最新版本。

其他先决条件

• WebView2 SDK - 此示例项目中已安装 WebView2 SDK 的预发行版。 下面显示了选择性地更新 SDK 的步骤。

• Windows 10 SDK - 默认情况下，此示例应用将使用计算机上安装的最新 Window 10 SDK 版本。 但是，Windows 10 SDK 版本 2004 (10.0.19041.0) 将阻止此示例应用的生成存在问题。 下面提供了安装兼容版本的 Windows 10 SDK 的步骤。

步骤 2 - 克隆或下载 WebView2采样存储库

1. 如果尚未执行此操作，请将 WebView2Samples 存储库克隆或下载到本地驱动器。 在单独的窗口或选项卡中，请参阅为 WebView2设置开发环境中的下载 WebView2 示例存储库。 按照该部分中的步骤操作，然后返回到此页面，然后继续以下操作。

步骤 3 - 打开解决方案并设置Windows SDK目标

1. 在本地驱动器上 .sln ，在 Visual Studio 的目录中打开文件：

   • <your-repos-directory>/WebView2Samples/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln

   或者：

   • <your-repos-directory>/WebView2Samples-main/SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.sln

   可能会打开“查看解决方案操作”对话框，提示你安装哪些Windows SDK将项目重新定位到：

   

2. 在“Windows SDK版本”下拉列表中，选择“10.0.20348.0 或更高版本”或“10.0.18362.0”或更低版本;不要选择“10.0.19041.0”。 然后单击“ 确定” 按钮。 如果这些版本不可用，请执行以下“安装Windows SDK”部分中的步骤。 否则，请跳到下面的部分。

如果解决方案已打开，则可以按如下所示更改目标：

• 在 解决方案资源管理器中，右键单击“WebView2SampleWinComp”项目 (未解决方案) ，然后单击“重定目标项目”。

步骤 4 - 安装Windows SDK

默认情况下，此示例应用使用已安装的最新 Window 10 SDK 版本。 Windows 10 SDK 版本 2004 (10.0 存在问题。19041.0) ，它将停止生成此示例应用。 如果遇到此问题，请安装 (并重新定位此项目以使用) 更高版本，例如 Windows 10 SDK 版本 2104 (10.0。20348.0) 或早期版本，例如 10.0。18362.1。

若要安装 Windows 10 SDK，请执行以下操作：

1. 转到Windows SDK和模拟器存档。

2. 在以下行之一上，单击 “安装 SDK” 链接：

   • Windows 10 SDK 版本 2104 (10.0.20348.0) (或更高版本)
   • Windows 10 SDK 版本 1903 (10.0.18362.1)

   的特定于版本的副本 winsdksetup.exe 将下载到目录中 Downloads 。

3. Downloads在目录中，打开刚刚下载的副本winsdksetup.exe。

4. 此时会打开“Windows SDK设置”窗口：

   

5. 单击“ 下一步 ”按钮，然后按照提示操作。 可以接受默认值。 安装结束时，将显示所选版本Windows SDK欢迎屏幕：

   

6. 单击“ 关闭 ”按钮。

执行上一步“打开解决方案并设置Windows SDK目标”。 或者，如果解决方案已打开，请在 解决方案资源管理器 中右键单击“WebView2SampleWinComp”项目 (不是解决方案) ，然后单击“重定目标项目”。

步骤 5 - 在出现提示时安装工作负载

• 如果出现提示，请安装请求的任何 Visual Studio 工作负载。 在单独的窗口或选项卡中，请参阅为 WebView2 设置开发环境中的安装 Visual Studio 工作负载。 按照该部分中的步骤操作，然后返回到此页面，然后继续以下操作。

步骤 6 - 生成并运行项目

在 Visual Studio 中打开解决方案 () 并响应任何设置或安装提示后，项目将在 Visual Studio 中打开，并在 解决方案资源管理器 中显示 WebView2SampleWinComp 项目：

在 Visual Studio 的顶部，设置生成目标，如下所示：

1. 在 “解决方案配置” 下拉列表中，选择“ 调试” 或“ 发布”。

2. 在 “解决方案平台” 下拉列表中，选择“ x86”、“ x64”或“ ARM64”。

3. 在解决方案资源管理器中，右键单击“WebView2SampleWinComp”项目，然后选择“生成”。

   这会生成项目文件 SampleApps/WebView2SampleWinComp/WebView2SampleWinComp.vcxproj。

4. 选择“ 调试>启动调试 ” (F5) 。

   示例应用窗口随即打开：

   

5. 在 Visual Studio 中，选择“ 调试>停止调试”。 Visual Studio 关闭应用。

步骤 7 - 更新已安装的包

此为可选步骤。 示例已预安装：

• WebView2 预发布 SDK 的版本。
• WINDOWS 实现库的版本 (WIL) 。

1. 在解决方案资源管理器中，右键单击“WebView2SampleWinComp”项目 (而不是“解决方案”节点) ，然后选择“管理 NuGet 包”。 “ NuGet 包管理器 ”选项卡随即打开。

2. 选中 “包括预发行版 ”复选框。

3. 单击“ 已安装 ”选项卡。对于每个包，请注意当前版本 (是否列出了两个版本，以及) 可用的更新版本号。

4. 单击“汇报”选项卡。

5. 如果列出了 Microsoft.Web.WebView2 SDK 的较新预发行版，则可以选择单击“ 更新 ”按钮。 预发行版具有“-prerelease”后缀，例如 1.0.1248-prerelease。 若要查看此步骤的详细信息，请在单独的窗口或选项卡中，请参阅为 WebView2 设置开发环境中的安装或更新 WebView2 SDK。 按照该部分中的步骤操作，然后返回到此页面，然后继续以下操作。

   

6. 如果列出了较新版本的 Windows 实现库 (WIL) ，可以选择单击“ 更新 ”按钮。

7. 按照提示继续更新包。

8. 现在使用更新的包再次生成并运行项目。

步骤 8 - 检查代码

1. 在 Visual Studio 代码编辑器中，检查代码：

   

另请参阅

• Win32 应用中的 WebView2 入门
• WebView2 API 参考