基于 SharePoint 框架的应用开发

黄强， 马昱东

SharePoint Suzhou Team

Agenda

议程安排

关于 SharePoint

SharePoint 框架(SPFx)

页面部件开发、测试及部署

1

2

3

4 参考资源

关于 SharePoint从一个用户案例出发

演示 Demo

展示SharePoint站点页面。

案例-站点，页面和页面部件

定位 与 功能

定位：移动智能企业内联网

功能：共享和管理内容、知

识和应用程序，加强团队合

作、快速查找信息并在整个

组织实现无缝协作。

一个小的需求

SharePoint 框架(SPFx)

什么是 SPFx

▅ SharePoint 框架 (SPFx) 是提供 SharePoint 插件和页面部

件的开发框架。

页面部件开发、测试及部署

SPFx支持主流操作系统，但需要基于NodeJS。

为了能够测试和部署，开发者需要准备Office 365账号。

您可以使用您喜欢的编辑器。

页面部件开发支持各种WEB开发框架。我们推荐使用React框架和Typescript语言。

环境准备

SPFx 开发环境

运行• Office 365 账号

开发• Windows/Mac

• NodeJs

• Visual studio Code

技术栈• TypeScript

• React (optional)

演示 Demo

使用Yeoman自动生成Hello-World页面部件。

Hello-World 页面部件

npm i @microsoft/generator-sharepoint -g

Ship?

SharePoint Framework Build Flow

• 页面部件配置文件• Manifest.json

• 页面部件类• WebPart.ts

• 其他配置• Package.json

初探：了解页面部件的项目结构

页面部件

man

ifest • 标题

• 描述

• Logo

• 类别

• …

页面部件类 • 生命周期

• 渲染内容

• 数据模型

• 持久化数据

• 。。。

其他配置 • 项目依赖

• 语言配置

• 测试配置

• 。。。

• 在Work bench 环境中测试• Local workbench

• Hosted workbench

调试

▅ Local workbench是一个隔离的页面部件运行环境应

用，无法访问到真正的SharePoint环境资源。

▅ 在Hosted workbench 环境中测试可以真实访问页面

上下文资源。

演示 Demo

“待办任务列表”用来展示和编辑团队待办任务。它连接到后端列表来获取数据。用户可以浏览，并且编辑任务状态。

“待办任务列”表页面部件

• 连接到SharePoint列表

连接SharePoint资源 ▅ Service Scope

▅ Page Context

▅ SPHttpClient

▅ Restful API Docs

▅ 页面部件是可在站点页面中自由灵活添加的组件

▅ SharePoint 框架的工具链• 生成器

• 编译器

• 测试环境

▅ SharePoint 框架提供给页面部件的一些接口• 基类 -> domElement、生命周期、持久化数据、属性面板等等

• 上下文资源 -> PageContext等

• API client -> SPHttpClient

总结

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

→

→

→

→