通过

在选项卡应用内导航

  • 项目

Microsoft Teams JavaScript 客户端库 (TeamsJS) 为选项卡中的导航提供支持。本文讨论可用的选项，其中包括导航类型，例如应用内的选项卡之间，或者通过使用 Teams UI 组件和后退按钮。

注意

本主题反映 Microsoft Teams JavaScript 客户端库版本 2.0.x (TeamsJS) 。 如果使用的是早期版本，请参阅 TeamsJS 库概述 ，获取有关最新 TeamsJS 与早期版本之间的差异的指导。

选项卡提供了增强 Microsoft Teams 体验的好方法。 你可以使用选项卡在 Teams 中直接为用户提供对 Web 应用程序的访问权限，而无需再次登录。 有关选项卡以及如何跨 Microsoft 365 产品扩展个人选项卡的详细信息，请参阅 Teams 的生成选项卡 和 跨 Microsoft 365 扩展 Teams 个人选项卡。

TeamsJS 库 的页面 功能支持在应用中的选项卡之间导航。 具体而言， pages.currentApp 命名空间提供一个函数 navigateTo(NavigateWithinAppParams) ，允许导航到当前应用中的特定选项卡，以及一个用于导航到应用清单中定义的第一个选项卡的函数 navigateToDefaultPage() 。

以下代码演示如何导航到特定页面：

if (pages.currentApp.isSupported()) {
    const navPromise = pages.currentApp.navigateTo({pageId: <pageId>, subPageId:<subPageId>});
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}
else {/*Handle situation where capability isn't supported*/
    const navPromise = pages.navigateToApp({appId: <appId>, pageId: <pageId>});
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}

以下代码演示如何导航到应用的默认选项卡：

if (pages.currentApp.isSupported()) {
    const navPromise = pages.currentApp.navigateToDefaultPage();
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}
else {/*Handle situation where capability isn't supported*/}

注意

选项卡应用导航仅在 新的 Teams 客户端中受支持。

使用 pages.navigateToApp () 函数或 深层链接 进行选项卡应用导航。

配置后退按钮导航

当应用有多个选项卡时，用户可以使用 Microsoft 365 主机应用的后退按钮向后浏览导航历史记录。 但是，历史记录不包括用户在选项卡中执行的操作。如果要增强后退按钮体验，可以维护自己的内部导航堆栈，并为后退按钮选择配置自定义处理程序。 这可以通过 命名空间中的 pages.backStack 函数来实现registerBackButtonHandler()。

注册处理程序后，它会帮助你在系统执行操作之前处理导航请求。 如果处理程序能够管理请求，则它应返回 true ，以便系统无需执行进一步操作。 如果内部堆栈为空，它应返回 false ，以便系统可以改为调用 navigateBack() 函数并采取相应的操作。

将焦点返回到主机应用

用户开始使用选项卡中的元素后，默认情况下，焦点将保留在 iFrame 的元素上，直到用户选择其外部。 如果 iFrame 是使用键盘快捷方式 (Tab 键或 F6 键) 导航的用户的一部分，则可以专注于主机应用。 可以使用 函数专注于主机应用 pages.returnFocus() 。 函数 returnFocus() 接受一个布尔值，指示在主机应用中前进焦点的方向; true 对于向前和 false 向后。 通常，向前突出显示搜索栏，向后突出显示应用栏。

代码示例

示例名称 说明 Node.js
选项卡应用导航 示例代码演示如何在应用中的选项卡之间导航。 View

另请参阅