VK Mini Apps — начало работы
    1. Регистрация приложения ВКонтакте
        1.1 Режим разработки
    2. Быстрое создание шаблона VK Mini Apps
    3. VK UI
    4. VK Connect
        4.1 Библиотека VK Connect
        4.2 Библиотека VK Connect Promise
        4.3 Обработка ошибок VK Connect
    5. Работа с уведомлениями
    6. Параметры запуска
        6.1 Подпись параметров запуска
    7. Платформы с поддержкой VK Mini Apps
    8. Отладка VK Mini Apps
    9. Примеры
    10. Продвижение и каталог

События VK Connect
    1. Инициализация VK Connect
    2. Получение данных профиля
    3. Получение номера телефона
    4. Получение e-mail
    5. Получение геопозиции
    6. Выбор контакта из телефонной книги
    7. Авторизация пользователя
    8. Вызов методов API
    9. Вызов диалога Share
    10. Публикация записей на стене
    11. Получение версии официального приложения
    12. Платёж VK Pay
    13. Включение уведомлений
    14. Выключение уведомлений
    15. Установка хэша
    16. Подписка на сообщения сообщества
    17. Вступление в сообщество
    18. Сканирование QR-кода
    19. Открытие другого приложения
    20. Изменение внешнего вида клиента
    21. Прокрутка окна приложения
    22. Изменение размеров окна приложения
    23. Вызов карточки контактов
    24. Поддержка цветовой схемы
    25. Вызов списка друзей пользователя
    26. Получение информации о фонарике
    27. Установка яркости фонарика
    28. Добавление сервиса в сообщество
    29. Авторизация сообщества
    30. Добавление сервиса в избранные
    31. Взаимодействие с Taptic Engine
    32. Нативный просмотр изображений

VK Mini Apps — это платформа встраиваемых кроссплатформенных приложений ВКонтакте.

Набор для создания VK Mini Apps включает 3 npm-библиотеки:

• https://www.npmjs.com/package/@vkontakte/vkui — VK UI, компоненты интерфейса;
• https://www.npmjs.com/package/@vkontakte/icons — VK Icons, SVG-иконки на все случаи жизни;
• https://www.npmjs.com/package/@vkontakte/vkui-connect — VK Connect, пакет для общения с официальным приложением ВКонтакте.

Отдельно скажем про библиотеку для быстрого создания приложений на платформе VK Mini Apps:

• https://www.npmjs.com/package/@vkontakte/create-vk-mini-app

Если Вы раньше не имели дела с React, рекомендуем начать работу с этого руководства.
Если Вы уже начали разработку, стоит ознакомиться со списком рекомендаций

Создайте приложение на этой странице: https://vk.com/apps?act=manage.

Выберите «Встраиваемое приложение», тип: «VK app», укажите название и подтвердите действие. Вы попадёте в интерфейс администрирования Вашего приложения. Перейдите на вкладку «Настройки» и заполните поля «Мобильная версия»/«Полная версия», указав ссылку на адрес приложения — URL страницы на Вашем сайте, которая будет отображаться в браузере в официальных мобильных клиентах и внутри фрейма в веб-версии ВКонтакте.

Если какую-то из версий, полную или мобильную, Вы не планируете реализовывать — оставьте соответствующее поле пустым.
Во вкладке «Настройки» в интерфейсе управления приложением под полями для URL добавлен чек-бокс «Режим разработки», позволяющий указать «URL для разработки».
Адрес, указанный в этом поле, будет открываться только у администраторов приложения.
Для приложений, размещенных в каталоге сервисов, есть возможность указать буквенный адрес во вкладке «Информация» в интерфейсе управления приложением.
Новый буквенный адрес не должен быть короче пяти символов.

Используйте эту команду, чтобы создать шаблон приложения:

npx @vkontakte/create-vk-mini-app <folder name>

В нем есть все необходимое, чтобы начать работу над Вашим первым приложением. VK UI, VK Connect и VK Icons уже подключены и готовы к использованию.
Кроме того, в библиотеке поддержаны несколько систем публикации проекта, подробности читайте здесь

Мы рекомендуем именно этот способ для начала работы с VK Mini Apps.

Также может быть интересно: Быстрый старт.

С помощью VK UI Вы можете создать привлекательный интерфейс мобильного сервиса.
Для использования в полной версии элементы пока не адаптированы.

Документация: https://vkcom.github.io/vkui-styleguide/
NPM: https://www.npmjs.com/package/@vkontakte/vkui
VKUI Kit.sketch: Скачать

Если Вы используете шаблон из раздела 2, Вам не нужно отдельно подключать VK UI

Для подключения вручную используйте эту инструкцию:

• Создайте новое приложение:

npx create-react-app my-app

• Подключите VK UI:

npm install @vkontakte/vkui || yarn add @vkontakte/vkui

• Запустите Ваше приложение:

npm start

Теперь Вы можете работать с компонентами VK UI.

Обратите внимание, Вашему приложению доступна почти вся площадь экрана. Для корректной работы навигации необходимо:

• использовать компонент PanelHeader на каждом экране приложения. Он должен содержать название приложения и иконку «Назад» на тех экранах, где она требуется.
• не занимать правый верхний угол PanelHeader — это место зарезервировано для нативного бара с кнопками «Меню» и «Закрыть», который отображается всегда.
• использовать стилизованную под платформу иконку «Назад». Для этого используйте компоненты из библиотеки VK Icons:
  • Android — Icon24Back (@vkontakte/icons/dist/24/back);
  • iOS — Icon28ChevronBack (@vkontakte/icons/dist/28/chevron_back).
    
    

На устройствах с Android нажатие кнопки «Назад» вызывает в вебвью событие history.back (см. документацию). По нажатию этой кнопки официальное приложение сделает возврат на предыдущую страницу Вашего приложения или закроет его, если вернуться невозможно. Поэтому для корректной навигации необходимо обрабатывать нажатие аппаратной клавиши в сервисе и реализовывать роутинг, к примеру, при помощи библиотеки react-router

Для корректной работы приложения используйте следующие атрибуты viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover">

Подробнее о viewport.

Для интеграции Вашего приложения с API ВКонтакте и устройства пользователя мы предоставляем две React-библиотеки с разными подходами к получению и обработке событий: VK Connect и VK Connect Promise.
Список всех событий, с которыми работают библиотеки, Вы найдёте в этом разделе.

Если ранее Вы не работали с API ВКонтакте, рекомендуем прочитать это руководство.
Если ранее Вы не работали с React, рекомендуем прочитать это руководство

VK Connect — пакет для отправки и получения событий в Вашем
приложении. VK Connect позволяет работать с API ВКонтакте и устройства пользователя.

NPM: https://www.npmjs.com/package/@vkontakte/vkui-connect

Если Вы используете шаблон из раздела 2, Вам не нужно отдельно подключать VK UI

Для подключения вручную используйте эту инструкцию:

• Установите пакет:

npm install @vkontakte/vkui-connect || yarn add @vkontakte/vkui-connect

• Инициализируйте VK Connect в файле index.js:

import connect from '@vkontakte/vkui-connect';

• Далее Вы работаете с методами объекта connect:

// Отправляет событие нативному клиенту
connect.send("VKWebAppInit", {});
 // Подписывается на события, отправленные нативным клиентом
connect.subscribe((e) => console.log(e));
// Проверяет наличие события
if (connect.supports("VKWebAppResizeWindow"))
// Проверяет, поддерживается ли событие на текущей платформе.
{
connect.send("VKWebAppResizeWindow", {"width": 800, "height": 1000});
}

 
VK Connect Promise — пакет для интеграции VK Mini Apps-приложений с официальными клиентами VK для iOS, Android и Web с шиной событий на промисах.

Подробнее о промисах можно почитать тут:
https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objec... 🇬🇧/🇷🇺
http://learn.javascript.ru/promise 🇷🇺

NPM: https://www.npmjs.com/package/@vkontakte/vkui-connect-promise

Для подключения используйте эту инструкцию:

• Установите пакет:

npm install @vkontakte/vkui-connect-promise || yarn add @vkontakte/vkui-connect-promise

• Инициализируйте VK Connect в файле index.js:

import connect from '@vkontakte/vkui-connect-promise';

• Далее Вы работаете с методами объекта connect:

// Отправляет событие нативному клиенту
connect.send('VKWebAppInit', {})
  .then(data => handleResponse(data)) //Обработка события EventNameResult в случае успеха
  .catch(error => handleError(error)); //Обработка события EventNameFailed в случае ошибки

Обратите внимание: если вы планируете поддержать в своем сервисе цветовые схемы необходимо также подключить и обычную библиотеку VK Connect.
VK Connect Promise событие VKWebAppUpdateConfig не поддерживает.

Продолжение