Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iSa1vatore/vk-mini-app-boilerplate
Стартовый кит для создания сервиса на платформе VK Mini Apps с использованием React + Redux
https://github.com/iSa1vatore/vk-mini-app-boilerplate
react react-redux vk vk-api vk-apps vkontakte vkui
Last synced: about 1 month ago
JSON representation
Стартовый кит для создания сервиса на платформе VK Mini Apps с использованием React + Redux
- Host: GitHub
- URL: https://github.com/iSa1vatore/vk-mini-app-boilerplate
- Owner: iSa1vatore
- License: mit
- Created: 2019-07-21T22:27:36.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-02-22T08:26:09.000Z (almost 5 years ago)
- Last Synced: 2024-10-29T20:32:53.689Z (about 2 months ago)
- Topics: react, react-redux, vk, vk-api, vk-apps, vkontakte, vkui
- Language: JavaScript
- Size: 59.6 KB
- Stars: 59
- Watchers: 4
- Forks: 11
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VK Mini App Boilerplate
**Стартовый кит для создания сервиса на платформе VK Mini Apps.**
Чтобы понимать, что здесь происходит вы должны знать что такое VK Mini Apps, ReactJS и React Redux.
[Документация по VK Mini Apps](https://vk.com/dev/vk_apps_docs)
[Документация по ReactJS](https://ru.reactjs.org/docs/getting-started.html)
[Документация по React Redux](https://rajdee.gitbooks.io/redux-in-russian/content/)
## Установка:
`git clone git://github.com/iSa1vatore/vk-mini-app-boilerplate.git `
Перейдите в созданную папку и выполните команды: `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
```javascript
...
```
- Сохранить позицию при демонтировании
```javascript
componentWillUnmount() {
const {setScrollPositionByID} = this.props;
setScrollPositionByID("EXAMPLE_TABS_LIST");
}
```
- Восстановить позицию при монтировании
```javascript
componentDidMount() {
restoreScrollPosition();
}
```
Пример находится в файле: [`/src/js/panels/more/base.js`](https://github.com/iSa1vatore/vk-mini-app-boilerplate/blob/master/src/js/panels/more/base.js)
#### Важно:
В файле index.js на 24 стороке указывается стартовая панель приложения:
```javascript
store.dispatch(setStory('home', 'base'));
```
В данном случае это значит, что приложение запустится с:
`activeStory: home`
`activeView: home`
`activePanel: base`
Как вы поняли значение ID у Root и стартового View должны совпадать.
В проекте есть 2 файла: "App" и "AppWithoutEpic", первый идет с навигационной панелью Epic, второй без, он подойдет для простых приложений.
```javascript
import App from './App';
```
По умолчанию для примера выбран вариант с Epic навигацией.
В файле по пути [`/src/js/services/VK.js`](https://github.com/iSa1vatore/vk-mini-app-boilerplate/blob/master/src/js/services/VK.js) нужно заменить значение константы `APP_ID` на ID вашего приложения
Демо: [vk.com/app6984089](https://vk.com/app6984089)
Мой VK (вопросы, предложения): [Ivan Salvatore](https://vk.com/s9008)