SharePoint Framework 把你的客户端web部件链接到SharePoint

 博客地址： http://blog.csdn.net/FoxDave

把你的web部件链接到SharePoint来访问SharePoint中的功能和数据，为终端用户提供更完整的体验。本篇会基于以前构建的hello world的web部件继续改进。

运行gulp serve

很少数，这步仍是首要的，不然无法进行调试的。确保你已经在命令行中运行了gulp serve这个命令。

访问页面上下文

当本地工做台被承载起来的时候，你是没法得到SharePoint页面上下文的，固然你仍然能用许多不一样的方式测试你的web部件。好比，你能够专一于构建web部件的UX（用户体验），使用假数据去模拟与SharePoint的交互。

可是当工做台在SharePoint中承载时，你就能够访问页面上下文了，上下文提供了不少关键的属性，如：

>网站标题

>网站绝对URL

>网站相对URL

>用户登陆名

你能够在web部件类中使用下面的变量访问页面上下文：

this.context.pageContext

切换到Visual Studio code（或者是你喜欢的IDE），打开文件src\webparts\helloWorld\HelloWorldWebPart.ts。

在render方法中，用下面的代码替换代码块中的innerHTML部分：

this.domElement.innerHTML = `
<div class='${styles.helloWorld}'>
    <div class='${styles.container}'>
        <div class='ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}'>
        <div class='ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1'>
            <span class='ms-font-xl ms-fontColor-white'>Welcome to SharePoint!</span>
            <p class='ms-font-l ms-fontColor-white'>Customize SharePoint experiences using Web Parts.</p>
            <p class='ms-font-l ms-fontColor-white'>${this.properties.description}</p>
            <p class='ms-font-l ms-fontColor-white'>Loading from ${this.context.pageContext.web.title}</p>
            <a href='https://github.com/SharePoint/sp-dev-docs/wiki' class='ms-Button ${styles.button}'>
                <span class='ms-Button-label'>Learn more</span>
            </a>
        </div>
        </div>
</div>
</div>`;

注意一下${ }是如何被用来在HTML块中输出变量的。一个额外的HTML的P标签用来显示this.context.pageContext.web.title属性。因为这个web部件如今是从本地环境加载的，标题会显示为Local Workbench。

保存文件，运行着的gulp serve会发现保存操做并：

>自动编译和打包更新的代码。

>刷新你的本地工做台页面（由于web部件代码须要从新加载）。

你能够将Visual Studio Code和命令行窗体左右排列放在一块儿，就能发现上述的机制。

在你的浏览器中，访问本地的workbench.html，连接为：http://localhost:4321/temp/workbench.html，以下图。

下面我们访问SharePoint的workbench.aspx，完整的URL是这样的格式，具体的domain自行修改：https://your-sharepoint-site-url/Shared%20Documents/workbench.aspx。

咱们仍然用Chrome去看一下效果，以下图，能够看到可以读取到网站的标题了。

定义列表模型

你须要一个列表模型去开始跟SharePoint列表数据交互，你须要两个模型来获取列表。

切换到Visual Studio Code，打开文件src\webparts\helloWorld\HelloWorldWebPart.ts。

在HelloWorldWebPart类的上方定义以下的接口模型：

export interface ISPLists {
    value: ISPList[];
}

export interface ISPList {
    Title: string;
    Id: string;
}

添加完代码的文件以下图所示，ISPList接口用来掌管咱们要链接的SharePoint列表信息。

从模拟存储获取列表

你须要一个假的存储去返回假的数据来测试本地的工做台。

在src\webparts\helloWorld路径建立一个名为MockHttpClient.ts的新文件，在项目结构上的helloWorld节点右键，选择New File。

而后在新建的文件中输入如下代码：

import { ISPList } from './HelloWorldWebPart';

export default class MockHttpClient {

    private static _items: ISPList[] = [{ Title: 'Mock List', Id: '1' }];
    
    public static get(restUrl: string, options?: any): Promise<ISPList[]> {
    return new Promise<ISPList[]>((resolve) => {
            resolve(MockHttpClient._items);
        });
    }
}

关于上面的代码须要知道如下几点：

>因为在HelloWorldWebPart.ts文件中有不少导出，特定的一个导入使用大括号｛｝指定了。在这里，只须要导入数据模型ISPList。

>当从默认模块导入时（这里是HelloWorldWebPart），你不须要输入文件的扩展名。

>它将MockHttpClient类导出为默认模块，这能够在其余文件被导入。

>它编译初始的ISPList模拟数组并返回。

保存文件，如今你能够在HelloWorldWebPart类中使用MockHttpClient类了。首先你须要导入MockHttpClient模块。

打开HelloWorldWebPart.ts文件。

在代码import { IHelloWorldWebPartProps } from './IHelloWorldWebPartProps';的下面粘贴下面的代码：

import MockHttpClient from './MockHttpClient';

在HelloWorldWebPart类中添加下面的私有方法来模拟获取列表的操做。

private _getMockListData(): Promise<ISPLists> {
    return MockHttpClient.get(this.context.pageContext.web.absoluteUrl)
        .then((data: ISPList[]) => {
             var listData: ISPLists = { value: data };
             return listData;
         }) as Promise<ISPLists>;
}

保存文件，添加完代码以后的文件以下图：

从SharePoint网站获取列表

接下来你须要从当前SharePoint网站获取列表。你将会使用SharePoint REST API来从网站获取列表数据，该操做的地址为https://yourtenantprefix.sharepoint.com/_api/web/lists。

在HelloWorldWebPart类中添加下面的方法来从SharePoint中获取列表数据：

private _getListData(): Promise<ISPLists> {
return this.context.httpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`)
        .then((response: Response) => {
        return response.json();
        });
}

该方法使用了一个httpClient帮助类，这个类在SharePoint客户端平台上可用来执行REST API。上面的代码中它使用ISPLists模型并应用了不获取隐藏列表的筛选条件。

保存文件，切换到运行gulp serve的命令行窗口看看是否有错误发生。若是有错误发生的话须要先修复错误再日后继续。

添加新的样式

SharePoint Framework使用Sass做为CSS预处理器，特别使用了SCSS语法，该语法彻底符合正常的CSS语法。Sass扩展了CSS语言，容许你使用像变量、嵌套规则和内联导入等功能来为你的web部件组织和建立高效的样式表。SharePoint Framework里面已经提供了SCSS编辑器，它能够将你的Sass文件转换成正常的CSS文件，同时还在开发过程当中提供了类型的版本。

要想添加新的样式，打开文件HelloWorld.module.scss，在这个SCSS文件中定义你本身的样式。

默认状况下，样式的范围是你的web部件，你能够看到定义在.helloWorld下的样式。

在.button样式下添加下面的样式：

.list {
    color: #333333;
    font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    box-sizing: border-box;
    margin: 10;
    padding: 10;
    line-height: 50px;
    list-style-type: none;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.listItem {
    color: #333333;
    vertical-align: center;
    font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    box-shadow: none;
    *zoom: 1;
    padding: 9px 28px 3px;
    position: relative;
}

保存文件，gulp会立刻将代码从新编译，这也会在HelloWorld.module.scss.ts文件中同时生成相应的类型。一旦编译为typescript，你就能在你的web部件代码中导入并引用这些样式了。

你能够看到web部件中的render方法。

<div class="${styles.container}">

获取展现列表信息的方法

打开HelloWorldWebPart类文件。SharePoint工做台提供了足够的灵活性，使你能够在本地环境和SharePoint中测试web部件。SharePoint Framework旨在借助这种能力经过使用EnvironmentType模块帮助你了解你的web部件运行在哪一个环境。

你首先须要从@microsoft/sp-client-base包中导入EnvironmentType模块，将下面的代码添加到导入部分：

import { EnvironmentType } from '@microsoft/sp-client-base';

将下面的私有方法添加到HelloWorldWebPart类中去调用各自的方法获取列表数据：

private _renderListAsync(): void {
    // Local environment
    if (this.context.environment.type === EnvironmentType.Local) {
        this._getMockListData().then((response) => {
        this._renderList(response.value);
        }); }
        else {
        this._getListData()
        .then((response) => {
            this._renderList(response.value);
        });
    }
}

关于_renderListAsync方法中承载类型的说明：

>this.context.environment.type属性会帮助你检查当前是处在本地环境仍是SharePoint环境。

>调用哪一个方法取决于你的工做台在哪承载。

>目前会提示_renderList找不到，不要着急，下面会补全。

保存文件，如今你须要将从REST API获取到的列表数据展现出来。将下面的私有方法添加到HelloWorldWebPart类中：

private _renderList(items: ISPList[]): void {
    let html: string = '';
    items.forEach((item: ISPList) => {
        html += `
        <ul class="${styles.list}">
            <li class="${styles.listItem}">
                <span class="ms-font-l">${item.Title}</span>
            </li>
        </ul>`;
    });

    const listContainer: Element = this.domElement.querySelector('#spListContainer');
    listContainer.innerHTML = html;
}

该方法经过styles这个变量引用了以前新添加的CSS样式，保存文件，没有问题的话会弹出一个编译成功的提示。

获取列表数据

定位到render方法，而后用下面的代码替换原来的内容：

this.domElement.innerHTML = `
<div class="${styles.helloWorld}">
    <div class="${styles.container}">
        <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
            <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
                <span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
                <p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
                <p class="ms-font-l ms-fontColor-white">${this.properties.description}</p>
                <p class="ms-font-l ms-fontColor-white">${this.properties.test2}</p>
                <p class='ms-font-l ms-fontColor-white'>Loading from ${this.context.pageContext.web.title}</p>
                <a href="https://github.com/SharePoint/sp-dev-docs/wiki" class="ms-Button ${styles.button}">
                    <span class="ms-Button-label">Learn more</span>
                </a>
            </div>
        </div>
    <div id="spListContainer" />
    </div>
</div>`;

this._renderListAsync();

保存文件，一样gulp serve会自动进行编译，确保没有发生任何错误。

切换到你的本地工做台，添加HelloWorld的web部件，你会看到返回的模拟数据，以下图：

接下来访问SharePoint承载的工做台，效果以下图：

如今你能够暂时中止gulp serve的运行了，切换到命令行，用Ctrl+C来中断gulp task。

下一步

恭喜你成功地在你的web部件中链接了SharePoint的数据。在下一讲咱们将继续深刻讲解，如何将web部件部署到一个传统的SharePoint服务端页面。