MS Teams 申请流程说明
Clarification on flow of MS Teams application
我是开发这些类型的应用程序的新手，所以请多多包涵 :) 我很难理解什么是可能的，什么是不可能的，以及如何去做根据我们的需要正确设置它。 Microsoft 文档是...我认为 subpar 就是这个词，所以我求助于你，伟大的社区。
我的情况：我们想要一个具有 3 个选项卡的应用程序，搜索、招聘和个人资料，以及一个简单的机器人（目前）。我们在 React 中为机器人的选项卡和节点执行此操作，根据我见过的所有教程/示例，通常都是这种情况。
我们使用 AWS Amplify 身份验证，以便在 App 组件中环绕我们的路由，如下面的屏幕截图所示。
此脚手架由 Microsoft Teams Toolkit VSCode 扩展生成，本质上是 App Studio，但作为扩展构建。我发现代码结构非常干净，非常接近我从 create-react-app 项目中获得的标准结构。
搜索、个人资料和招聘这三个路线是它们自己的选项卡，如下面的清单截图所示
编辑：实际上你在这里看不到它...... App.tsx 底部的 export default withAuthenticator(App) 就是发生这种情况的地方......我的错:)
我还为选项卡和机器人设置了 ngrok 隧道（您在此处看不到），并且我能够将 development.zip 旁加载到 Teams 中。所有三个选项卡都会显示并指向它们各自的内容。 Amplify 的身份验证也有效，所以如果我登录，我可以看到选项卡的内容，如果我注销，我会在页面上显示一个登录表单。基本上，据我了解，每个选项卡都指向一个路由，该路由依次呈现相应的组件。有了 microsoft-teams-sdk 库，我就可以访问选项卡之间的上下文，所以知道我来自哪里，我在哪里等等。
然而，尽管内容在 Teams 中显示正常，但我一转到 localhost:3000/search 或 localhost:3000/profile 等，就看不到任何内容。但是，运行 选项卡的 npm start 确实给我这条消息：
这是我打开的本地主机：
如您所见，没有内容。 F12 打开控制台也没有显示错误。
出于明显的原因，我希望能够在浏览器中调试我的应用程序、单步执行代码等。但是，由于页面未显示，我似乎无法做到这一点。
考虑到我努力尝试让它工作，我尝试了另一个生成器，Yeoman for Teams。
我发现脚手架非常混乱，我找不到您在“标准”React 应用程序中获得的根组件来包装我的 Amplify 身份验证组件。但是，对于 Yeo，每个 .tsx 组件都有对应的 .html 内容页面。
当 运行 在本地使用 ngrok-serve（在他们的 package.json 中包含脚本）时，可以在 localhost:3000/search 等上访问选项卡
这是我们尝试整合的第一个 Teams 应用程序。自然地，你去看看那里有什么。我启动了 GitHub 应用程序、Jira Cloud 应用程序、Quickbooks 等。它们都有多个选项卡。我以GitHub为例。
至少对我来说，这些选项卡中的每一个似乎都指向单域上 SPA 的路由选项卡 1 -> github。com/teamsapp/assigned，选项卡 2 -> github.com/teamsapp/created, 等等
他们是怎么做到的？我理解错了吗？ React SPA 是否需要位于其自己的单个选项卡中才能正常工作，并且该单个选项卡显示应用程序，而路由本身由 React 应用程序严格处理？
我倾向于认为情况并非如此，因为许多应用程序都有多个选项卡在它们之间进行交互，就像您单击选项卡 1 中的列表项并在选项卡 2 中填充某些内容一样，就像 GitHub 或 Jira Cloud 应用程序，例如。
鉴于项目处于早期阶段，我们不反对回到绘图板，但如果 SPA 必须在它自己的选项卡中，我需要能够证明放弃“多个选项卡”的想法是合理的.
我知道这篇文章很长 post，感谢您阅读全部内容。一如既往，这个神奇社区的同胞们，我期待着您可以提供的任何和所有提示或意见。如果我忘记了什么，我很乐意提供更多信息。
谢谢！
从概念上讲，这当然可以直接浏览，但您需要注意 microsoftTeams.initialize(); 行。 microsoftTeams 对象 只有 在 Teams 选项卡中可用 - 在独立体验中，它不会被填充，因此 .initialize() 操作将失败。事实上，如果您在那里访问上下文（您可能想要这样做），它将失败。尝试在该行放置一个断点，它应该会因空引用错误而失败。
更新：更仔细地查看您的代码，您实际上可以尝试将 microsoftTeams.initialize(); 放入 if (window.parent === window.self) 检查中，这对您的情况也应该有所帮助。
我是开发这些类型的应用程序的新手，所以请多多包涵 :) 我很难理解什么是可能的，什么是不可能的，以及如何去做根据我们的需要正确设置它。 Microsoft 文档是...我认为 subpar 就是这个词，所以我求助于你，伟大的社区。
我的情况：我们想要一个具有 3 个选项卡的应用程序，搜索、招聘和个人资料，以及一个简单的机器人（目前）。我们在 React 中为机器人的选项卡和节点执行此操作，根据我见过的所有教程/示例，通常都是这种情况。
我们使用 AWS Amplify 身份验证，以便在 App 组件中环绕我们的路由，如下面的屏幕截图所示。
此脚手架由 Microsoft Teams Toolkit VSCode 扩展生成，本质上是 App Studio，但作为扩展构建。我发现代码结构非常干净，非常接近我从 create-react-app 项目中获得的标准结构。
搜索、个人资料和招聘这三个路线是它们自己的选项卡，如下面的清单截图所示
我还为选项卡和机器人设置了 ngrok 隧道（您在此处看不到），并且我能够将 development.zip 旁加载到 Teams 中。所有三个选项卡都会显示并指向它们各自的内容。 Amplify 的身份验证也有效，所以如果我登录，我可以看到选项卡的内容，如果我注销，我会在页面上显示一个登录表单。基本上，据我了解，每个选项卡都指向一个路由，该路由依次呈现相应的组件。有了 microsoft-teams-sdk 库，我就可以访问选项卡之间的上下文，所以知道我来自哪里，我在哪里等等。
然而，尽管内容在 Teams 中显示正常，但我一转到 localhost:3000/search 或 localhost:3000/profile 等，就看不到任何内容。但是，运行 选项卡的 npm start 确实给我这条消息：
这是我打开的本地主机：
出于明显的原因，我希望能够在浏览器中调试我的应用程序、单步执行代码等。但是，由于页面未显示，我似乎无法做到这一点。
考虑到我努力尝试让它工作，我尝试了另一个生成器，Yeoman for Teams。
我发现脚手架非常混乱，我找不到您在“标准”React 应用程序中获得的根组件来包装我的 Amplify 身份验证组件。但是，对于 Yeo，每个 .tsx 组件都有对应的 .html 内容页面。
当 运行 在本地使用 ngrok-serve（在他们的 package.json 中包含脚本）时，可以在 localhost:3000/search 等上访问选项卡
这是我们尝试整合的第一个 Teams 应用程序。自然地，你去看看那里有什么。我启动了 GitHub 应用程序、Jira Cloud 应用程序、Quickbooks 等。它们都有多个选项卡。我以GitHub为例。
至少对我来说，这些选项卡中的每一个似乎都指向单域上 SPA 的路由选项卡 1 -> github。com/teamsapp/assigned，选项卡 2 -> github.com/teamsapp/created, 等等
他们是怎么做到的？我理解错了吗？ React SPA 是否需要位于其自己的单个选项卡中才能正常工作，并且该单个选项卡显示应用程序，而路由本身由 React 应用程序严格处理？
我倾向于认为情况并非如此，因为许多应用程序都有多个选项卡在它们之间进行交互，就像您单击选项卡 1 中的列表项并在选项卡 2 中填充某些内容一样，就像 GitHub 或 Jira Cloud 应用程序，例如。
鉴于项目处于早期阶段，我们不反对回到绘图板，但如果 SPA 必须在它自己的选项卡中，我需要能够证明放弃“多个选项卡”的想法是合理的.
我知道这篇文章很长 post，感谢您阅读全部内容。一如既往，这个神奇社区的同胞们，我期待着您可以提供的任何和所有提示或意见。如果我忘记了什么，我很乐意提供更多信息。
谢谢！
从概念上讲，这当然可以直接浏览，但您需要注意 microsoftTeams.initialize(); 行。 microsoftTeams 对象 只有 在 Teams 选项卡中可用 - 在独立体验中，它不会被填充，因此 .initialize() 操作将失败。事实上，如果您在那里访问上下文（您可能想要这样做），它将失败。尝试在该行放置一个断点，它应该会因空引用错误而失败。
更新：更仔细地查看您的代码，您实际上可以尝试将 microsoftTeams.initialize(); 放入 if (window.parent === window.self) 检查中，这对您的情况也应该有所帮助。