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

简介: 博客地址:http://blog.csdn.net/FoxDave本篇接上一讲,我们一起来看一下如何部署和测试本地开发的web部件。在SharePoint中预览web部件SharePoint工作台在SharePoint中被承载,用来在开发环境预览和测试本地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进行数据交互。



相关文章
|
4天前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
15 3
|
3天前
|
存储 消息中间件 缓存
构建互联网高性能WEB系统经验总结
构建互联网高性能WEB系统经验总结
|
21小时前
|
前端开发 JavaScript 开发者
构建响应式设计的现代Web应用:实用技巧与工具
【10月更文挑战第24天】本文介绍了构建响应式Web应用的实用技巧和工具,涵盖流体网格布局、弹性图片、CSS媒体查询、CSS Grid和Flexbox、响应式导航菜单、图片和字体的响应式处理,以及测试和调试工具。掌握这些技能将帮助开发者提升用户体验和项目适应性。
|
1天前
|
JSON API 数据格式
如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架
本文介绍了如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架,适合小型项目和微服务。文章从环境准备、创建基本Flask应用、定义资源和路由、请求和响应处理、错误处理等方面进行了详细说明,并提供了示例代码。通过这些步骤,读者可以快速上手构建自己的RESTful API。
7 2
|
2天前
|
数据可视化 数据库 开发者
使用Dash构建交互式Web应用程序
【10月更文挑战第16天】本文介绍了使用Python的Dash框架构建交互式Web应用程序的方法。Dash结合了Flask、React和Plotly等技术,让开发者能够快速创建功能丰富的数据可视化应用。文章从安装Dash开始,逐步介绍了创建简单应用程序、添加交互元素、部署应用程序以及集成更多功能的步骤,并提供了代码示例。通过本文,读者可以掌握使用Dash构建交互式Web应用程序的基本技巧和高级功能。
11 3
|
1天前
|
缓存 前端开发 JavaScript
构建高效、可维护的Web应用
【10月更文挑战第23天】构建高效、可维护的Web应用
8 1
|
4天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
13 4
|
15天前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
29 5
|
15天前
|
存储 JavaScript 前端开发
深入探索 Vue.js:构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js:构建现代 Web 应用的利器
12 1
|
1天前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
5 0