基于Web技术的Outlook-Add-ins开发简介.docxVIP

基于Web技术的OutlookAdd-ins开发简介我也是刚刚接触OutlookAdd-ins的开发，水平有限；文中若有错误，拍砖请轻一些！零、关于OutlookAdd-ins Outlook插件的种类不止一种，早期的有基于COM技术的、基于VSTO（Visual Studio Tools for Office）的，还有就是这里介绍的基于Web技术实现的方式。微软的官网上将其称为：Outlook add-ins。这种插件好处：*跨平台。开发一次，可能用于Outlook的Windows版、Mac版、手机版、以及Web（Office 365 和 O）版。*安装方便灵活。可以本地安装，也可以从Officestore上一键安装。注意：微软现在搞了一个Officestore，这个市场将来也许会成为风口哦。风口，风口，风口；重要的事情说三遍。*开发相对（COM插件）简单。工程由manifest.xml、JavaScript、css、Html构成；换句话说，这种插件是B/S结构的，因此正式发布的插件，必须要有一个WebServer与前端协作。下面的图片基本可以说明这种插件的结构：需要注意的是：[1] 这种插件并不安装在本地，而存在于云端。[2] 并非所有客户端都同时支持最新的功能。目前Outlook 2013 及更高版本、Outlook 2016 for Mac、Outlook Web App (Exchange 2013)、Outlook 网页版（Office 365 和 O）均支持 Outlook Add-ins。OutlookAdd-ins初探下面是OfficeStore的URL，大家可以安装几个看看， 目前大多数插件是免费的，收费的不多。/zh-cn/marketplace/apps?product=outlookpage=1src=office我看找到几个比较有意思的插件：[1] 对邮件进行安全扫描的：/en-us/product/office/WA104381359?src=officetab=Overview[2] 翻译邮件的：/en-us/product/office/WA104124372?src=office[3] 预定星巴克场地的：/en-us/product/office/WA104380233?src=officetab=Overview安装完后邮件工具栏上会出现相应的图标。插件的使用非常简单：打开一封邮件后，单击某个图标，右侧会自动弹出一个窗口，显示相关内容。这里以一款反病毒插件为例，首先打开可疑的邮件，然后点击图标进行扫描，几秒种后返回该邮件中URL是否安全。右侧的小窗口是插件的工作区，可以在其中显示与插件相关的内容，如等待动画、结果等等。多说一句，这个反病毒插件似乎还有点用，界面也挺漂亮，可以避免乱点URL中招；就是这个“趋势软件”没怎么听过，估计是个创业公司；要是大厂商出的就更让人放心了！二、开发实例若要开发Outlook插件需要了解JavascriptJQueryHtmlXML。这个例子来自于微软的官网，我实践后加入了自己的理解。本例功能很简单，就是获取某封邮件的信息，如发件人、ID等。3.1 开发环境搭建安装 Node.js， 不会装的自行百度安装Yeoman： npm install -g yo generator-office3.2 开发过程第一步：创建一个文件夹，并以管理员权限打开CMD，进入该目录第二步：使用Yeoman生成器创建一个Outlook add-in project注意：该cmdshell要有管理员权限！ CMD中全部内容如下：H:\cd H:\myWorkProj\test\my-outlook-addinH:\myWorkProj\test\my-outlook-addinH:\myWorkProj\test\my-outlook-addinyo office __ ╭──────────────────────────╮ | | │ Welcome to the Office │ |--(o)--| │ Add-in generator, by │ `′ │ @OfficeDev! Lets create │ ( _′U`_ ) │ a project together! │ /___A___\ /╰──────────────────────────╯ | ~ | __.___.__′ ` |° ′ Y `? Would you like to create a new subfolder for your project? No? What do