VK Mini App Boilerplate

Стартовый кит для создания сервиса на платформе VK Mini Apps.

Чтобы понимать, что здесь происходит вы должны знать что такое VK Mini Apps, ReactJS и React Redux.

Документация по VK Mini Apps

Документация по ReactJS

Документация по React Redux

Установка:

git clone git://github.com/iSa1vatore/vk-mini-app-boilerplate.git <folder name>

Перейдите в созданную папку и выполните команды: npm install и npm start, последняя запустит сервер для разработки на localhost:10888

Отлично, теперь перед нами демонстративное приложение, можно править код и все изменения сразу будут видны на нашем сервере при помощи "Hot Reloading".

KIT:

Что реализовано:

• Поддержка темы нативного клиента
• Поддержка iOS swipe back для панелей
• Обработка хардверной кнопки "назад" для Android
• Сохранение позиции скролла для панелей и элементов
• Scroll To Top при нажатии на иконку в Epic`e
• Получение токена пользователя
• Запросы к API ВКонтакте
• Сохранение данных в форме при смене панели
• Роутер

Роутер:

Действия которые роутер может выполнить:

• setStory(story, initial_panel) - Устанавливает активную Story у Epic'a, View и активную панель.
• setPage(view, panel) - Устанавливает активный View и Panel
• goBack(from) - Совершает действие назад, будь то закрытие модального окна, переход на прошлую панель, закрытие попапа и т.п;
• openPopout(popout) - Открывает поппап.
• closePopout() - Закрывает поппап.
• openModal(id) - Открывает модальную страницу по её ID.
• closeModal() - Закрывает модальную страницу или открывает прошлую страницу.

Примеры того как это все работает смотрите в исходниках ¯_(ツ)_/¯, там все просто.

Сохранение позиции скролла:

Для сохранения позиции горизонтального скоролла нужно:

• Указать ID для элемента HorizontalScroll

<HorizontalScroll id="EXAMPLE_TABS_LIST">
...
</HorizontalScroll>

• Сохранить позицию при демонтировании

componentWillUnmount() {
    const {setScrollPositionByID} = this.props;

    setScrollPositionByID("EXAMPLE_TABS_LIST");
}

• Восстановить позицию при монтировании

componentDidMount() {
    restoreScrollPosition();
}

Пример находится в файле: /src/js/panels/more/base.js

Важно:

В файле index.js на 24 стороке указывается стартовая панель приложения:

store.dispatch(setStory('home', 'base'));

В данном случае это значит, что приложение запустится с:

activeStory: home

activeView: home

activePanel: base

Как вы поняли значение ID у Root и стартового View должны совпадать.

В проекте есть 2 файла: "App" и "AppWithoutEpic", первый идет с навигационной панелью Epic, второй без, он подойдет для простых приложений.

import App from './App';

По умолчанию для примера выбран вариант с Epic навигацией.

В файле по пути /src/js/services/VK.js нужно заменить значение константы APP_ID на ID вашего приложения

Демо: vk.com/app6984089

Мой VK (вопросы, предложения): Ivan Salvatore