在会议中共享

项目
04/04/2023

在会议中共享允许用户将文档或第三方 Web 应用共享到会议阶段。会议参与者可以协作并与第三方 Web 应用交互，或一起编辑文档。

下图显示了 Web 应用上的 “在会议中共享 ”按钮：

会议期间，当用户从第三方 Web 应用或文档选择“ 在会议中共享 ”按钮时，它将启动指向会议阶段的深层链接，并在会议阶段中以 Web 视图的形式打开应用。要使会议参与者与第三方 Web 应用或文档交互，他们必须在其 Teams 客户端中安装应用或文档的会议扩展。如果他们没有会议扩展，Teams 会提示参与者安装会议扩展。

选择“ 在会议中共享 ”按钮时，它将启动指向会议阶段的深层链接。下面是深层链接格式：

msteams:/l/meeting-share?deeplinkId={GUID}&fqdn={string}&lm=deeplink&appContext={json encoded app context}

有关详细信息，请参阅生成深层链接以在会议中将内容共享到阶段。

下面是用于在会议中启用共享的三种不同方法。可以使用方法之一，具体取决于你希望对网页上显示的“ 在会议中共享 ”按钮的控制程度：

此方法是在具有最少自定义项的会议按钮中显示共享的最简单方法。可以自定义按钮样式、大小和语言。

可以扫描网页，找到类名称为类型 teams-share-in-meeting-button 的任何 HTML 元素，并在页面中动态生成 “在会议中共享 ”按钮。

在网页上添加 launcher.js 脚本。

<script async defer src="https://teams.microsoft.com/share/launcher.js"></script>

在网页上 teams-share-in-meeting-button 添加一个 HTML 元素，其中包含属性中的 class 、从清单) data-app-id (应用 ID，以及用于在属性中 data-href 共享的链接。还可以包括 data-entity-name 和 data-entity-description 属性。
```
<div
  class="teams-share-in-meeting-button"
  data-href="https://<link-to-be-shared>"
  data-app-id="<app-id>"
  data-entity-name="<app-name>"
  data-entity-description="<app-content-description>"
  >
</div>
```
下面是用于自定义“在会议中共享”按钮的其他属性：
- data-button-type：指定按钮 (或 secondaryShareInMeeting) primaryShareInMeeting 的背景色。
- data-button-size：指定按钮的大小（以像素为单位）。
- data-target：指定链接是在同一窗口、新选项卡还是新窗口中打开。
- data-locale：指定所需的用户语言。

可以使用此方法在一定程度上控制要动态呈现的按钮或脚本的执行时间。脚本仅在调用时 window.shareToMicrosoftTeams.renderButtons() 执行。可以通过 API 传递特定的 HTML 元素 renderButtons({elements: [], shareInMeetingElements: [shareInMeetingButton]) 。可以自定义按钮样式、大小和语言。

API async shareToMicrosoftTeams.renderButtons(options) 呈现页面上具有类名 teams-share-button 或 teams-share-in-meeting-button 的所有共享按钮。如果对象 options (optional) 随以下代码所示的元素列表一起提供，则这些元素将呈现到 “共享 ”按钮或“ 在会议中共享”按钮中 。

options (optional): { elements?: HTMLElement[], shareInMeetingElements?: HTMLElement[] }

在网页上添加 launcher.js 脚本。

<script async defer src="https://teams.microsoft.com/share/launcher.js" onload="onLoadComplete()"></script>

创建 HTML 元素并指定所需的属性。完全加载启动器脚本后，请确保执行呈现逻辑。

async function onLoadComplete() {
   const shareInMeetingButton = document.createElement("div");
   shareInMeetingButton.setAttribute("data-app-id", "<app-id>");
   shareInMeetingButton.textContent = "Share Test App"
   shareInMeetingButton.setAttribute("data-href", "<app-content-url>");
   shareInMeetingButton.setAttribute("data-button-type", "secondaryShareInMeeting");
   shareInMeetingButton.setAttribute("data-locale", "fr-CA");
   await window.shareToMicrosoftTeams.renderButtons({elements: [], shareInMeetingElements: [shareInMeetingButton]});
}

可以使用此方法完全控制脚本的调用方式以及何时使用 window.shareToMicrosoftTeams.shareInMeetingClickHandler API 生成按钮。可以控制按钮的生成方式和位置。只需将 window.shareToMicrosoftTeams.shareInMeetingClickHandler API 附加到 onclick 按钮的属性。它可以附加到链接、按钮、下拉菜单等。你可以完全控制 UI 的显示方式。

API async shareInMeetingClickHandler(content: IShareInMeetingContent) 为“在会议中共享”按钮创建回调处理程序，可以通过选择按钮或菜单来执行该处理程序。

在网页上添加 launcher.js 脚本。

<script async defer src="https://teams.microsoft.com/share/launcher.js" onload="onLoadComplete()"></script>

创建 HTML 元素，并将添加到 shareToMicrosoftTeams.shareInMeetingClickHandler 其 onClick 属性。完全加载启动器脚本后，请确保已创建 onclick 逻辑。

async function onLoadComplete() {
   var customShareInMeetingButton = document.createElement("a");
   customShareInMeetingButton.onclick = window.shareToMicrosoftTeams.shareInMeetingClickHandler({
   url: "<app-content-url>",
   appId: "<app-id>",
   entityName: "<app-entity-name>",
   entityDescription: "<app-content-description>",
   });
}

下面是 launcher.js 定义：

属性	HTML 属性	类型	必需	默认值	说明
url	`data-href`	String	是	不适用	要共享的应用内容的 URL。
appId	`data-app-id`	String	是	不适用	要共享的应用的 ID。
entityName	`data-entity-name`	字符串	否	不适用	应用实体名称。
entityDescription	`data-entity-description`	字符串	否	不适用	要共享的应用内容的说明。
区域设置	`data-locale`	字符串	否	en-US	用户首选语言。
target	`data-target`	字符串	否	自我	指定链接是在同一窗口、新选项卡还是新窗口中打开。
buttonType	`data-button-type`	字符串	否	primaryShareInMeeting	指定按钮背景色： `primaryShareInMeeting` 或 `secondaryShareInMeeting`。
buttonSize	`data-button-size`	字符串	否	不适用	按钮大小（以像素为单位）。

第三方应用上的最终用户体验

在第三方应用上启用“在会议中共享”后，可以将应用共享到会议阶段。若要访问，请执行以下步骤：

如果安装了会议扩展：

在浏览器中打开 Web 应用，然后选择“ 在会议中共享”。
选择 “开始共享”。
Web 应用共享到会议阶段，所有参与者都可以一起交互和编辑。

如果未安装会议扩展：

在浏览器中打开 Web 应用，然后选择“ 在会议中共享”。
若要安装会议扩展应用，请选择“ 添加”。
选择 “开始共享”。
Web 应用共享到会议阶段，所有参与者都可以一起交互和编辑。

还可以生成深层链接，以共享应用以暂存和开始或加入会议。当参与正在进行的会议的用户在应用中选择了深层链接时，该应用将共享到该阶段，并显示权限弹出窗口。用户可以向参与者授予与应用协作的权限。

屏幕截图是显示权限弹出窗口的示例。

当用户不在会议中时，用户将被重定向到 Teams 日历，他们可以在其中加入会议或启动即时会议 (现在) 。

屏幕截图是一个示例，其中显示了一个弹出窗口，当没有正在进行的会议时。

用户启动即时会议 (立即) 会议后，他们可以添加参与者并与应用交互。

屏幕截图是一个示例，其中显示了添加参与者的选项以及如何与应用交互。

若要添加深层链接以在舞台上共享内容，需要具有应用上下文。应用上下文允许 Teams 客户端提取应用清单，并检查是否可以在舞台上共享。下面是应用上下文的示例：

{ "appSharingUrl" : "https://teams.microsoft.com/extensibility-apps/meetingapis/view", "appId": "9ec80a73-1d41-4bcb-8190-4b9eA9e29fbb" , "useMeetNow": false }

应用上下文的查询参数包括：

appID：这是可从应用清单获取的 ID。
appSharingUrl：需要在舞台上共享的 URL 应该是应用清单中定义的有效域。如果 URL 不是有效的域，将显示一个错误对话框，向用户提供错误说明。
useMeetNow：这包括一个布尔参数，可为 true 或 false。
- True：当 useMeetNow 值为 true 并且没有正在进行的会议时，将启动新的“立即开会”会议。当有正在进行的会议时，此值将被忽略。
- False：的默认值 useMeetNow 为 false，这意味着当深层链接共享到阶段且没有正在进行的会议时，将显示日历弹出窗口。但是，可以在会议期间直接共享。

确保所有查询参数都正确编码了 URI，并且必须在最终 URL 中对应用上下文进行两次编码。下面是一个示例：

const appContext= JSON.stringify({ 
  "appSharingUrl" : "https://teams.microsoft.com/extensibility-apps/meetingapis/view",
  "appId": "9cc80a93-1d41-4bcb-8170-4b9ec9e29fbb",
  "useMeetNow": false
});
const encodedContext = encodeURIComponent(appContext).replace(/'/g,"%27").replace(/"/g,"%22");
const encodedAppContext = encodeURIComponent(encodedContext).replace(/'/g,"%27").replace(/"/g,"%22");

可以从 Teams Web 或 Teams 桌面或移动客户端启动深层链接。

Teams Web：使用以下格式从 Teams Web 启动深层链接，以在舞台上共享内容：

msteams:/l/meeting-share?deeplinkId={GUID}&fqdn={string}&lm=deeplink&appContext={json encoded app context}

例如：https://teams.microsoft.com/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D

深度链接	格式	示例
若要共享应用并打开 Teams 日历，如果 `useMeeetNow` 为 false，则默认为。	`https://teams.microsoft.com/l/meeting-share?deeplinkId={deeplinkid}&fqdn={fqdn}}&lm=deeplink%22&appContext={encoded app context}`	`https://teams.microsoft.com/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Afalse%257D`
共享应用并启动即时会议，如果 `useMeeetNow`为 true。	`https://teams.microsoft.com/l/meeting-share?deeplinkId={deeplinkid}&fqdn={fqdn}}&lm=deeplink%22&appContext={encoded app context}`	`https://teams.microsoft.com/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D`

Teams 桌面或移动客户端：使用以下格式从 Teams 桌面或移动客户端启动深层链接，以在舞台上共享内容：

msteams:/l/meeting-share?deeplinkId={deeplinkid}&fqdn={fqdn}&lm=deeplink&appContext={encoded app context}

例如：msteams:/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D

深度链接	格式	示例
若要共享应用并打开 Teams 日历，如果 `useMeeetNow` 为 false，则默认为。	`msteams:/l/meeting-share? deeplinkId={deeplinkid}&fqdn={fqdn}&lm=deeplink%22&appContext={encoded app context}`	`msteams:/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Afalse%257D`
共享应用并启动即时会议，如果 `useMeeetNow`为 true。	`msteams:/l/meeting-share? deeplinkId={deeplinkid}&fqdn={fqdn}&lm=deeplink%22&appContext={encoded app context}`	`msteams:/l/meeting-share?deeplinkId={sampleid}&fqdn=teams.microsoft.com&lm=deeplink%22&appContext=%257B%2522appSharingUrl%2522%253A%2522https%253A%252F%252Fteams.microsoft.com%252Fextensibility-apps%252Fmeetingapis%252Fview%2522%252C%2522appId%2522%253A%25229cc80a93-1d41-4bcb-8170-4b9ec9e29fbb%2522%252C%2522useMeetNow%2522%253Atrue%257D`

查询参数为：

deepLinkId：用于遥测关联的任何标识符。
fqdn： fqdn 是一个可选参数，可用于切换到会议的适当环境，以在舞台上共享应用。它支持特定应用共享在特定环境中发生的情况。的 fqdn 默认值为企业 URL，可能的值 Teams.live.com 适用于 Teams for Life、 teams.microsoft.com或 teams.microsoft.us。

若要共享整个应用以暂存，必须在应用清单中配置 meetingStage 和 meetingSidePanel 作为框架上下文，请参阅应用清单。否则，会议与会者可能无法在舞台上看到内容。

注意

若要使应用通过验证，当你从网站、Web 应用或自适应卡片创建深层链接时，请使用 “在会议中共享” 作为字符串或副本。

代码示例

示例名称	说明	.NET	Node.js	清单
会议阶段视图	此应用有助于为 Teams 会议启用和配置应用。它还演示了在会议中使用共享功能。	View	View	View

第三方应用上的最终用户体验

代码示例

另请参阅

反馈

其他资源

启用会议中的共享

第三方应用上的最终用户体验

生成深层链接以将内容共享到会议阶段

代码示例

另请参阅

反馈

其他资源