SharePoint Framework 1.7 新功能（三）快速开发Teams Tab选项卡

最新推荐文章于 2025-02-01 00:09:57 发布

原创

最新推荐文章于 2025-02-01 00:09:57 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sharepoint framework #create teams tab

本文介绍了如何利用SharePoint Framework（SPFx）1.7的开发者预览功能快速创建Microsoft Teams选项卡。通过Yeoman生成器创建项目，设置--plusbeta选项，获取Teams上下文并进行交互。详细步骤包括初始化项目、获取Teams Context、修改渲染方法、打包发布及在Teams中部署应用。

在SPFx 1.7的开发者预览功能里，提供了一个可以快速开发Teams Tab选项卡的方法。可以像开发SharePoint中的webpart一样，来开发Teams Tab选项卡。下面介绍一下这个新功能。

首先使用Yeoman generator创建SPFx的项目，注意需要使用--plusbeta选项，指定使用开发者预览版本：

yo @microsoft/sharepoint --plusbeta

创建项目的配置如下，注意在第四个问题处要选择Y，默认部署到所有站点。

创建项目成功之后，首先打开webpart的文件，这里是“SpFxTeamsTabDemoWebPart.ts”，在SpFxTeamsTabDemoWebPart类中添加内部成员_teamsContext，这个对象代表Teams的上下文，负责与Teams的交互。然后添加一个onInit方法，来获取这个对象：

  private _teamsContext : microsoftTeams.Context;

  protected onInit(): Promise<any> {
    let retVal: Promise<any> = Promise.resolve();
    if (this.context.microsoftTeams) {
      retVal = new Promise((resolve, reject) => {
        this.context.microsoftTeams.getContext(context => {
          this._teamsContext = context;
          resolve();
        })