原文地址:http://simpeng.net/office-add-in/%e4%bd%bf%e7%94%a8-napa-%e5%88%9b%e5%bb%ba%e5%b9%b6%e8%b0%83%e8%af%95%e4%b8%80%e4%b8%aa-office-%e5%86%85%e5%ae%b9%e5%ba%94%e7%94%a8-hello-world/, 为了本博客的内容完整性,转载至此。
准备工作
开发 Office Add-Ins 基本等同于开发常见的 Web 应用程序,add-ins 实际运行内嵌于 Office 平台上的 iframe 中。接下来让我们看看 Office Add-ins 开发中要用到哪些技术,:
- 通过 JavaScript 和成熟框架(如 jQuery) 实现交互式 UI 和自定义逻辑;
- 利用 HTTP 协议和 AJAX 异步编程技术调用相应数据源的 REST API 或其他 Web 服务;
- 使用服务器端脚本语言(如 ASP 或 PHP)实现,这些语言运行于服务器端;
- 利用 HTML5 、CSS3 优化网页表现和布局。
接下来,我们通过一个简单的例子来介绍如何开发 Office Add-Ins。
微软提供了两种 IDE 开发工具帮助我们开发:
- 在已安装 Office 2013 (富客户端)和 Visual Studio 2012 (或更新版本)的 PC 机上进行开发。
- 使用 Office 365 网页版开发工具(Napa)进行开发 – 无需安装任何客户端软件,需要 Microsoft 帐户登录。
这里我们采用第二种方式进行开发,如果您还没有注册 Microsoft 账号,请点击此处注册。 另外,值得一说的,如果不想用 VS 和 Napa 进行开发,完全可以按照官网上的步骤,使用 Notepad 进行(显然我没有试过 :))。
开始
1. 打开 Napa
通过点击上述链接,并用 Microsoft 账号登录,进入 Napa 开发工具。
2. 创建一个 Office 内容应用。
点击“添加新的项目”,并输入项目名称,选择“Office 内容应用”, 点击“创建”。
3. 点击“运行项目”,等待响应
创建完新的内容应用项目后,Napa自动添加了简单的测试程序,您只需点击“运行项目”,等待程序部署。
4. 允许浏览器弹出新的窗口显示 Web 版的Excel 页面,如图所示,App 类似于图表一样“浮在”上面。
由于这个创建的 Add-In 是首次插入在这个 Excel 文档中,在 Add-In 启动之前会告知用户: 这是新的 Office 应用程序,如果您选择启动,它将对此文档的内容具有访问权限…。 另外还会告诉用户这个应用的发布者是谁。用户需要点击“开始”才能使用此应用。
5. 点击“开始”后,App 启动如图所示。
理论上您可以选择 Excel 中的部分文字,然后点击 “Get data from selection”,此时, 应用会将您选取的部分中的数据显示在 Add-In 内,而应用中用来取得 Excel 选中部分文字的 API 就是 Office 平台提供的 JSOM (Office.js) 提供。 可以在官方网站处详细了解 Office 平台对不同的 Office 软件(Word, Excel,PowerPoint,…)提供的 API 支持。 然而,由于处于调试阶段,打开的 Excel 文档也处于只读的状态,所以也无法添加新的数据进行测试(尴尬 o(>﹏<)o)。
6. 接下来我们来看看这个内容应用项目包含的文件。
其中 Home.html是这个 App 启动的首页面(当然, 我们可以根据需要在 App 的 Manifest 中设定首页面,将在后面介绍)。 另外也像其他 Web 应用程序一样,我们可以任意添加 js,css,html,图片等等网页元素(不局限于静态的 Web 编程技术,也可以使用 php 等运行于服务端的语言)。
另外,可以看到 Home.html 中引用了 https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js ,这正是 Office 平台提供的用于和文档交互的 JSOM API。