- 步骤 1 - 安装 Visual Studio 和 Windows 应用 SDK
- 步骤 2 - 安装 Microsoft Edge 的预览频道
- 步骤 3 - 创建空白 WinUI 3 项目
- 步骤 4 - 添加 WebView2 控件
本文介绍如何设置开发工具并为 WinUI 3 (Windows 应用 SDK) 创建初始 WebView2 应用，并在此过程中了解 WebView2 概念。
在本教程中，你将使用 空白应用、打包 (WinUI in Desktop) Visual Studio 项目模板创建空白 WinUI 3 项目。 该项目模板使用 WindowsAppSDK，其中包括 WebView2 SDK。 添加 WebView2 控件。 然后，添加地址栏和逻辑，以在用户尝试导航到带有前缀的 http:// URL 时显示警告对话框。
已完成的项目
WebView2Samples 存储库中提供了自 2020) (本教程项目的完整版本：
· 示例名称： WinUI3_GettingStarted
· 存储库目录： WinUI3_GettingStarted
· 解决方案文件： WinUI_Sample.sln
本教程已更新，仅创建单个项目，而不是第二个“ (包) ”项目，如 2020 年一样。
步骤 1 - 安装 Visual Studio 和 Windows 应用 SDK
即使已安装 Visual Studio，也请阅读以下页面，并可能更新软件并安装项目模板。
1. 在新窗口或选项卡中，打开“安装Windows 应用 SDK工具”页，然后按照该页上的步骤安装 Microsoft Visual Studio，例如 Visual Studio 2022。
1. 如果需要，请在新窗口或选项卡中，请参阅为 WebView2 设置开发环境中的安装 Visual Studio。
从该页面返回并继续执行以下步骤。
对于此示例，无需单独安装 WebView2 SDK。 在下面，你将选择项目模板 “空白应用”“打包 (桌面) 中的 WinUI ”，该模板使用 WindowsAppSDK，其中包括 WebView2 SDK。
步骤 2 - 安装 Microsoft Edge 的预览频道
1. 安装Windows 10版本 1803 (内部版本 17134) 或更高版本上安装的 WebView2 运行时或任何 Microsoft Edge 预览版 (Beta、Dev 或 Canary) 。
从该页面返回并继续执行以下步骤。
步骤 3 - 创建空白 WinUI 3 项目
若要创建 WebView2 应用，请首先创建一个基本桌面项目，创建包含单个main窗口的桌面应用：
1. 如果 Visual Studio 未运行，请启动 Visual Studio (不Visual Studio Code) 。 在 Visual Studio 启动窗口中，单击“创建新项目”卡。 此时会打开 “创建新项目 ”窗口。
或者，如果 Visual Studio 正在运行，请选择“ 文件>新建>项目”。 此时会打开 “创建新项目 ”对话框。
打开开发人员模式： 在本文的步骤中，当 Visual Studio 在某个时间点打开时，系统可能会提示你为计算机打开开发人员模式。 有关详细信息，如果需要，请参阅为 Windows 生成桌面应用中的启用设备进行开发。
2. 在 “创建新项目 ”对话框的“ 搜索模板” 字段中， 在“桌面”中输入 WinUI 3：
3. 单击“空白应用”、“打包 (桌面中的 WinUI) 卡将其选中，然后单击”下一步“按钮。
如果未列出 WinUI 模板，则需要从安装Windows 应用 SDK工具中安装如上所述的项目模板。 有关显示模板的其他提示：
安装 Visual Studio 2022 Community Edition 的“默认”选项后，在 Visual Studio 安装程序 单击 .NET 卡，然后在右侧选中Windows 应用 SDK C# 模板的复选框。
如果仍未显示正确的项目模板：在Visual Studio 安装程序中，单击 UWP 卡将其选中，选中右侧的 v143 C 工具复选框，然后单击“修改”按钮。
此时会显示 “配置新项目 ”对话框。
4. 在“ 项目名称 ”文本框中，输入项目名称，例如 MyWebView2WinUI3：
5. 在“ 位置 ”文本框中，输入或导航到某个位置，例如 C:\Users\username\Documents\WebView2。
6. 单击“创建”按钮。
新的 WinUI 3 项目将在 Visual Studio 中的 解决方案资源管理器 中打开：
