使用 Visual Studio 開發並調試 Mail Add-in (mail app for Outlook)

時間 2019-11-13

標籤使用 visual studio 開發調試 mail add app outlook 欄目 Visual Studio 简体版

原文原文鏈接

準備工做

若是你的郵箱搭建在 Exchange Server 上，則能夠建立郵件應用程序（Mail Add-in）來擴展Office自己的功能，使用 Office Add-in Model 開發的 Mail Add-in 能夠運行在 Outlook 富客戶端、Outlook Web App 和適用於各類設備（如 IOS）的 OWA 上。在開發以前，你須要一個有效的郵箱帳號和密碼（如你在公司內部的工做郵箱）。javascript

建立 Mail Add-In 項目

Step 1

在 Visual Studio 中（以下圖），點擊 文件>>新建>>項目，在彈出的窗口中，展開左側的項目模板，依次點擊 Visual C# >> Office/SharePoint >> Apps >> App for Office。css

注意：本文使用的 VS 版本號爲 Visual Studio Ultimate 2013 Version 12.0.30723.00 Update 3，項目模板中你所看到的「Office Add-Ins」是指基於 VSTO 技術建立 Office 擴展應用的項目模板。而在最新的 Office Developer Tools for Visual Studio 中的命名中，Office Add-ins 已經被 Office VSTO Add-ins 替換；相應的， Apps 也已被 Office Web AddIn 所替換（詳情請查看 https://msdn.microsoft.com/en-us/library/fp161507.aspx#bk_newname）。html

另外，若是在項目模板下沒有找到 Office/SharePoint，請先下載相應VS版本的 Office Developer Tools for Visual Studio( https://www.visualstudio.com/en-us/features/office-tools-vs.aspx)，如針對Visual Studio 2013的Office Developer Tools for Visual Studio 2013.（下載地址：http://aka.ms/OfficeDevToolsForVS2013）。java

Step 2

選擇要建立的 Add-In 類型，選擇「Mail」。你能夠經過 Office Apps 類型及平臺支持看到Office Add-in 有哪些類型。jquery

Step 3

選擇 Mail add-in在郵件的哪些狀態（只讀、編輯）下出現，這裏咱們只但願 add-in 在用戶讀郵件或者約會時出現。ajax

Step 4

在該項目中找到 Home.html（Office Developer Tools For Visual Studio 2013 爲 Mail Add-in 生成的項目中包含這個頁面，而且是 add-in 的首頁面，若是你沒有找到，能夠根據下文 manifest 的介紹找到主頁面而後繼續），粘貼以下代碼將原有內容覆蓋。express

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title></title>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js" type="text/javascript"></script>

    <link href="../../Content/Office.css" rel="stylesheet" type="text/css" />
    <script src="//appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>

    <link href="Home.css" rel="stylesheet" type="text/css" />
    <script src="Home.js" type="text/javascript"></script>
</head>
<body>
    <div id="content-main">
        <div class="padding">
            <p><strong>Add home screen content here.</strong></p>
            <p>For example, this app was activated with following details:</p>
            <table id="details">
                <tr>
                    <th>Subject:</th>
                    <td><span id="subject"></span></td>
                </tr>
                <tr>
                    <th>From:</th>
                    <td><span id="from"></span></td>
                </tr>
            </table>
        </div>
    </div>
    <div id="content-footer">
        <div class="padding">
            <a target="_blank" href="https://go.microsoft.com/fwlink/?LinkId=276814">Find more samples online...</a>
        </div>
    </div>
</body>
</html>

Step 5

找到並修改 Home.js 文件（相似Step 4，若是你的項目中沒有它，能夠找到add-in 主頁，而後在主頁相同路徑下建立 Home.js，而後繼續），粘貼以下代碼將原有內容覆蓋瀏覽器

    // The Office initialize function must be run each time a new page is loaded
    Office.initialize = function (reason) {
        $(document).ready(function () {
            displayItemDetails();
        });
    };

    // Displays the "Subject" and "From" fields, based on the current mail item
    function displayItemDetails() {
        var item = Office.cast.item.toItemRead(Office.context.mailbox.item);
        $('#subject').text(item.subject);

        var from;
        if (item.itemType === Office.MailboxEnums.ItemType.Message) {
            from = Office.cast.item.toMessageRead(item).from;
        } else if (item.itemType === Office.MailboxEnums.ItemType.Appointment) {
            from = Office.cast.item.toAppointmentRead(item).organizer;
        }

        if (from) {
            $('#from').text( "DisplayName: " + from.displayName + ", Email Address:" + from.emailAddress);
        }
    }

Step 6

點擊綠色箭頭按鈕啓動並選擇瀏覽器，VS 會用該瀏覽器彈出一個網頁（相似以下頁面，不用太在乎它）服務器

Step 7

此時，在這臺開發機上的 Outlook 客戶端或者網頁端上打開任意一封郵件，會發現 ZanApp 的連接：app

點擊 ZanApp 以後，add-in 開始運行以下，此時這封郵件的 subject 和發送人會在 add-in 裏顯示出來。

調試 AddIn 的代碼

項目文件介紹

此時，你在Visual Studio中會看到相似於下圖中的兩個項目：第一個項目是用來管理該add-in的配置文件，第二個項目則是該add-in的實現（也就是網站）。

當咱們點擊了綠色箭頭按鈕啓動了項目以後，VS 會要求你輸入你的郵箱用戶名和密碼，而後它經過以下步驟完成部署用於調試：

1. 將當前add-in的manifest（add-in的配置文件）上傳到當前開發者所登錄的exchange 服務器上。

你可經過修改第一個項目中的配置文件來修改 add-in 的主頁及其餘基本信息。下面是一個 Manifest 舉例，你們能夠經過它認識到 Add-in 的哪些屬性能夠定製。更詳盡的官方文檔信息在 Office Add-ins XML manifest。

<?xml version="1.0" encoding="UTF-8"?>
<!--Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9-->
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="MailApp">
  <Id>c425abba-72d8-4343-a960-0e30291217d0</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>[Provider name]</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="ZanApp" />
  <Description DefaultValue="ZanApp"/>
  <AppDomains>
    <AppDomain>https://login.microsoftonline.com/common/oauth2/authorize</AppDomain>
    <!--當add-in網頁須要redirect任何其餘域名下的網頁時，須要將該域名加入到AppDomains中-->
  </AppDomains>
  <Capabilities>
    <Capability Name="Mailbox" />
  </Capabilities>
  <DesktopSettings>
    <SourceLocation DefaultValue="https://localhost:44306/addin/appread/home/home.html" /> 
    <!—add-in 加載時的主頁 -->
    <RequestedHeight>300</RequestedHeight>
    <!—add-in在郵件中顯示的高度-->
  </DesktopSettings>
  <Permissions>ReadItem</Permissions>
  <!—當前add-in須要的對郵箱的權限-->
  <Rule xsi:type="RuleCollection" Mode="Or">
    <Rule xsi:type="ItemIs" ItemType="Message"/>
    <Rule xsi:type="ItemIs" ItemType="Appointment"/>
  </Rule>
  <DisableEntityHighlighting>false</DisableEntityHighlighting>
</OfficeApp>

2. 把當前add-in的實現（其實就是一個網站）用iisexpress host 起來。（注意，郵件應用程序須要 host 在支持 https 的 URL 下，The apps for Office platform requires that all source files are hosted on secure (HTTPS) sites.詳情請參考Tips to develop a great mail app for Office）

這樣咱們就能夠經過諸如 https://localhost:44304/appread/home/home.html 來訪問該add-in 中的home網頁了。

而此時，若是你在當前機器上的郵件客戶端中打開任一封郵件，即可以看到add-in的入口連接了。（其餘用戶則沒法看處處於調試階段的add-in）

Debugging -- 如何調試add-in的代碼實現

Add-in須要運行在郵件客戶端（如outlook）上，因此即便咱們開發add-in用的都是JavaScript代碼，咱們也沒法利用瀏覽器F12開發者工具進行調試 (除非你使用網頁版郵箱OWA打開)。接下來咱們將經過一個實例介紹如何利用Visual Studio調試」寄宿並運行於」 Outlook界面(中的iframe)裏的add-in 代碼，如JavaScript。

0. 啓用 IE debugging 選項，將「Disable script debugging（Internet Explorer）和 Disable script debugging (Other)」選項去掉（uncheck)。

首先，有必要再提一下，add-in其實是運行在outlook讀郵件界面上嵌入的iframe中，因此最終仍是被瀏覽器（IE）解析並運行的。若是要調試這些代碼，咱們須要找到運行代碼的瀏覽器進程號。

1. 利用Fiddler查詢運行add-in的瀏覽器進程號

打開任意一封郵件，點擊add-in入口連接，add-in顯示相似以下界面：

打開fiddler，能夠看到以下圖綠色框住的部分，點擊鼠標左鍵並將其挪到上圖的add-in顯示區域內，fiddler將發現並顯示運行該add-in的瀏覽器進程號。

2. 使用 VS Attach 到該進程

打開另外一個 Visual Studio 2013 程序，不用打開任何項目

依次點擊 Debug>> Attach to Process，以下圖所示，找到對應的瀏覽器進程，點擊attach。

3. 開始調試

接下來，運行在瀏覽器進程中的 js 等文件被顯示在 Solution Explorer中，你能夠雙擊打開文件，併爲之添加斷點。而後就能夠經過必要的途徑觸發該斷點（如reload add-in頁面或者點擊add-in中的按鈕）進行調試了。

這種調試方法一樣適用於開發 Word、Excel、PPT上的任務面板 Add-In 和內容 Add-in。