Создание пакета приложений для приложения Microsoft TeamsCreate an app package for your Microsoft Teams app

Приложения в Teams определяются с помощью JSON манифеста приложения и упаковываются в пакет приложения со своими значками.Apps in Teams are defined by an app manifest JSON file, and bundled in an app package with their icons. Вам потребуется пакет приложения для отправки и установки приложения в Teams, а также для публикации в каталоге бизнес-приложений или в AppSource.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.

Пакет приложения Teams — это ZIP-файл со следующими разделом:A Teams app package is a .zip file containing the following:

  • Файл манифеста с именем "manifest.json", который определяет атрибуты приложения и указывает на необходимые ресурсы для вашего интерфейса, такие как расположение страницы настройки вкладки или идентификатор приложения Microsoft для ленты.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.
  • Прозрачный значок "контур" и полный значок "цвет".A transparent "outline" icon and a full "color" icon. Для получения дополнительных сведений просмотрите значки , приведенные далее в этом разделе.See Icons later in this topic for more information.

Создание манифестаCreating a manifest

Приложение Teams Studio помогает настроить манифест.Teams App Studio can help configure your manifest. Оно также содержит библиотеку элементов управления React и настраиваемые примеры для карточек.It also contains a React control library and configurable samples for cards. Ознакомьтесь с обзором App Studio.See App Studio Overview.

Файл манифеста должен иметь имя "manifest.json" и быть на верхнем уровне пакета отправки.Your manifest file must be named "manifest.json" and be at the top level of the upload package. Обратите внимание, что манифесты и пакеты, созданные ранее, могут поддерживать более старую версию схемы.Note that manifests and packages built previously might support an older version of the schema. Для приложений Teams, особенно отправок AppSource (прежнее хранилище Office), необходимо использовать текущую схему манифеста.For Teams apps and especially AppSource (formerly Office Store) submission, you must use the current manifest schema.

Совет

Укажите схему в начале манифеста, чтобы включить поддержку IntelliSense или аналогичную поддержку в редакторе кода: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.8/MicrosoftTeams.schema.json",

ЗначкиIcons

Примечание

Если приложение содержит почтовое расширение или почтовое приложение, используются значки, которые передаются в регистрацию Bot в среде Bot.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 требует два значка для своего приложения, чтобы их можно было использовать в рамках продукта.Microsoft Teams requires two icons for your app experience, to be used within the product. Значки должны быть включены в пакет и ссылаться на них с помощью относительных путей в манифесте.Icons must be included in the package and referenced via relative paths in the manifest. Максимальная длина каждого пути составляет 2048 байт, а формат значка —. png.The maximum length of each path is 2048 bytes, and the format of the icon is .png.

colorcolor

colorЗначок используется во всех Microsoft Teams (в галереях приложений и вкладок, Боты, всплывающих меню и т. д.).The color icon is used throughout Microsoft Teams (in app and tab galleries, bots, flyouts, and so on). Этот значок должен быть 192x192 пикселями.This icon should be 192x192 pixels. Ваш значок может быть любым цветом (или цветом), но фоном должен быть контрастный цвет.Your icon can be any color (or colors), but the background should be your branded accent color. Кроме того, он должен иметь небольшое количество заполнений, окружающих значок, чтобы вместить шестиугольники в виде шестиугольника для повернутой версии значка.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

Этот outline значок используется в следующих местах: панели приложений и расширения обмена сообщениями, помеченные пользователем как "Избранное".The outline icon is used in these places: the app bar and messaging extensions the user has marked as a "favorite." Этот значок должен быть 32x32 пикселя.This icon must be 32x32 pixels. Значок структуры должен содержать только белый цвет и прозрачность (без других цветов).Your outline icon must contain only white and transparency (no other colors). Значок может быть белым с прозрачным фоном или прозрачным для белого фона.The icon can be white with transparent background or transparent with a white background. Значок структуры не должен содержать дополнительные внутренние поля, окружающие значок, и должен быть обрезаться по мере возможности, при этом сохраняя размеры 32x32.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. Вот несколько хороших примеров:Here are a few good examples:

Совет

  • Цвет должен иметь белый цвет в RGB (красный цвет: 255, зеленый: 255, синий: 255).Color must be "White" in RGB, (Red: 255, Green: 255, Blue: 255).
  • Все остальные части значка должны быть прозрачными.All other part of icon should be transparent.
  • Для передачи мелкий значок должен быть полностью прозрачным, альфа-канал равен 0, а любое другое значение — неисправность.For passing, small icon must be full transparent, Alpha channel to be 0 and any other value is a fail.

Пример значков структуры

Например, предположим, что ваша компания — Contoso.For example, say your company is Contoso. Вы отправите два значка:You'd submit two icons:

Демонстрация значков

Ниже показано, как будут выглядеть значки в пользовательском интерфейсе.Here's how the icons would appear in the UI:

Bot и чиклет в представлении каналаBot and chiclet in Channel view

Интерфейс Bot и чиклет

ВсплывающихFlyout

Пример всплывающего меню contoso

Панель приложений и начальный экранApp bar and home screen

Пример панели приложений Contoso хомескрин