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

在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();
        });
      });
    }
    return retVal;
  }

这里需要注意一下，this.context对象是webpart的上下文，只有使用了--plusbeta，也就是使用开发者预览版本的时候，this.context对象才会包含microsoftTeams这个Teams的上下文对象，否则会报错。

最后將render()方法替换为如下代码，

public render(): void {

    let title: string = '';
    let subTitle: string = '';
    let siteTabTitle: string = '';

    if (this._teamsContext) {
      // 輸出team名字
      title = "Welcome to Teams!";
      subTitle = "Building custom enterprise tabs for your business.";
      siteTabTitle = "We are in the context of following Team: " + this._teamsContext.teamName;
    }
    else
    {
      // 輸出SharePoint站點標題
      title = "Welcome to SharePoint!";
      subTitle = "Customize SharePoint experiences using Web Parts.";
      siteTabTitle = "We are in the context of following site: " + this.context.pageContext.web.title;
    }

    this.domElement.innerHTML = `
      <div class="${ styles.spFxTeamsTabDemo }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">${title}</span>
              <p class="${ styles.subTitle }">${subTitle}</p>
              <p class="${ styles.description }">${siteTabTitle}</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;
  }

这段代码通过判断this._teamsContext对象是否存在，来判断webpart的上下文，如果存在，就说明webpart在Teams的上下文中，此时输出当前team的名字（this._teamsContext.teamName）。否则输出当前SharePoint 站点的标题。

除了可以使用_teamsContext对象获取team的名字外，还可以获取Teams中的其他信息。

接下来使用gulp捆綁，打包：

gulp bundle --ship
gulp package-solution --ship

打包之后

在部署到Teams之前，需要Teams的一个权限“Allow sideloading of external apps”是开启状态。回到管理中心，找到Settings，点击Services & add-ins，然后选择Microsoft Teams：

检查权限是否开启：

确保权限开启之后，回到项目中。在项目中可以看到一个teams文件夹，这个是在创建项目的时候就已经生成的。其中包含两个图片，和一个manifest.json配置文件。我们需要做的就是将刚才打包生成的spfx-teams.sppkg文件拖拽到teams文件夹中。

然后可以手动将teams文件夹下的四个文件打包为一个zip文件（不要包含任何的文件夹），或者使用如下命令，在terminal中生成zip文件：

有了这个zip文件之后，就可以上传到Teams中使用了。

打开Teams，点击应用商店，然后上载自定义应用，选择为我或我的团队上载：

上传成功之后会弹出配置页面如下：

指定一个team，点击安装按钮。

安装成功之后，回到team页面，添加一个选项卡：

可以找到刚刚安装的选项卡，将选项卡添加到team里：

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

猜你喜欢