Embed Size (px)
Citation preview
Miaofei Wang
Building an Office Add-in
开始之前…• Install “Office/SharePoint development” module.
主要内容
• Office Add-ins 简介
• Office Add-ins 类型及使用场景
• JavaScript API 类型
• 一起写一个Add-in
主要内容
• Office Add-ins 简介
• Office Add-ins 类型及使用场景
• JavaScript API 类型
• 一起写一个Add-in
Office Add-in是什么
Office Add-ins 是什么
运行在 Office 环境中的 web 应用程序
Add-in 类型
Add-in host 类型；Add-in 名称，ID，版本号和权限定义等……
HTML+CSS
JavaScript
Web 开发语言
定制化逻辑，通过Office APIs 与 Office应用进行内容交互
Add-in 主页面 URL
Office Add-in是什么
Office Add-in的作用
• 强大的功能扩展。
• “一次编写，处处运行”。
• 不断增强的 JavaScript API 集合。
Office Add-in的优势
✓ ✓ ✓ ✓
✓ ✓ ✓ ✓
✓ ✓ ✓ ✓
✓ ✓ ✓ 即将呈现
即将呈现 ✓ 即将呈现 即将呈现
Office Add-in的跨平台性
https://appsource.microsoft.com/zh-cn/marketplace/apps?product=office
Office Add-in商店
主要内容
• Office Add-ins 简介
• Office Add-ins 类型及使用场景
• JavaScript API 类型
• 一起写一个Add-in
• 内容（Content）Add-in
• 任务面板（Taskpane）Add-in
• 上下文（Contextual）Add-in
https://dev.office.com/docs/add-ins/overview/add-in-manifests
应用程序主页面 URL
Add-in 类型
Add-in host 类型；Add-in 名称，ID，版本号和权限定义等……
Office Add-ins 类型
内容（Content）Add-in
任务面板（Taskpane）Add-in
上下文（Contextual）Add-in
• 定义一个或多个规则
• 在指定的上下文中激活规则
• 与邮件或会议项目进行交互
Add-in命令（Add-in Commands）
• 任务面板（TaskPane）Add-in的一种集成方式；
• 通过将 Office Add-ins 集成在 Office 功能区的一个按钮上或者右键菜单上，使用户能够更方便的使用他们的应用；
• 这类功能按钮能够执行两种类型的命令：
> ShowTaskpane：打开一个任务面板（TaskPane）;
> ExecuteFunction：执行一段定义在 Add-in 应用中的 JavaScript代码;
https://github.com/OfficeDev/Office-Add-in-Commands-Samples
Add-in Commands 之 ShowTaskpane
• 在任务面板（TaskPane）中打开一个 Add-in 的页面；
• 应用场景：
在文档编辑过程中，需要多次进行交互使用的 Add-in;
Add-in Commands 之 ExecuteFunction
• 执行 Add-in 中的一个 JavaScript 函数；
• 应用场景：
对 Office 应用进行功能性扩展，特别适用于无 UI 需求，仅需执行功能性代码的场景；
Office Add-ins 类型
主要内容
• Office Add-ins 简介
• Office Add-ins 类型及使用场景
• JavaScript API 类型
• 一起写一个Add-in
• Common API
- Office 应用共享，适用于开发普遍应用场景的 Add-in;
• Rich API
- 基于对象模型，针对特定 Office 应用开发的API, 支持 Word, Excel,
OneNote;
https://dev.office.com/reference/add-ins/javascript-api-for-office
Office JavaScript API 类型
跨 Office 应用：一份 codebase，可以运行于不同的 Office 应用上.
Common API
✓ 基于对象模型，易用易理解
✓ 大量的功能模块支持
✓ 跨平台性规范，更好的平台支持
Rich API
https://dev.office.com/WordJavaScriptAPI
主要内容
• Office Add-ins 简介
• Office Add-ins 类型及使用场景
• JavaScript API 类型
• 一起写一个Add-in
Use IDE to develop an Add-in (eg. Visual Studio)
https://docs.microsoft.com/en-us/office/dev/add-ins/develop/create-and-debug-office-add-ins-in-visual-studio
Use Script Lab to Develop an Add-in (inner Applications)
Office Add-ins部署
Office Store /
O365 Tenant应用开发者
Web 应用
Office用户
XML配置文档
Web 服务器
https://docs.microsoft.com/en-us/office/dev/add-ins/publish/publish
怎样部署Add-in
1. 申请Azure订阅
2. 创建应用的云服务
3. 发布Add-in并更新xml配置文件
4. 部署配置文件– 文件共享
– Office商店
– 集中部署
https://docs.microsoft.com/en-us/office/dev/add-ins/publish/publish
https://msdn.microsoft.com/en-us/subscriptions
https://portal.azure.com
Create a web app in Azure
1. In Visual Studio, in the View menu, choose Server Explorer. Right-click Azure and choose Connect to Microsoft Azure subscription. Sign in with your MSA account.
2. Expand Azure, right-click App Service, and then choose Create New App Service.
Note: in VS2019, the “Create New App Service” is moved to “Cloud Services”.
Publish Office Add-in to AzureRight-click the web project and then choose Publish.
Publish Office Add-in to Azure
Update Manifest
Using Manifest on Win32/Mac Client• Put the manifest to a shared
folder.
• Put the share folder’s address to Trusted Catalog Address (File > Options).
Using Manifest on Win32/Mac Client
https://docs.microsoft.com/en-us/office/dev/add-ins/publish/host-an-office-add-in-on-microsoft-azure#step-2-add-the-file-share-to-the-trusted-add-ins-catalog
Using Manifest on Office Online
Resources
Thank you!
