Создайте приложение на этой странице:
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
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 не поддерживает.
Продолжение