基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。...
Transcript of 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。...
![Page 1: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/1.jpg)
![Page 2: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/2.jpg)
基于 SharePoint 框架的应用开发
黄强, 马昱东
SharePoint Suzhou Team
![Page 3: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/3.jpg)
Agenda
议程安排
关于 SharePoint
SharePoint 框架(SPFx)
页面部件开发、测试及部署
1
2
3
4 参考资源
![Page 4: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/4.jpg)
关于 SharePoint从一个用户案例出发
![Page 5: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/5.jpg)
演示 Demo
展示SharePoint站点页面。
案例-站点,页面和页面部件
![Page 6: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/6.jpg)
定位 与 功能
定位:移动智能企业内联网
功能:共享和管理内容、知
识和应用程序,加强团队合
作、快速查找信息并在整个
组织实现无缝协作。
![Page 7: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/7.jpg)
一个小的需求
![Page 8: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/8.jpg)
SharePoint 框架(SPFx)
![Page 9: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/9.jpg)
什么是 SPFx
▅ SharePoint 框架 (SPFx) 是提供 SharePoint 插件和页面部
件的开发框架。
![Page 10: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/10.jpg)
页面部件开发、测试及部署
![Page 11: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/11.jpg)
SPFx支持主流操作系统,但需要基于NodeJS。
为了能够测试和部署,开发者需要准备Office 365账号。
您可以使用您喜欢的编辑器。
页面部件开发支持各种WEB开发框架。我们推荐使用React框架和Typescript语言。
环境准备
SPFx 开发环境
运行• Office 365 账号
开发• Windows/Mac
• NodeJs
• Visual studio Code
技术栈• TypeScript
• React (optional)
![Page 12: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/12.jpg)
演示 Demo
使用Yeoman自动生成Hello-World页面部件。
Hello-World 页面部件
![Page 13: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/13.jpg)
npm i @microsoft/generator-sharepoint -g
Ship?
SharePoint Framework Build Flow
![Page 14: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/14.jpg)
• 页面部件配置文件• Manifest.json
• 页面部件类• WebPart.ts
• 其他配置• Package.json
初探:了解页面部件的项目结构
页面部件
man
ifest • 标题
• 描述
• Logo
• 类别
• …
页面部件类 • 生命周期
• 渲染内容
• 数据模型
• 持久化数据
• 。。。
其他配置 • 项目依赖
• 语言配置
• 测试配置
• 。。。
![Page 15: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/15.jpg)
• 在Work bench 环境中测试• Local workbench
• Hosted workbench
调试
▅ Local workbench是一个隔离的页面部件运行环境应
用,无法访问到真正的SharePoint环境资源。
▅ 在Hosted workbench 环境中测试可以真实访问页面
上下文资源。
![Page 16: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/16.jpg)
演示 Demo
“待办任务列表”用来展示和编辑团队待办任务。它连接到后端列表来获取数据。用户可以浏览,并且编辑任务状态。
“待办任务列”表页面部件
![Page 17: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/17.jpg)
• 连接到SharePoint列表
连接SharePoint资源 ▅ Service Scope
▅ Page Context
▅ SPHttpClient
▅ Restful API Docs
![Page 18: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/18.jpg)
▅ 页面部件是可在站点页面中自由灵活添加的组件
▅ SharePoint 框架的工具链• 生成器
• 编译器
• 测试环境
▅ SharePoint 框架提供给页面部件的一些接口• 基类 -> domElement、生命周期、持久化数据、属性面板等等
• 上下文资源 -> PageContext等
• API client -> SPHttpClient
总结
![Page 19: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/19.jpg)
Resources
参考资源
SharePoint框架 https://docs.microsoft.com/zh-
cn/sharepoint/dev/spfx/sharepoint-framework-overview
https://docs.microsoft.com/zh-cn/sharepoint/dev/spfx/web-
parts/overview-client-side-web-parts
https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/working-
with-lists-and-list-items-with-rest
https://github.com/fengyue1013/2019-spfx-webpart-demo
→
→
→
→
![Page 20: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/20.jpg)
![Page 21: 基于 SharePoint 框架的应用开发 · 2019-04-13 · NodeJS。 为了能够测试和部署,开发者需要准 备Office 365账号。 您可以使用您喜欢的编辑器。](https://reader030.fdocuments.in/reader030/viewer/2022040609/5ecca77aa0af283cb576cf15/html5/thumbnails/21.jpg)