VK Mini App Boilerplate

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

Чтобы понимать, что здесь происходит вы должны знать что такое 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

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

iSa1vatore / vk-mini-app-boilerplate

Programming Languages

Labels