基于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 [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

<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'<code>;</code>

(</code>function () <code>{

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

  Office.initialize = </code>function (reason) <code>{

    $(</code>document<code>).ready(</code>function () <code>{

      loadItemProps(Office.context.mailbox.item);

    });

  };

  </code>function loadItemProps(item) <code>{

    </code>// Get the table body element<code>

    </code>var<code> tbody = $(</code>'.prop-table'<code>);

    </code>// Add a row to the table for each message property<code>

    tbody.append(makeTableRow(</code>"Id"<code>, item.itemId));

    tbody.append(makeTableRow(</code>"Subject"<code>, item.subject));

    tbody.append(makeTableRow(</code>"Message Id"<code>, item.internetMessageId));

    tbody.append(makeTableRow(</code>"From"<code>, item.from.displayName + </code>" &lt;"<code> +

      item.from.emailAddress + </code>"&gt;"<code>));

  }

  </code>function makeTableRow(name, value) <code>{

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

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

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

  }

})();

html<code>,</code>

body<code> {</code>

    </code>width<code>: </code>100%<code>;

    </code>height<code>: </code>100%<code>;

    </code>margin<code>: </code>0<code>;

    </code>padding<code>: </code>0<code>;

}

td.prop-val<code> {</code>

    </code>word-break<code>: break-all;

}

.content-main<code> {</code>

    </code>margin<code>: </code>10px<code>;

}

...

<ProviderName><code>Jason Johnston</code></ProviderName><code></code>

<DefaultLocale><code>en-US</code></DefaultLocale><code></code>

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

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

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

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

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

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

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

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

...