快速开发一款Office Add-ins Outlook插件(已上线)

1,502 阅读2分钟

image.png

前端开发,技术栈主要是React,某天接到需求,要开发一款Outlook插件; 大脑第一反应是Outlook插件是什么?甚至Outlook是干撒的(本人很少用Outlook)?我不会,我从来没开发过插件,它是用什么语言开发?JSON?C++,Java,Angular? Vue? JS? Jquery? 是属于客户端的工作还是Web前端?怎么创建项目?怎么数据交互? 带着一大堆疑问打开了官网文档,慢慢坑!

先回答疑惑

Outlook是什么?

可以理解主要是收发邮件的,并且可以约日程、会议室;

Outlook有什么版本(截止2023-07-05)?

一共有4端: Window Mac(新版)Mac(旧版)Web端

Outlook插件用什么语言开发(见下图)?

React、Angular、JavaScript

$: yo office

image.png

Outlook插件哪类工程师开发?

前端开发工程师

怎么创建Outlook项目?

使用官方的脚手架地址 选择你使用的语言

在Mac开发还是Window开发?

Window上开发,官网项目示例在macOS系统下跑不起来,但是在window系统下可以跑起来,原因有3点如下图: 【Error: Unab le to start debugging】. 【Error: Unab le to side load the Office Add-in.】【 Error: Side load to the Out look app is not supported.】主要原因是window系统本身就有这些启动 outlook的【sideload】,sideloading 只能在 Windows 操作系统上进行。在 Windows 操作系统中,可以使用命令行工具来启用 sideloading,以便将 Office 加载项添加到本地的 Office 应用程序中进行测试和调试。在 Windows 上,开发人员可以使用 Visual Studio 和其他开发工具来创建 Office 加载项,并使用 sideloading 将其添加到本地的 Office 应用程序中进行测试和调试。在 Mac 上开发 Outlook 插件时,可以使用 Visual Studio Code 或其他代码编辑器进行开发。但是,由于 【Outlook for Mac 不支持 sideloading】,因此无法使用 Visual Studio 的 Office 加载项调试器来调试插件代码。

meetino-outLook-participant-pluair.png

怎么和后端数据进行交互?

插件内容其实就是一个H5的页面,和平常开发的页面调用接口没有任何区别

开发流程

image.png

配置文件

配置文件是非常重要的,并且也有很多坑,一点错就会造成你部署不成功,如果修改了 manifest.xml 不生效,原因就是你的 manifest.xml 文件有问题,比较坑,文件 xml 有问题的时候没有地方那个报错,只能修改文本内容看

如何详细的验证你的xml文件

下载:www.microsoft.com/en-us/downl… 运行:Microsoft.Oack.Console.exe 然后: run D:\outlook-plugin\plugin-1\manifest.xml

官方例子

这个例子主要解决了当时我验证清单不通过的问题,因为官方这个manfest.xml能够通过,就一步一步对比,发现是 Action xsi:type="ShowTaskpane"> 当时写成了 Action xsi:type="Metting"> 导致的,所有看看官方的例子还是有作用的 github.com/OfficeDev/O…