使用 Napa 创建并调试一个 Office 内容应用

原文地址：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。