WinUI 2 (UWP) 应用中的 WebView2 入门 - Microsoft Edge Developer documentation

已完成的项目

此入门项目 (解决方案) 的已完成版本位于 WebView2Samples 存储库中。可以使用存储库中的已完成解决方案 (，也可以执行以下步骤，) 作为基线来添加更多 WebView2 代码和其他功能。

WebView2Samples 存储库中提供了本教程项目的已完成版本：

示例名称： WinUI2_Sample

存储库目录： WinUI2_GettingStarted

解决方案文件： MyUWPGetStartApp.sln

按以下顺序执行主要步骤部分。

关于 WinUI 和 WebView2

在 WinUI 2 (UWP) 应用中，WebView2 公开为 XAML 控件。将 XAML 控件作为命名控件嵌入应用中后，可以在 C# 文件中引用该 XAML 控件。

WinUI 中只公开一部分 WebView2 接口/函数：


    WebView2

XAML 对象公开


    CoreWebView2

接口以及最重要的功能。

等 CoreWebView2Controller 接口是隐藏的，因为 WinUI 负责后台的环境和窗口创建。

另请参阅：

WinUI 2 (UWP) 应用中的 WebView2 中的 XAML 限制。

步骤 1 - 安装 Visual Studio

本文介绍 Visual Studio 2022 Community Edition 的步骤和屏幕截图。需要Microsoft Visual Studio 2019 版本 16.9 或更高版本。不支持 Visual Studio 2017。

如果尚未安装合适的 Microsoft Visual Studio 版本，请在新窗口或选项卡中，请参阅为 WebView2 设置开发环境 中的安装 Visual Studio 。按照该页中的步骤执行 Visual Studio 的基本默认安装，例如 Visual Studio 2022 Community Edition。

然后返回到此页，继续下面的作。

如果 Visual Studio 未在代码编辑器中显示行号，则可能需要打开行号。为此，请选择“ 工具 > 选项” > “文本编辑器 > 所有语言 > 行号 ”。单击" 确定 "。

步骤 2 - 安装适用于 .NET 桌面、C++桌面和 UWP 开发工具的工作负载

打开 Microsoft Visual Studio。此时会显示打开选项窗口：

如果 “修改 Visual Studio ”窗口未打开，请在 Visual Studio 安装程序 窗口中单击“ 修改” 按钮。

在“ 工作负载 ”选项卡上，滚动到并单击以下卡片以选择它们：确保每张卡片上都有复选标记：

.NET 桌面开发

使用 C++ 进行桌面开发 通用 Windows 平台开发

在右侧的 “安装详细信息 ”部分中，展开 “通用 Windows 平台开发 ”，然后选择 “ (v143) 通用 Windows 平台工具”C++ ：

单击“ 修改” 按钮。

此时会显示 “用户帐户控制 ”窗口，询问“是否允许此应用对设备进行更改？ Visual Studio 安装程序。已验证发布者：Microsoft Corporation。文件来源：此计算机上的硬盘驱动器。显示更多详细信息 (按钮) ”。

单击“ 是 ”按钮。

此时会显示一个对话框，“在开始之前，请关闭 Visual Studio”：

此屏幕截图显示了 2022 Visual Studio Professional，但本文实际上是使用 Visual Studio Community 2022 更新的。

安装可能需要几分钟时间。此时会显示 Visual Studio， 解决方案资源管理器 为空。

按 Alt+Tab 切换到 Visual Studio 安装程序 窗口，然后关闭 Visual Studio 安装程序 窗口。

步骤 3 - 创建 UWP 应用

如果 Visual Studio 处于打开状态，请选择“ 文件 > 新建 > 项目 ”。此时会打开 “创建新项目 ”对话框。

或者，如果 Visual Studio 已关闭，请将其打开，然后在 Visual Studio 的启动屏幕中，单击“ 创建新项目 ”卡：

在“ 项目名称 ”文本框中，输入项目名称，例如 MyUWPGetStartApp 。

在“ 位置 ”文本框中，输入路径，例如 C:\Users\myusername\Documents\MyWebView2Projects 。

单击“创建” 按钮。

此时将显示 “新建 Windows 项目 ”对话框：

接受默认值，然后单击“ 确定 ”按钮。

如果显示 “开发人员模式 ”窗口部分，请在该部分中单击“ 开 ”。如果尚未将计算机设置为开发人员模式，则会打开 “使用开发人员功能 ”对话框，以确认打开开发人员模式。

单击“ 是 ”打开计算机的开发人员模式，然后关闭 “设置” 窗口。

Visual Studio 显示新创建的解决方案和项目：

接下来，设置此新的 WinUI 2 (UWP) 项目来托管 WebView2 控件并使用 WebView2 API。

步骤 5 - 安装 WinUI 2 SDK (Microsoft.UI.Xaml)

接下来，为此项目安装 Microsoft.UI.Xaml 包。 Microsoft.UI.Xaml 为 WinUI 2。

在解决方案资源管理器中，右键单击项目 (而不是其上方) 的解决方案节点，然后选择“ 管理 NuGet 包 ”。
“NuGet 包管理器 ”面板在 Visual Studio 中打开。

在 NuGet 包管理器 中，单击“ 浏览 ”选项卡。

清除 “包括预发行 检查”框。

在“ 搜索 ”框中，输入 Microsoft.UI.Xaml ，然后选择搜索框下面的 Microsoft.UI.Xaml 卡：

对于版本 2.8.0 或更高版本，在底部的 “依赖项 ”部分中，列出了 Microsoft.Web.WebView2 。

对于HoloLens 2开发， Microsoft.Web.WebView2 包的版本必须为 1.0.1722.45 或更高版本，这可能高于默认值。 HoloLens 2 上的 WebView2 处于预览状态，在正式发布之前可能会更改。 WebView2 仅在运行Windows 11更新HoloLens 2设备上受支持。有关详细信息，请参阅更新HoloLens 2 。

在中间面板中的 “版本 ”下拉列表中，确保选择了 “最新稳定 ”版本 2.8.0 或更高版本。

单击“ 安装 ”按钮。

此时将显示 “预览更改 ”对话框：

现已为项目安装了 Microsoft.UI.Xaml 包，即 WinUI 2。 WinUI 2 SDK (Microsoft.UI.Xaml) 包含 WebView2 SDK，因此无需单独安装用于 WebView2 SDK 的 NuGet 包。

步骤 6 - 在 XAML 代码中实例化 WebView2 控件

现在可以向项目添加 WebView2 代码了。首先，为 WebView2 控件添加命名空间引用，如下所示：

在“解决方案资源管理器”中，展开项目，然后双击“ MainPage.xaml ”。
MainPage.xaml 在设计器中打开，其下方有一个代码编辑器：

在代码编辑器中，在 <Page> 元素的 start 标记 <Page 内，在其他 xmlns: 属性下面添加以下属性：

xmlns:controls="using:Microsoft.UI.Xaml.Controls" 将 WebView2 控件添加到 XAML 网格，如下所示：在 MainPage.xaml 文件中，在 <Grid> 元素 (（该元素尚未包含其他元素) ）中，通过添加以下元素来添加 WebView2 控件： <controls:WebView2 x:Name="WebView2" Source="https://bing.com"/> 按 Ctrl+S 保存文件。 MainPage.xaml在代码编辑器中的文件上方，可能会显示 WebView2 控件内容的预览，或者它可能保持空白 (白色) ，直到你首次生成应用：接下来，了解对 WebView2 应用至关重要的导航事件。应用最初导航到 https://bing.com。在新窗口或选项卡中，阅读 WebView2 应用的导航事件，然后返回到此页面。 WinUI 2 (UWP) 应用中的 WebView2 WebView2 API 参考

WebView2 应用开发最佳做法管理用户数据文件夹 WebView2 示例应用 - 存储库指南 WebView2Samples 。 WinUI 2 (UWP) 示例应用 - 下载、更新、生成和运行 WinUI 2 WebView2 示例的步骤。入门教程已完成项目：与某些其他教程不同，WebView2Samples 存储库中没有此入门教程的已完成版本。 GitHub： WebView2Samples 存储库 WebView2 UWP 示例应用 - WinUI 2 (UWP) WebView2 示例。输入特定于 WinUI 的功能请求或 bug 的问题 - microsoft-ui-xaml 存储库。适用于 Xbox 的媒体应用示例 NuGet： Microsoft.UI.Xaml NuGet 包