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进行数据交互。



相关文章
|
11天前
|
安全 Linux 开发工具
零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
OpenIM 为开发者提供开源即时通讯 SDK,作为 Twilio、Sendbird 等云服务的替代方案。借助 OpenIM,开发者可以构建安全可靠的即时通讯应用,如 WeChat、Zoom、Slack 等。 本仓库基于开源版 OpenIM SDK 开发,提供了一款基于 Electron 的即时通讯应用。您可以使用此应用程序作为 OpenIM SDK 的参考实现。本项目同时引用了 @openim/electron-client-sdk 和 @openim/wasm-client-sdk,分别为 Electron 版本和 Web 版本的 SDK,可以同时构建 PC Web 程序和桌面应用(Wi
28 2
|
2月前
|
安全 应用服务中间件 网络安全
实战经验分享:利用免费SSL证书构建安全可靠的Web应用
本文分享了利用免费SSL证书构建安全Web应用的实战经验,涵盖选择合适的证书颁发机构、申请与获取证书、配置Web服务器、优化安全性及实际案例。帮助开发者提升应用安全性,增强用户信任。
|
3月前
|
监控 前端开发 JavaScript
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
59 6
|
3月前
|
存储 消息中间件 缓存
构建互联网高性能WEB系统经验总结
如何构建一个优秀的高性能、高可靠的应用系统对每一个开发者至关重要
43 2
|
3月前
|
JSON 前端开发 API
使用Python和Flask构建简易Web API
使用Python和Flask构建简易Web API
175 3
|
3月前
|
机器学习/深度学习 数据采集 Docker
Docker容器化实战:构建并部署一个简单的Web应用
Docker容器化实战:构建并部署一个简单的Web应用
|
3月前
|
SQL 安全 前端开发
PHP与现代Web开发:构建高效的网络应用
【10月更文挑战第37天】在数字化时代,PHP作为一门强大的服务器端脚本语言,持续影响着Web开发的面貌。本文将深入探讨PHP在现代Web开发中的角色,包括其核心优势、面临的挑战以及如何利用PHP构建高效、安全的网络应用。通过具体代码示例和最佳实践的分享,旨在为开发者提供实用指南,帮助他们在不断变化的技术环境中保持竞争力。
|
3月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
3月前
|
JSON API 数据格式
使用Python和Flask构建简单的Web API
使用Python和Flask构建简单的Web API
|
3月前
|
缓存 安全 前端开发
构建高效Web应用的五大关键技术
【10月更文挑战第42天】在数字化浪潮中,Web应用已成为企业与用户互动的重要桥梁。本文将深入探讨提升Web应用性能和用户体验的五项核心技术,包括前端优化、后端架构设计、数据库管理、安全性增强以及API开发的最佳实践。通过这些技术的应用,开发者可以构建出更快、更稳定且更安全的Web应用,满足现代网络环境的需求。

热门文章

最新文章

  • 1
    打造高效的Web Scraper:Python与Selenium的完美结合
    13
  • 2
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    26
  • 3
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    20
  • 4
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    54
  • 5
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    342
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 7
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    40
  • 8
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    28
  • 9
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    22
  • 10
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    55