如何从Teams机器人自适应卡片跳转至个人Tab并打开指定URL

数据老陈

2026-9-25

实现方案

1. 构造带目标路径参数的Deep Link

在原有跳转Tab的Deep Link基础上，追加context参数，将你需要加载的指定URL放到自定义上下文字段中。
首先构造context的JSON结构：

{
  "customContext": {
    "targetUrl": "a.example.com/b/c?d=f"
  }
}

将上述JSON做URL编码后，拼接到原有Deep Link后，最终的openUrl按钮链接格式如下：
https://teams.microsoft.com/l/entity/<appId>/<entityId>?context=%7B%22customContext%22%3A%7B%22targetUrl%22%3A%22a.example.com%2Fb%2Fc%3Fd%3Df%22%7D%7D
请将链接中的<appId>替换为你的应用ID，<entityId>替换为TT Tab对应的实体ID。

2. 修改TT Tab的前端加载逻辑

你的Tab默认加载的是a.example.com/g，需要在页面初始化阶段读取Teams透传的上下文参数，拿到目标URL后跳转加载对应内容：

引入Teams JS SDK，在页面初始化完成后调用getContext接口读取传入的自定义上下文
解析出targetUrl参数后，直接跳转对应路径即可，单页应用也可以调用前端路由跳转
示例代码：

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

// 初始化Teams SDK
microsoftTeams.app.initialize().then(() => {
  // 获取上下文参数
  microsoftTeams.getContext((context) => {
    const targetUrl = context?.customContext?.targetUrl;
    // 校验URL合法性，仅允许同域跳转
    if (targetUrl && targetUrl.startsWith('a.example.com')) {
      window.location.href = targetUrl;
      // 单页应用路由跳转示例
      // router.push(targetUrl.replace(/^a\.example\.com/, ''))
    }
  });
});