連接你的web part到SharePoint去訪問SharePoint中的功能和數據，並且爲終端用戶提供更多的體驗。本文繼續上篇文章，進行講解。
運行Gulp Serve
確認你上篇文章中的gulp serve命令還在運行，如果沒有運行，請使用命令行切換到hello-world工程目錄中，然後運行如命令：
gulp serve訪問Page Context
當 workbench在本地運行的時候，你沒有SharePoint頁面的上下文，但是你還是可以通過其他的方式測試你的web part。例如：你可以在沒有SharePoint環境中先集中開發web part的界面，然後使用mock數據的方式模擬SharePoint數據。
但是當workbench在本地運行的時候，你還是可以訪問pageContext的幾個關鍵的屬性，例如：
- Web title
- Web absolute URL
- Web server-relative URL
- User login name
this.context.pageContextthis.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>`;保存文件，運行gulp serve的命令窗口會自動檢測是否有保存操作並且執行如下命令：
- 自動打包合併更改的code
- 刷新你本地的workbench頁面(因爲web part 代碼需要重新加載)
進入SharePoint中的workbench.aspx頁面，全路徑應該是：https://your-sharepoint-site-url/Shared%20Documents/workbench.aspx.
注意：如果你沒有安裝SPFx 開發者證書workbench會提示當前不運行加載本地的JavaScript，執行gulp trust-dev-cert命令可以安裝開發者證書。
在SharePoint中的workbench中你可以看到如下界面，此時說明page context在web part中已經是可用的。
定義list的模型
要想顯示 SharePoint中的數據，你需要先定義一個數據結構，如果要加載站點中的列表，你需要如下兩個model，在Visual Studio Code中打開src\webparts\helloWorld\HelloWorldWebPart.ts文件，在HelloWorldWebPart類上面 定義如下兩個接口
export interface ISPLists {
value: ISPList[];
}
export interface ISPList {
Title: string;
Id: string;
}從mock store中加載list信息
要想在本地的workbech中進行測試 ，你需要一個mock store用於返回mock數據。在scr\webparts\helloWorld文件夾中創建一個叫做MockHttpClient.ts的文件，然後把如下code複製到這個文件中
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文件中定義了很多個exports model，所以在Import的時候需要使用{}，在上面的例子中只有ISPList model是需要引入的。
- 在Import的時候，不需要指定文件的擴展名，在本例中是HelloWorldWebPart。
- 設置MockHttpClient是default model。
- 定義了ISPList數組，並用於返回。
import MockHttpClient from './MockHttpClient';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站點中加載list信息
下一步你需要從當前sharepoint站點中加載list信息，你需要使用SharePoint REST API從站點中加載數據，REST API URL是https://yourtenantprefix.sharepoint.com/_api/web/lists.
在HelloWorldWebPart類中添加如下方法：
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();
});
}切換到運行gulp serve命令的窗口，檢查是否存在錯誤信息，gulp會在命令行窗口報出錯誤信息，如果有錯誤你需要進行相應的處理
添加新的樣式
SharePoint Framework使用Sass作爲CSS的預處理器，明確的使用了和普通CSS語法有區別的SCSS的語法，Sass擴展了CSS的語法，可以讓你使用新的功能（例如：變量，嵌套規則等等）來開發你的web part樣式。SharePoint Framework已經包含了SCSS的編譯器，它可以把Sass文件轉換成普通的CSS文件。要添加新的樣式，請打開HelloWorld.module.scss文件，這個文件是用於定義你的樣式的，默認情況下樣式
是定義在你的web part範圍的，你可以看到你的樣式都是定義在.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會 自動rebuild，它會在HelloWorld.module.scss.ts文件中自動生成對應的標籤，一旦編譯成typescript，你可以在你的web part導入並且引用這些樣式。
你可以看render方法中如何使用樣式的：
<div class="${styles.container}">render list信息的方法
打開HelloWorldWebPart類。
SharePoint Framework提供了非常靈活的測試web part的方法，你可以在本地進行測試也可以在SharePoint站點中進行測試，SPFx使用EnvironmentType module幫助你瞭解當前運行的是什麼環境，要使用這個module，你需要先從@microsoft/sp-client-base中引入EnvironmentType，在代碼中添加 如下code:
import { EnvironmentType } from '@microsoft/sp-client-base';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);
});
}
}- this.context.environment.type屬性可以幫助你判斷是本地環境還是SharePoint環境
- 你workbench寄宿在哪個環境會決定你調用哪個方法
保存文件。
現在你需要在頁面中render list數據，在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;
}Retrieve list數據
切換到render方法，使用如下的代碼替換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();
切換到你的SharePoint中的workbench，刷新頁面然後添加HelloWorld web part你將會看大如下效果
至此已經開發完畢，你可以切換到命令行窗口，停止gulp serve，可以使用Control +C去停止gulp task。
注意：SharePoint Framework目前正處於Preview階段，隨時會進行一些更改。SharePoint Framework Client-side web parts在Office 365的生產環境中暫時不支持。