本教程面向在沉浸式 HoloLens 2 Unity 应用程序中使用 WebView2 的开发人员。

HoloLens 2 上的 WebView2 和适用于 Unity 的 WebView 插件均处于预览状态，在正式发布之前可能会更改。 Microsoft HoloLens预览体验成员预览版中提供了 WebView2 预览版。 若要访问此预览版，必须注册 Windows 预览体验计划;请参阅开始接收预览体验成员预览版中的预览体验成员版本，了解Microsoft HoloLens。

WebView2 仅在运行Windows 11更新HoloLens 2设备上受支持。 有关详细信息，请参阅更新HoloLens 2。

有关HoloLens 2上已启用 WebView2 的 2D 应用程序，请参阅 WinUI 2 (UWP) 应用中的 WebView2 入门。

在本教程中，你将：

WebView2Samples 存储库中提供了此入门项目的已完成版本。 可以使用存储库中已完成的项目 (，或者按照以下步骤) 作为基线，向 HoloLens 2 Unity 应用添加更多 WebView2 功能和其他功能。

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

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

通过结合 HoloLens 2、Unity、混合现实 工具包和适用于 Unity 的 WebView 插件，可以创建无缝集成 Web 内容的沉浸式混合现实体验。

HoloLens 2是一种开创性的无束缚全息设备，提供免手动且身临其境的混合现实体验。 HoloLens 2将数字信息无缝覆盖到现实世界中，呈现保持原位并自然响应交互的高清全息影像。

可以使用 Unity 游戏引擎和 Visual Studio 创建HoloLens 2项目。

Unity 是一种多功能游戏引擎，是创建 3D 应用程序的热门选择，包括用于HoloLens 2设备的混合现实体验，因为它具有丰富的增强现实 (AR) 、虚拟现实 (VR) 和混合现实 (MR) 的强大功能。

混合现实功能工具 (MRFT) 是开发人员发现、更新混合现实功能包并将其添加到 Unity 项目中的新方法。 可以按名称或类别搜索包，查看其依赖项，甚至可以在导入之前查看对项目清单文件的建议更改。 清单文件是定义项目的所有包的 JSON 文件。 验证要包含的包后，混合现实功能工具会自动将它们下载到所选的 Unity 项目中。 本指南将使用 MRFT 安装适用于 Unity 的 混合现实 工具包和 Microsoft 混合现实 WebView 插件。

混合现实工具包 (MRTK) 是一个 Microsoft 驱动的开源项目，它通过提供开发混合现实体验的基本组件和功能来加速 Unity 中混合现实应用程序的开发。 MRTK 提供一系列脚本、组件和预制件，旨在帮助你在HoloLens 2设备上创建高性能且直观的混合现实体验。

适用于 Unity 的 Microsoft 混合现实 WebView 插件支持将 WebView2 功能集成到HoloLens 2应用中。 此适用于 Unity 的 WebView 插件通过包装 WebView2 控件、自动处理呈现以及自动将输入定向到 WebView2 控件，简化了 WebView2 功能与 HoloLens 2 应用的集成。

此插件还管理 Unity 和 WebView2 之间的互操作，从而通过消息和事件实现 JavaScript 和 Unity 之间的通信。

在 Unity 中，可以使用 混合现实 功能工具安装适用于 Unity 的 Microsoft 混合现实 WebView 插件。

本教程假定你已安装 Unity 2021.3 LTS 或更高版本和 Visual Studio 2019 版本 16.9 或更高版本。 不支持 Visual Studio 2017。 在此步骤中，我们将首先设置 Visual Studio 环境进行HoloLens 2开发，请按照混合现实工具安装指南进行操作。 本文将指导你安装和配置必要的工具，包括 Visual Studio 和 通用 Windows 平台 开发工作负载。

此外，按照为 WebView2 设置开发环境中的步骤， 为 WebView2 设置开发环境。

完成设置后，返回到此页面，继续执行后续步骤以安装 Unity。

开始使用 WebView2 开发HoloLens 2应用之前，需要安装 Unity。 按照 选择 Unity 版本和 XR 插件 中的步骤完成生成混合现实应用程序所需的工具集的安装。

安装工具后，即可创建和配置项目。 开始HoloLens 2开发的最简单方法是在项目中使用 混合现实 工具包。

混合现实功能工具简化了发现、安装和管理混合现实功能（包括 Unity 项目的 混合现实 工具包和包）的过程。 有关安装混合现实功能工具的更多指南，请参阅欢迎使用混合现实功能工具。

首先，从 Microsoft 下载中心下载混合现实功能工具。

运行下载的 混合现实 功能工具可执行文件，并按照提示安装 混合现实 Toolkit 以及用于HoloLens 2开发的任何其他必需包。

使用混合现实功能工具，可以直接在 Unity 项目中选择并安装混合现实工具包的相应版本以及其他混合现实功能。

使用 混合现实 功能工具安装 混合现实 工具包后，工具包的资产和预制件将显示在 Unity 项目中。 混合现实工具包将指导你为项目配置 Open XR 插件。

有关配置 Unity 项目的详细分步演练，请参阅 使用 MRTK 设置新的 OpenXR 项目。

在此步骤中，如上所示，你将使用 混合现实 功能工具安装适用于 Unity 的 Microsoft 混合现实 WebView 插件。 这将安装与 HoloLens 2 兼容的特定版本的 WebView2 NuGet 包。

启动上面) 安装的混合现实功能工具 (。 此时将打开适用于 Unity 的混合现实功能工具的“起始”页，其中包含用于配置设置和查看文档的选项：

单击齿轮按钮。 “ 设置 ”窗格随即打开。

单击“ 功能 ”选项卡，并确保选中“ 显示预览版本 ”复选框：

单击“ 确定” 按钮返回到起始页。

单击“ 开始” 按钮开始发现功能包。

将混合现实功能工具指向 Unity 项目。 为此，请单击“项目路径”字段右侧的“浏览项目文件夹 (...) ”按钮：

在文件选择对话框中，选择 Unity 项目文件夹，然后单击“ 打开 ”按钮。

在 “选择项目 ”对话框中，单击“ 发现功能” 按钮。

在“发现功能”页中，展开“其他功能”部分，然后选中“Microsoft 混合现实 WebView”复选框：

这标志着用于 Unity 的 WebView 插件进行安装。 在 “版本 ”下拉列表中，默认选择了插件的最新版本。

单击“ 获取功能” 按钮。 这会下载所需的包。

下载包后，单击“ 导入 ”按钮：

在“ 审阅和批准 ”页上，检查将对项目 manifest.json 文件进行的修改，并检查将复制到项目中的文件 (列表，例如 .tgz 包) ：

单击“ 批准 ”按钮完成更改。

在 Unity 项目的 “资产” 文件夹中，检查 WebView2 预制件。

现在已安装并导入适用于 Unity 的 Microsoft 混合现实 WebView 插件。 继续执行下面的下一步。

有关详细信息，请参阅欢迎使用混合现实功能工具。

安装并导入适用于 Unity 的 WebView 插件后，请在 Unity 场景中设置 WebView2 prefab，如下所示：

在 Unity 编辑器中，导航到“项目”窗口，然后转到“包> Microsoft 混合现实 WebView (预览版) >运行时> Prefab”找到WebView2 prefab。

将 WebView2 预制件拖动到场景中。

在 “层次结构 ”窗口中选择 WebView2 预制件后，将其移动到场景 (（如节点) 下 MixedRealitySceneContent ）的合适起始位置，确保它位于默认相机的视线中。

在 “检查器” 窗口中，可以更改 WebView2 预制件加载的初始 URL。 为此，请找到“ 当前 URL ”文本框，然后输入所需的 URL。 默认情况下，预制件加载 https://www.microsoft.com：

现在，你已将 WebView 插件添加到场景中，现在是测试项目的好时机。

若要直接在 Unity 编辑器中测试项目，请单击“ 播放 ”按钮：

若要在实际设备上测试项目，请按照 生成并部署到 HoloLens 中的步骤操作。

然后继续执行下面的后续步骤。

尽管 prefab 只公开单个属性，但脚本上 WebView 公开了其他功能。 让我们看看在项目中公开一些此功能。 首先，检查 WebView 脚本，了解可用内容。

提示

若要在默认代码编辑器中查看脚本的内容，请在“ 检查器 ”窗口中双击脚本的名称。

现在，你已查看 WebView 代码，让我们扩展示例的功能。 在此步骤的其余部分，我们将添加一些基本功能，以便用户具有 “后退 ”按钮、 “转到 ”按钮和用于导航到自定义 URL 的文本字段。

按如下所示修改场景层次结构：

在“ 层次结构 ”窗格中选择“画布”，然后在“ 检查器 ”窗格中进行以下更改，以更新 Canvas 属性：

通过在“ 层次结构 ”窗格中选择输入字段的属性，然后在“ 检查器 ”窗格中进行以下更改来更新输入字段的属性：

更新第一个按钮的属性，方法是在“ 层次结构 ”窗格中选择它，然后在“ 检查器 ”窗格中进行以下更改：

更新第二个按钮的属性，方法是在“ 层次结构 ”窗格中选择该按钮，然后在“ 检查器 ”窗格中进行以下更改：

更新 WebView 的属性，方法是在“ 层次结构 ”窗格中选择它，然后在“ 检查器 ”窗格中进行以下更改：

将背景图像添加到 画布：

在“ 层次结构 ”窗格的“ 后退按钮”下，选择“ 文本 (TMP) ”。 然后在 “检查器 ”窗格中，将 “文本输入 ”更改为“ 后退”：

对 “转到”按钮重复上述过程，将 Go 替换为文本。

现在应该有一个如下所示的场景：

现在我们设计了 UI，现在我们将创建代码来连接按钮。 为此，我们将创建派生自 Microsoft.MixedReality.WebView的新脚本。

在 WebView 的 “检查器 ”窗口中，单击“ 添加组件”，选择“ 新建脚本”，键入 “WebViewBrowser”，然后单击“ 创建并添加”。 新组件将添加到 “检查器 ”窗口。

在 “检查器” 窗口中，双击 WebViewBrowser 脚本以编辑脚本。

将该文件的内容替换为以下代码：

将 UI GameObjects 连接到 WebViewBrowser 我们刚刚编写的代码：

现在可以在 Unity 编辑器中测试场景。 在场景中连接所有内容后，你应该能够验证一切是否按预期工作。 尝试通过在文本框中输入新 URL AddressField 来测试场景， (必须是包含协议) 的完整 URL，然后按“ 转到 ”按钮。 确保“ 后退 ”按钮也正常工作。

有时，调试在 HoloLens 上运行的应用程序可能会有所帮助，并且执行此操作的步骤与 Visual Studio 中的标准调试略有不同。 有关如何设置和连接到在 HoloLens 或 Unity 编辑器内部运行的应用程序的详细信息，请参阅 使用 Unity 进行托管调试。

另请参阅：

继续执行下面的后续步骤。

适用于 Unity 的 Microsoft 混合现实 WebView 插件提供用于处理 Web 视图的事件。

一个重要事件是 IWithPostMessage.MessageReceived，在将消息从 Web 视图发送到 Unity 应用时引发。 事件 MessageReceived 在 接口中 Microsoft.MixedReality.WebView.IWithPostMessage 定义。

IWithPostMessage 还定义了 PostMessage() 方法，该方法可用于将消息从 Unity 应用发送到 Web 视图。

下面是如何使用这些事件和方法处理 Web 视图的示例：

使用 WebView2 开发 HoloLens 2 Unity 应用时，请注意一些限制和已知问题：

弹出窗口：弹出窗口在 HoloLens 2 上的 Unity 应用中的 WebView2 中无法正常工作，但它们在设备上的 2D XAML 应用中工作正常。 避免弹出窗口，并使用替代技术或 UI 设计，例如使用 HTML、CSS 和 JavaScript 的 WebView 中的自定义类似弹出窗口的元素。

新窗口：HoloLens 2上的 WebView2 实例默认在同一窗口中导航，这与桌面上的不同。 请遵循此默认行为来获得更好的用户体验。 此外，无法启动 DevTools 窗口。

企业身份验证：HoloLens 2上的 WebView2 目前不支持利用 OS 级令牌的自动单Sign-On (SSO) 。 用户仍可以通过提供凭据登录，但需要设备级身份验证的情况除外。 Cookie 存储按预期工作。

用户交互：与本机HoloLens 2板不同，WebView2 最好使用远距交互手部射线进行交互。 可能不支持轻扫触摸和滚动交互。

性能：大量使用 JavaScript 或高级渲染的复杂网站可能会影响系统性能或主机应用程序的帧速率。 有关与性能相关的一般限制和建议，请参阅 混合现实文档中的了解 混合现实的性能。 另请参阅下面的 性能优化。

优化 HoloLens 2 Unity 应用中 WebView2 的性能对于流畅的用户体验至关重要。 下面是一些建议：

限制 WebView2 实例的数量：建议在 Unity 应用中仅使用一个 WebView2 实例。 重复使用同一实例或根据需要将其删除并创建一个新实例。 请记住，从场景中删除 WebView prefab 可能不会破坏基础 WebView2 实例。 必须对游戏对象调用 Destroy() 方法才能正确销毁它。

应用常规 Unity 优化技术：若要优化 WebView2 性能，请使用标准 Unity 优化方法，例如遮挡剔除或限制更新速率。 有关详细信息，请参阅混合现实文档中 的 Unity 性能建议 。

分析并监视 WebView2 性能：可通过多种方式来分析 HoloLens 2 Unity 应用程序的性能：

Unity Profiler：Unity 中的内置工具，可用于测量和优化各种平台上的应用程序性能，包括HoloLens 2。

可视探查器：混合现实工具包的一项功能，可提供应用程序性能的应用程序内视图。

PIX：适用于 Windows 的性能优化和调试工具，也可用于分析HoloLens 2上的 Unity 应用程序。

在 步骤 7 - 扩展 WebView2 功能中，我们介绍了一些导航方法。 在本部分中，我们将进一步了解所学内容。

另请参阅：

接口 IWebView 公开与页面导航相关的一些方法、事件和属性。 此处公开的main功能是使用 Load(Uri url)导航到给定 URL 的功能：

接口 IWithBrowserHistory 公开与页面导航相关的一些方法和事件。 这主要允许开发人员向前和向后导航，就像你期望的典型 Web 浏览体验一样：

CoreWebView2.SetVirtualHostNameToFolderMapping 方法启用虚拟主机名和文件夹路径之间的映射，使使用该主机名的网站可以访问它。 此方法将本地域名映射到本地文件夹，以便 WebView2 控件在尝试访问该域的资源时从指定的本地文件夹加载内容。

适用于 Unity 的 WebView 插件通过 IWithVirtualHost 接口公开此功能，该接口具有一个方法 SetVirtualHostMapping(string hostName, string folderPath)：

若要使用 SetVirtualHostMapping 方法，请将 设置为 hostName 任何有效的 URL 一致性字符串，例如 webview2.sample。 folderPath 可以是绝对路径或相对于应用程序的工作目录的路径，例如 Assets\Html。

假设我们在 下Assets\Html有一个名为 的 demo.html HTML 文件，以下代码片段演示了使用适用于 Unity 的 WebView 插件进行加载demo.html：

有多种方法可以在 Unity 中处理混合现实应用程序的输入。

无论 Unity 应用程序中使用的输入系统如何，都需要各种应用程序输入事件和适用于 Unity 的 WebView 插件之间的互操作代码。 这意味着将这些事件 (（例如指针事件) ）转换为 WebViewMouseEventData 对象，然后通过 IWithMouseEvent 接口将这些事件转发到插件：

WebView2 不知道 Unity 的输入系统，并且其坐标系可能与 Unity 场景不同。 因此，当存在指针向下事件时，其坐标必须转换为 WebView2 控件的坐标系。 此外，需要将指针关闭事件转换为适当的 WebViewMouseEventData 事件类型。

简单示例：

在上面的示例中，指针关闭事件将转换为 WebViewMouseEventData 对象，并转发到适用于 Unity 的 WebView 插件。 它实质上已转换为鼠标按下事件。 若要创建鼠标单击事件，需要以类似的方式处理指针向上事件。

在上面的示例中， ConvertToWebViewSpace 故意未实现。