如何在Microsoft Teams会议内标签页中添加通知栏？

你要实现的iframe外层通知栏是Microsoft Teams客户端提供的原生UI能力，不需要自行操作外层DOM，直接调用Teams JS SDK的官方API即可实现，渲染位置、样式都和官方文档的示例效果完全一致，天然展示在你的应用iframe外部。

实现步骤 #

• 第一步：集成最新版Teams JS SDK v2，推荐使用npm安装：npm install @microsoft/teams-js
• 第二步：完成SDK初始化，所有原生能力调用都需要在初始化完成后执行：

import * as microsoftTeams from "@microsoft/teams-js";

// 初始化SDK
microsoftTeams.app.initialize().then(async () => {
  // 初始化成功后即可调用通知接口
});

• 第三步：调用会议通知API渲染通知，通用的全局会议通知使用meeting.showNotification接口，示例代码如下：

const notificationConfig = {
  title: "通知标题",
  message: "通知具体内容",
  // 通知类型，支持info、success、warning、error四种，对应不同的样式主题
  notificationType: microsoftTeams.meeting.NotificationType.info,
  timeout: 6000, // 通知自动消失时长，单位为毫秒，设置为0则常驻直到用户手动关闭
  onTap: () => {
    // 配置用户点击通知后的触发逻辑
  }
}

microsoftTeams.meeting.showNotification(notificationConfig);

注意事项 #

• 不需要手动修改iframe外层的DOM结构，所有通知渲染逻辑由Teams客户端统一处理，天然符合官方设计规范，不会被iframe的沙箱限制
• 该能力支持多端自动适配，桌面端、移动端、Web版Teams会自动调整通知的展示位置和样式，不需要额外做适配开发
• 临时弹出类通知优先使用上述showNotification接口，如果需要常驻类顶部操作提示，可以使用应用自定义标签扩展能力实现

内容的提问来源于stack exchange，提问作者Riya Ghosh