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

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

本篇接上一讲，我们一起来看一下如何部署和测试本地开发的web部件。

在SharePoint中预览web部件

SharePoint工作台在SharePoint中被承载，用来在开发环境预览和测试本地web部件。它的主要优势是运行在SharePoint上下文的，你可以跟SharePoint数据进行交互。

还记得之前配置的Office 365开发者租户吗？忘了的话点这里。

首先把workbench.aspx这个文件上传到你的SharePoint开发者网站的文档库，得到一个完整的URL，如https://your-sharepoint-site/Shared%20Documents/workbench.aspx。

注意，这里要确保你的本地调试是可用的，什么意思呢？在第一部分介绍的gulp serve命令要处于执行中，即开启状态，否则本地的那个是不可访问的。并且，要确保https://localhost:4321/temp/manifests.js是可访问的，否则会一直弹出下面加载脚本失败的提示信息。

默认情况下你的浏览器可能是禁止加载本地脚本的，这时工作台会提示你这种情况，示例图如下：

为了执行本地脚本，你需要将浏览器配置为可从未经身份验证的源加载脚本。这是由于以HTTPS方式连接网页但是却以HTTP方式加载脚本。不同的浏览器启用此设置的方式不同，比如在Chrome浏览器中，你可以直接通过点击地址栏右面的图标，选择Load unsafe scripts。IE的话就在工具选项的安全选项卡里面找那个设置。

当你能够加载脚本之后，你就会看到工作台加载了出来。将hello world这个web部件添加到画布，如下图：

你应该会注意到现在SharePoint工作台有了Office 365的套件导航栏，即SharePoint Online网站页面右上角的菜单部分，本地打开的那个工作台文件是没有这个的。

选择画布上的加号图标显示工具箱，工具箱会显示SharePoint工作台被承载的网站上可用的web部件，当然还有我们的HelloWorld的web部件。

从工具箱添加HelloWorldWebPart。这样一来，你的web部件就运行在SharePoint的页面上了！如下图，可以看到自定义的属性已经被添加并显示在了web部件上。

由于你现在仍然在开发和测试你的web部件，目前没有必要打包和部署你的web部件到SharePoint上。

下一步

恭喜你现在运行起来了第一个Hello World的web部件。下一讲咱们将在这个web部件的基础上继续扩展，跟SharePoint进行数据交互。