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

H:\>cd H:\myWorkProj\test\my-outlook-addin

H:\myWorkProj\test\my-outlook-addin>

H:\myWorkProj\test\my-outlook-addin>yo office

     _-----_     ╭──────────────────────────╮

    |       |    │   Welcome to the Office  │

    |--(o)--|    │   Add-in generator, by   │

   `---------′   │ @OfficeDev! Let‘s create │

    ( _′U`_ )    │    a project together!   │

    /___A___\   /╰──────────────────────────╯

     |  ~  |

   __‘.___.‘__

 ′   `  |° ′ Y `

? Would you like to create a new subfolder for your project? No

? What do you want to name your add-in? My Office Add-in

? Which Office client application would you like to support? Outlook

? Would you like to create a new add-in? Yes, I need to create a new web app and manifest file for

my add-in.

? Would you like to use TypeScript? No

? Choose a framework: Jquery

For more information and resources on your next steps, we have created a resource.html file in your project.

? Would you like to open it now while we finish creating your project? Yes

----------------------------------------------------------------------------------

      Creating My Office Add-in add-in using js and jquery

----------------------------------------------------------------------------------

   create package.json

   create my-office-add-in-manifest.xml

   create app.css

   create assets\icon-16.png

   create assets\icon-32.png

   create assets\icon-80.png

   create assets\logo-filled.png

   create bsconfig.json

   create function-file\function-file.html

   create function-file\function-file.js

   create app.js

   create index.html

   create resource.html

I‘m all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.

npm WARN deprecated express@2.5.11: express 2.x series is deprecated

npm WARN deprecated connect@1.9.2: connect 1.x series is deprecated

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN my-office-add-in@0.1.0 No description

npm WARN my-office-add-in@0.1.0 No repository field.

npm WARN my-office-add-in@0.1.0 No license field.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 438 packages in 66.034s

<div class="ms-Fabric content-main">

    <h1 class="ms-font-xxl">Message properties</h1>

    <table class="ms-Table ms-Table--selectable">

        <thead>

            <tr>

                <th>Property</th>

                <th>Value</th>

            </tr>

        </thead>

        <tbody class="prop-table"/>

    </table>

</div>

‘use strict‘;

(function () {

  // The initialize function must be run each time a new page is loaded

  Office.initialize = function (reason) {

    $(document).ready(function () {

      loadItemProps(Office.context.mailbox.item);

    });

  };

  function loadItemProps(item) {

    // Get the table body element

    var tbody = $(‘.prop-table‘);

    // Add a row to the table for each message property

    tbody.append(makeTableRow("Id", item.itemId));

    tbody.append(makeTableRow("Subject", item.subject));

    tbody.append(makeTableRow("Message Id", item.internetMessageId));

    tbody.append(makeTableRow("From", item.from.displayName + " <" +

      item.from.emailAddress + ">"));

  }

  function makeTableRow(name, value) {

    return $("<tr><td><strong>" + name + 

      "</strong></td><td class=\"prop-val\"><code>" +

      value + "</code></td></tr>");

  }

})();

html,

body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

td.prop-val {

    word-break: break-all;

}

.content-main {

    margin: 10px;

}

...

<ProviderName>Jason Johnston</ProviderName>

<DefaultLocale>en-US</DefaultLocale>

<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->

<DisplayName DefaultValue="My Office Add-in" />

<Description DefaultValue="My First Outlook Add-in"/>

<!-- Icon for your add-in. Used on installation screens and the add-ins dialog. -->

<IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png" />

<HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/hi-res-icon.png"/>

<!--If you plan to submit this add-in to the Office Store, uncomment the SupportUrl element below-->

<SupportUrl DefaultValue="https://localhost:3000" />

...