且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

SharePoint Framework 构建你的第一个web部件(三)

更新时间:2022-07-02 23:03:22

博客地址: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是可访问的,否则会一直弹出下面加载脚本失败的提示信息。

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

SharePoint Framework 构建你的第一个web部件(三)

SharePoint Framework 构建你的第一个web部件(三)

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

SharePoint Framework 构建你的第一个web部件(三)

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

SharePoint Framework 构建你的第一个web部件(三)

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

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

SharePoint Framework 构建你的第一个web部件(三)

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

SharePoint Framework 构建你的第一个web部件(三)

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

下一步

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