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

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 [email protected]: express 2.x series is deprecated

npm WARN deprecated [email protected]: connect 1.x series is deprecated

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

npm WARN [email protected] No description

npm WARN [email protected] No repository field.

npm WARN [email protected] No license field.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 438 packages in 66.034s

<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" />

...