在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里: