SharePoint Framework 构建你的第一个web部件（一）

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

SharePoint客户端web部件是出现在SharePoint页面的控件，但却是在浏览器本地运行的。他们是SharePoint网站的页面上的一个个小块。你可以使用现代的脚本开发工具和SharePoint工作台（一个开发测试平台）来构建客户端web部件，可以部署客户端web部件到O365开发者租户中的的传统的web部件页。并且对于纯JavaScript脚本的项目来说，你可以利用通用的脚本框架构建web部件，如AngularJS和React。举个例子，你可以使用React和Office UI Fabric React的组件一起来快速创建跟Office 365中用户体验相同的组件。

下面开始介绍实战。

客户端web部件是运行在SharePoint页面上下文中的客户端组件。客户端web部件可以部署到SharePoint Online，你也可以使用现代JavaScript脚本工具和库来构建他们。

客户端web部件支持：

>用HTML和JavaScript构建

>SharePoint online和本地SharePoint环境

注意：在开始跟随本篇下面的操作步骤之前，请确保你已经参照上一篇文章进行了开发环境的配置。

创建一个新的web部件项目

在你喜欢的路径上创建一个新的项目路径，按下面步骤操作：

>Win+R打开运行窗体，输入cmd回车，在打开的命令行中，先定位到希望项目所在的目录，然后运行md命令，如：

md myfirstwebpart，运行之后的效果如下图，这里我在C盘根目录创建了一个项目文件夹。

然后进入到刚才创建的目录，输入命令cd myfirstwebpart。

接下来通过Yeoman SharePoint Generator来生成一个新的web部件，执行如下的命令：

yo @microsoft/sharepoint

执行命令后会出现提示，询问解决方案的名称和路径，第一个提问可以直接回车保持跟文件夹的名称相同，第二个通过上下箭头进行选择后回车即可，这里我选择使用当前目录，如下图：

接下来会继续询问一些设置：

>web部件的名称。（直接输入回车保持默认）

>web部件的描述。（直接输入回车保持默认）

>要使用的框架，可以用上下箭头进行选择，直接输入回车的话即为默认项，不使用脚本web框架。

完成后Yeoman会开始安装必要的依赖项并生成web部件的解决方案文件，这会需要几分钟，如下图正在等待安装完成：

操作完成之后，你会看到如下图的信息表示成功：

关于故障排除的信息，查看Known issues。

使用你最喜欢的代码编辑器/IDE

由于SharePoint客户端解决方案是基于HTML/TypeScript的，你可以使用任意的代码编辑器或IDE来构建你的web部件，这个在上一篇文章中已经提到，不再赘述。本文将使用Visual Studio code来演示，你也可以使用其他喜欢的IDE。

使用Visual Studio 2015

目前，Visual Studio通过NodeJS工具来支持SharePoint客户端项目，更多信息戳这里，在之后的文章中也会对它进行详细介绍。

预览web部件

如果想预览你的web部件，编译并在本地的web服务器运行的话，做如下操作。

回到你的命令行，确保你仍然在项目目录下然后输入命令gulp serve来编译和预览你的web部件。

这个很重要，你可以将它理解为在Visual Studio里面运行F5启动调试。

该命令会执行一系列的gulp任务来在“localhost:4321”创建一个本地的基于节点的HTTPS服务器，并在你的本地开发环境中启动你的默认浏览器去预览你的web部件，运行命令的效果如下所示：

客户端工具组使用默认的HTTPS端点。但是由于没有在本地的开发环境配置默认的证书，你的浏览器会显示证书错误，如下图：

这取决于你使用的浏览器来进行下一步的操作，比如对于上图的IE和Microsoft Edge或Google Chrome来说，选择Continue to this website即可，如果是Firefox之类的，需要添加一个例外。

SharePoint客户端开发工具使用gulp作为任务运行器来处理编译进程如：

>打包并压缩JavaScript和CSS文件。

>在每个编译之前运行工具来调用打包和压缩任务。

>将SASS文件编译为CSS。

>将TypeScript文件编译为JavaScript。

如果对于gulp来说你是新手，你可以阅读Using Gulp，他描述了结合VIsual Studio的ASP.NET 5项目如何使用gulp。

Visual Studio Code内置了对gulp和其他任务运行器的支持。使用Ctrl+Shift+B来调试和预览你的web部件。

SharePoint工作台

SharePoint工作台（workbench）是一个开发者设计平台，它使你可以快速地预览和测试web部件而不需要在SharePoint中部署他们。SharePoint工作台包括客户端页面和画板，你可以在开发时添加或删除画板，测试你的web部件。

点击+号按钮来添加我们创建的web部件。点击+号时你可以看到可用的web部件列表，该列表会将我们的web部件和你的开发环境可用的web部件一同列出。

如上图所示，选择HelloWorldweb部件，将他添加到页面，如下图：

简单吗？这就是咱们的第一个客户端web部件，已经添加到了页面上。（实际上除了配置和运行几个命令，咱们什么都没有写）

选择web部件左侧的铅笔图标打开web部件属性面板，如下图：

跟传统web部件一样，这个属性是你可以自定义的，以后会讲到。这个属性面板是客户端驱动的，提供了与SharePoint的一致性设计。我们来修改一下Description属性试试，比如改为This is a test, awesome!

上图只是一个示例，在实际操作的过程中你会发现，在你在右面的面板修改属性的同时，左边的web部件的内容也会随着改变。

这是该属性面板的一个新的功能，能够配置更新行为（有反应的和无反应的）。默认情况下更新行为是有反应的，你可以在修改属性时看到更改。就像上面说的，这个更改是马上生效的。

Web部件项目结构

你可以使用Visual Studio Code来查看web部件项目的结构。

>在命令行中，定位到目录src\webparts\helloWorld。

>输入命令

code .

用Visual Studio Code（或是你喜欢的编辑器）来打开web部件项目。（不要忘了code后面的空格加点）

Visual Studio Code会打开项目，如下图：

如果你得到了错误，你可能需要install the code command in PATH。

构建SharePoint客户端web部件的主要语言是TypeScript。TypeScript是JavaScript的超类型，能够被编译成纯JavaScript。SharePoint客户端开发工具就是用TypeScript的类、模型和接口编译的，帮助开发者构建强壮的客户端web部件。

下一讲将对项目具体的结构和代码进行讲解。