Skip to content

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

License

Notifications You must be signed in to change notification settings

iSa1vatore/vk-mini-app-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages