Erstellen eines App-Pakets für Ihre Microsoft Teams-AppCreate an app package for your Microsoft Teams app

Apps in Microsoft Teams werden durch eine JSON-Datei für App-Manifeste definiert und in einem App-Paket mit ihren Symbolen gebündelt.Apps in Teams are defined by an app manifest JSON file, and bundled in an app package with their icons. Sie benötigen ein App-Paket, um Ihre APP in Microsoft Teams hochzuladen und zu installieren und entweder im App-Katalog ihrer Branche oder in AppSource zu veröffentlichen.You'll need an app package to upload and install your app in Teams, and to publish to either your Line of Business app catalog or to AppSource.

Ein Teams-App-Paket ist eine ZIP-Datei, die Folgendes enthält:A Teams app package is a .zip file containing the following:

  • Eine Manifestdatei mit dem Namen "manifest.json", die Attribute Ihrer APP angibt und auf erforderliche Ressourcen für Ihre Benutzeroberfläche verweist, beispielsweise den Speicherort der Registerkarten-Konfigurationsseite oder die Microsoft App-ID für den bot.A manifest file named "manifest.json", which specifies attributes of your app and points to required resources for your experience, such the location of its tab configuration page or the Microsoft app ID for its bot.
  • Ein transparentes "Outline"-Symbol und ein vollständiges "Color"-Symbol.A transparent "outline" icon and a full "color" icon. Weitere Informationen finden Sie unter Icons weiter unten in diesem Thema.See Icons later in this topic for more information.

Erstellen einer ManifestdateiCreating a manifest

Teams App Studio kann bei der Konfiguration ihres Manifests behilflich sein.Teams App Studio can help configure your manifest. App Studio enthält außerdem eine React-Steuerelementbibliothek sowie konfigurierbare Beispiele für Karten.It also contains a React control library and configurable samples for cards. Siehe Übersicht über das App-Studio.See App Studio Overview.

Ihre Manifestdatei muss den Namen "manifest.json" tragen und sich auf der obersten Ebene des Upload-Pakets befinden.Your manifest file must be named "manifest.json" and be at the top level of the upload package. Beachten Sie, dass zuvor erstellte Manifeste und Pakete möglicherweise eine ältere Version des Schemas unterstützen.Note that manifests and packages built previously might support an older version of the schema. Für Microsoft Teams-apps und insbesondere AppSource (ehemals Office Store)-Übermittlung müssen Sie das aktuelle Manifest-Schemaverwenden.For Teams apps and especially AppSource (formerly Office Store) submission, you must use the current manifest schema.

Tipp

Geben Sie das Schema am Anfang des Manifests an, um IntelliSense oder ähnliche Unterstützung aus Ihrem Code-Editor zu aktivieren:Specify the schema at the beginning of your manifest to enable IntelliSense or similar support from your code editor:

"$schema": "https://developer.microsoft.com/json-schemas/teams/v1.7/MicrosoftTeams.schema.json",

SymboleIcons

Hinweis

Wenn Ihre APP eine bot-oder Messaging-Erweiterung enthält, werden die Symbole verwendet, die in Ihre bot-Registrierung im bot-Framework hochgeladen werden.If your app contains a bot or messaging extension, the icons used will be the icons uploaded to your bot registration in the Bot Framework.

Microsoft Teams benötigt zwei Symbole für Ihre APP-Erfahrung, die innerhalb des Produkts verwendet werden.Microsoft Teams requires two icons for your app experience, to be used within the product. Symbole müssen im Paket enthalten sein und über relative Pfade im Manifest referenziert werden.Icons must be included in the package and referenced via relative paths in the manifest. Die maximale Länge jedes Pfads beträgt 2048 Bytes, und das Format des Symbols ist. png.The maximum length of each path is 2048 bytes, and the format of the icon is .png.

colorcolor

Das color Symbol wird in Microsoft Teams verwendet (in App-und Tab-Galerien, Bots, Flyouts usw.).The color icon is used throughout Microsoft Teams (in app and tab galleries, bots, flyouts, and so on). Dieses Symbol sollte 192x192 Pixel sein.This icon should be 192x192 pixels. Bei Ihrem Symbol kann es sich um eine beliebige Farbe (oder Farben) handeln, der Hintergrund sollte jedoch ihre Branding-Akzentfarbe sein.Your icon can be any color (or colors), but the background should be your branded accent color. Es sollte auch eine kleine Menge von Textabstand um das Symbol verfügen, um das hexagonale Zuschneiden für die bot-Version des Symbols unterzubringen.It should also have a small amount of padding surrounding the icon to accommodate the hexagonal cropping for the bot version of the icon.

outlineoutline

Das outline Symbol wird an diesen Stellen verwendet: die APP-Leiste und die Messaging Erweiterungen, die der Benutzer als Favorit markiert hat.The outline icon is used in these places: the app bar and messaging extensions the user has marked as a "favorite." Dieses Symbol muss 32x32 Pixel sein.This icon must be 32x32 pixels. Das Gliederungssymbol muss nur weiß und Transparenz enthalten (keine anderen Farben).Your outline icon must contain only white and transparency (no other colors). Das Symbol kann weiß mit transparentem Hintergrund oder transparent mit weißem Hintergrund sein.The icon can be white with transparent background or transparent with a white background. Das Symbol für die Gliederung sollte nicht über einen zusätzlichen Textabstand verfügen, der das Symbol umgibt, und sollte so dicht wie möglich abgeschnitten sein, während die 32x32-Bemaßungen weiterhin beibehalten werden.The outline icon should not have extra padding surrounding the icon and should be as tightly cropped as possible while still maintaining the 32x32 dimensions. Hier sind einige gute Beispiele:Here are a few good examples:

Tipp

  • Die Farbe muss in RGB "weiß" sein (rot: 255, grün: 255, blau: 255).Color must be "White" in RGB, (Red: 255, Green: 255, Blue: 255).
  • Der gesamte andere Teil des Symbols sollte transparent sein.All other part of icon should be transparent.
  • Für die Übergabe muss das kleine Symbol vollständig transparent sein, der Alpha Kanal ist 0, und jeder andere Wert ist ein Fehler.For passing, small icon must be full transparent, Alpha channel to be 0 and any other value is a fail.

Beispiel-Gliederungssymbole

Angenommen, Ihr Unternehmen ist contoso.For example, say your company is Contoso. Sie möchten zwei Symbole übermitteln:You'd submit two icons:

Symbol Showcase

Hier erfahren Sie, wie die Symbole auf der Benutzeroberfläche angezeigt werden:Here's how the icons would appear in the UI:

Bot-und chiclet in der KanalansichtBot and chiclet in Channel view

Bot-und chiclet-UX

FlyoutFlyout

Beispiel für Contoso-Flyout

App-Leiste und StartbildschirmApp bar and home screen

Beispiel für Contoso-App-Leiste Homescreen