Вопросы с меткой [vk-mini-apps]
Руководство по использованию метки vk-mini-apps отсутствует.
28 вопросов
Конкурсные
Неотвеченные
- Конкурсные 0
- Неотвеченные
- Цитируемые
- Рейтинг
- Неотвеченные (мои метки)
18 показов
Как обновить содержимое нынешней страницы React по выполнению асинхронной функции, результатом которой должно стать конкретное значение
Есть код, внутри него есть кнопка, которая вызывает функцию send_about() Задача стоит следующая, чтобы после того как в fetched_info положили информацию, выполнилась функция setPopout(null) Я бьюсь .
задан 5 ноя в 22:24
11 показов
Отображение vk mini app на ios устройствах
Разрабатываю vk mini app на reactjs. Столкнулся с такой проблемой: на андроид и декстопе все отображается корректно, но потом запустил на iphone SE 2020 и увидел, что у IOS статус бар наезжает на body.
задан 23 окт в 14:50
69 показов
React переход между экранами (компонентами)
Продолжаю изучать React, и мне стал интересен один момент. Есть навигация по страницам через react-router-dom, тут все понятно, переход по страницам без перезагрузки страницы. Но я наткнулся на .
задан 20 фев в 7:58
25 показов
Как узнать в какие группы установлено приложение vk mini apps?
Запрос на установку приложения в группу выполненен таким образом, но если пользователь уже установил приложение в группу, то как узнать список группу/группу в которое уже установлено приложение? Еще .
задан 6 фев в 17:06
Не работает мини приложение вк на локальной машине
Пытаюсь уже на второй машине запустить мини приложение, но у меня постоянная загрузка. Установил всё что написано на этой странице. Платформа Windows 10. С чем это может быть связано? Node — v16.18.1 .
задан 1 дек 2022 в 13:52
1k показов
module ‘vk’ has no attribute ‘Session’
Использовал модуль нормально больше года, сегодня при установке в новом проекте он стал выдавать оишбку на до этого рабочем коде. import vk vk_Id = input() token = «тут мой токен» session = .
задан 18 сен 2022 в 18:57
Вывести результат события VK Bridge
Создаю мини-приложение на основе библиотеки @vkontakte/create-vk-mini-app (https://www.npmjs.com/package/@vkontakte/create-vk-mini-app). Пытаюсь вывести VKWebAppGetClientVersion — номер версии .
задан 30 июн 2022 в 13:51
480 показов
проблемма с users.get vk.api
Я использую метод users.get для получения информации с профиля пользователя вк. Возьмем случайную страницу https://vk.com/id680277389 . При запросе вида vk_api.users.get(user_id=vk_Id, v=5.131), .
задан 30 июн 2022 в 13:45
86 показов
@vkontakte/create-vk-mini-app получаю ошибка Uncaught SyntaxError: Unexpected token ‘
Знаю, что много кто задавал похожий вопрос, но не нашел ответа для laravel. Вообще, проблема в следующем. Создаю react проект через @vkontakte/create-vk-mini-app, после чего делаю сборку yarn build .
задан 22 дек 2021 в 19:19
Как достать first_name
Нужно достать элемент first_name Я обращаюсь к библиотеке VkBridge — bridge.send(‘VKWebAppGetUserInfo’); Как достать из объекта first_name и вывести в консоль?
задан 7 окт 2021 в 16:00
Почему socket.io теряет соединение?
Всем добрый День. На данный момент занимаюсь разработкой VK MINI APPS приложения. Использую технологии React, node.js и socket.io (в связке с socket.io-client, оба имеют 4.2.0 версию). Столкнулся со .
задан 11 сен 2021 в 11:36
347 показов
VK mini apps. Аунтефикация пользователя
У меня имеется приложение на Vue. Решил разместить его во ВКонтакте, чтобы оно стало vk mini apps. По сути vk mini apps открывает «сайт приложения» во фрейме, но каким способом можно .
задан 7 апр 2021 в 20:37
170 показов
Почему ошибка?я новичек и только начал изучать react и вк апи
вот отрывок кода где выдаёт ошибку const storageData = await bridge.send(‘VKWebAppStorageGet’, props:< keys: Object.values(STORAGE_KEYS) >); вот сама ошибка SyntaxError: C:\Users\megat\minini\src\.
задан 21 фев 2021 в 8:01
3k показов
API для эмодзи статусов ВК
Есть ли методы API ВКонтакте для установки эмодзи статуса? Эмодзи статус могут ставить приложения «Covid-19» от ВКонтакте и «Школа дружбы» от My Little Pony, но можно ли добавить .
задан 25 ноя 2020 в 18:34
2k показов
vk mini app не открывается с телефона
С web версии и с мобильной версии все работает, а в мобильном приложении бесконечная загрузка. SSL сертификат самоподписанный, может в этом дело? В /var/log/nginx/access.log запросы с мобильного .
Saved searches
Use saved searches to filter your results more quickly
Cancel Create saved search
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
This repository has been archived by the owner on Apr 13, 2022. It is now read-only.
monosans / vk-vbitve-bot Public archive
Бот для мини-игры «ВБитве 2022» ВКонтакте.
License
monosans/vk-vbitve-bot
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Switch branches/tags
Branches Tags
Could not load branches
Nothing to show
Could not load tags
Nothing to show
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Cancel Create
- Local
- Codespaces
HTTPS GitHub CLI
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
Latest commit message
Commit time
README.md
Бот для мини-игры «ВБитве 2022» ВКонтакте.
Установка на Windows
- Устанавливаем Python (для Windows 7 нужен Python 3.8.X). Во время установки обязательно ставим галочку Add Python to PATH (Добавить Python в PATH) .
- Скачиваем архив с ботом.
- Распаковываем архив.
- Редактируем файл config.py через текстовый редактор:
Запуск: start.bat . Если после запуска выводится Python или выходит ошибка, связанная с Python или pip:
- Откройте cmd
- Напишите python -V
- Вывод должен соответстовать виду: Python версия . При этом версия должна быть выше 3.6.X.
- Если вывод не соответствует виду, нужно заново выполнить первый пункт инструкции (переустановить Python).
Установка в Termux (Android)
- Устанавливаем Termux с F-Droid, т. к. в Google Play разработчик его больше не обновляет.
- Запускаем Termux.
- Пишем по порядку:
cd pkg update -y pkg install -y git python git clone https://github.com/monosans/vk-vbitve-bot
- Чтобы получить VK_AUTH_HEADER и FRIENDS_HEADER с телефона, используем приложение F12:
- Открываем приложение F12, заходим на сайт мобильного ВКонтакте и авторизуемся.
- Открываем игру через тот же F12.
- Нажимаем кнопку F12, переходим на вкладку Network (3-я по счёту).
- Ставим галочку около Advance .
- Сворачиваем панель и нажимаем на стрелочку для перезагрузки страницы.
- Вновь нажимаем кнопку F12, переходим на вкладку Network .
- Немного листаем вверх и находим запись https://www.inbattle.space/get , нажимаем по ней.
- Появится ещё одна панель. Под записью Request Headers находим поле vk-auth .
- Копируем его значение (начинается c vk_access_token_settings).
- Вставляем скопированный текст в значение VK_AUTH_HEADER в config.py между кавычками.
- Возвращаемся в приложение F12 .
- Под записью Request Headers находим поле friends .
- Копируем его значение (состоит из цифр).
- Вставляем скопированный текст в значение FRIENDS_HEADER в config.py между кавычками.
- Про остальные настройки можно прочитать в инструкции для Windows.
Запуск: sh vk-vbitve-bot/start.sh
Переустановка в Termux
Ввести команды по порядку:
cd rm -rf vk-vbitve-bot
После этого заново установить по инструкции.
Как работать с Vk Mini App на python?
Можно ли сделать Vk Mini Apps на python, как подключить vk-bridge к js?
- Вопрос задан более трёх лет назад
- 2608 просмотров
Комментировать
Решения вопроса 1
Sergey @KingstonKMS
Только так как описано на вк — см
Ответ написан более трёх лет назад
Dev12345 @Dev12345 Автор вопроса
Как подключить vk-bridge к js? (Не node js, а js в html)
Sergey @KingstonKMS
Dev12345, по ссылке все написано
Dev12345 @Dev12345 Автор вопроса
Sergey, там node js
Sergey @KingstonKMS
Dev12345, там есть ответ на ваш вопрос
Dev12345 @Dev12345 Автор вопроса
Sergey, покажите пожалуйста, я не вижу
Dev12345 @Dev12345 Автор вопроса
Там можно установить vk-bridge только на node js , как подключить к js (html) модуль vk-bridge я не знаю
Sergey @KingstonKMS
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- Python
Палиндромы leetcode, в VS все правильно, на сайте другой ответ, что делать?
- 1 подписчик
- 2 часа назад
- 53 просмотра

- HTML
- +3 ещё
Почему не работает переход на страницу?
- 1 подписчик
- 3 часа назад
- 82 просмотра

- Python
- +1 ещё
Реально ли вывести виджет с какой-либо инфой поверх PySide6.QtMultimediaWidgets.QVideoWidget?
- 1 подписчик
- 4 часа назад
- 13 просмотров

- Python
Почему не проходит код для решения задачи на leetcode?
- 1 подписчик
- 4 часа назад
- 74 просмотра

- Python
Почему текстовый редактор и консоль по-разному присваивают ссылки на переменные Python?
- 1 подписчик
- 4 часа назад
- 30 просмотров

- Python
- +1 ещё
Почему callback_query_handler не видит call.data?
- 1 подписчик
- 9 часов назад
- 40 просмотров

- Python
При выводе users_cards выводится [, . ] как это исправить?
- 1 подписчик
- 10 часов назад
- 34 просмотра

- Python
В приложении django 4.2 + django rest framework: Model.__str__ нужен только для админки?
- 1 подписчик
- 13 часов назад
- 47 просмотров

- Python
- +1 ещё
Не правильная проверка ячейки таблицы через цикл, почему не записывается переменная?
- 1 подписчик
- 13 часов назад
- 37 просмотров

- Python
Почему падает бот?
- 1 подписчик
- вчера
- 85 просмотров
от 120 000 ₽
от 120 000 до 240 000 ₽
ATI.SU • Санкт-Петербург
от 170 000 до 260 000 ₽
19 нояб. 2023, в 23:12
55555 руб./за проект
19 нояб. 2023, в 20:35
4000 руб./за проект
19 нояб. 2023, в 20:11
500 руб./за проект
Минуточку внимания
Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями
- Не могу настроить почтовый сервер(Postfix/Dovecot с интеграцией в MS Active Directory) на alt linux. Может у кого-то есть решение?
- 3 подписчика
- 1 ответ
- 3 подписчика
- 2 ответа
- 2 подписчика
- 1 ответ
- 2 подписчика
- 1 ответ
- 3 подписчика
- 2 ответа
- 2 подписчика
- 2 ответа
- 2 подписчика
- 1 ответ
- 2 подписчика
- 3 ответа
- 2 подписчика
- 1 ответ
- 2 подписчика
- 1 ответ
Разработка приложений в VK mini apps
Почему надо смотреть в сторону разработки приложений для работы в VK? У меня за спиной много лет фронтенд-разработки для массовых сервисов, и то, что сейчас предлагает разработчику социальная сеть «ВКонтакте» — быстрый и эффективный способ построить еще один канал коммуникации с действительно большой аудиторией. Ниже расскажу, в чем идея VK mini apps, какие технологии использовать при разработке приложения и на что стоит обратить внимание.

Первоначальная публикация статьи в блоге Mail.ru Cloud Solutions: https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps
Платформа VK mini apps
«ВКонтакте» предоставляет сторонним разработчикам возможность писать веб-приложения и размещать их в каталоге приложений и/или продвигать внутри сети. Пользователям приложений не нужно скачивать отдельные нативные приложения из Google Play/App Store, функционал выбранного приложения доступен внутри пользовательской сессии основного приложения во «ВКонтакте» или через браузер, на сайте соцсети. В социальной сети есть подробная инструкция о том, как начать работу на платформе VK mini apps.
Инфраструктура приложения VK mini app
Приложение VK mini app представляет собой обычный веб-ресурс, располагаемый по определенному адресу. Его мы должны разместить в «Панели управления приложением» социальной сети.
«ВКонтакте» позволяет разместить три версии приложения:
- для мобильных клиентов — то есть для открытия в нативном приложении «ВКонтакте»;
- десктопный вариант — vk.com в браузере;
- вариант для браузеров в мобильных телефонах (https://m.vk.com).
Ваш веб-ресурс встраивается в приложение «ВКонтакте» через обычное WebView, при открытии с десктопа — через iFrame. Поэтому необходимо держать в уме, что часть функционала JavaScript может быть недоступна, необходимо тщательное тестирование.
После тестирования веб-приложения на разных устройствах его можно отправлять на модерацию, чтобы оно могло быть размещено в каталоге. Заявка на модерацию отправляется из «Панели управления приложением». Объявленный «ВКонтакте» срок модерации — 7 дней. Выкладки новых приложений (сервисов по терминологии «ВКонтакте») происходят раз в неделю по четвергам.
Есть подробная памятка о том, как создать правильное приложение. Рекомендую внимательно свериться с ней, прежде чем отдавать приложение на модерацию.
Разработка приложения VK mini app
Итак, приложение VK Mini Apps — это, по сути, обычное веб-приложение, которое встраивается в платформу посредством iFrame или WebView. Поэтому выбор технологий, на котором оно будет написано, за вами.
Однако для разработки фронтенда «ВКонтакте» рекомендует собственную библиотеку готовых компонентов VK UI, выполненную на React:
Это удобно — многие типовые компоненты уже готовы, осталось только встроить их в структуру вашей страницы или SPA.
Компоненты уже стилизованы согласно styleguide «ВКонтакте» — пользователю будет привычнее и удобнее работать с теми элементами управления и интерактивом, к которым он уже привык, находясь внутри социальной сети.
«ВКонтакте» не требует от разработчика следования какой бы то ни было жесткой архитектуре построения фронтенда — мы берем только то, что нужно, и модифицируем компоненты так, как нужно. Например, вы всегда сможете добавить глупому view-компоненту свой класс, свой обработчик событий, сделать вложенные компоненты любой глубины и так далее.
Существует достаточно подробная (правда, не совсем полная) документация по VKUI. Исходный код на GitHub: https://github.com/VKCOM/VKUI. Соответственно, максимально простая установка:npm i —save-dev @vkontakte/vkuiОбязательно нужно поставить следующий метатег в head верстки страницы вашего приложения, иначе на устройствах с iOS будет неправильно отображаться нативная навигация «ВКонтакте»:
Далее нам нужно просто встроить React-приложение на страницу.
Параметры открытия приложения
«ВКонтакте» сам добавляет параметры запуска к адресной строке, по которой открывается ваше приложение. Их список следующий: vk_user_id, vk_app_id, vk_are_notifications_enabled, vk_language, vk_ref, vk_access_token_settings, vk_group_id, vk_viewer_group_role, vk_platform, vk_is_favorite, sign. То есть фрейм с вашим приложением откроется примерно с похожим адресом: youvkapp.ru/?vk_access_token_settings=notify&vk_app_id=888888&vk_are_notifications_enabled=1&vk_is_app_user=1&vk_is_favorite=1&vk_language=ru&vk_platform=desktop_web&vk_ref=other&vk_user_id=111111&sign=fsdfsdgfgfiuoitu8345u34j
Это позволяет уже при старте приложения иметь достаточно полный набор данных, извлеченных из url, чтобы начать персональное взаимодействие с конкретным пользователем. Например, говорить с ним на одном языке — русском, английском или каком-то другом, либо попросить о включении своих уведомлений.
Дополнительные параметры в этот список «ВКонтакте» на ноябрь 2019 года включать не планирует. Однако в url можно передать произвольный хэш, например: youvkapp.ru#custom_param
Роутинг
Если в приложении больше одного экрана (я думаю, это как раз ваш случай), нужен переход между экранами. За показ того или иного экрана отвечает state нашего React-приложения. Что касается организации View, то «ВКонтакте» предлагает два способа: смена активного компонента VKUI View и VKUI Panel.
Каждый View отвечает за свой пользовательский сценарий: основной, дополнительный, вызов справочников, страницы поиска и другие. Внутри View содержится свой набор Panel — это конкретные шаги (экраны) в пользовательском сценарии. Абстрактно это выглядит так:
import from ‘@vkontakte/vkui’;> > > В state в activePanel мы прописываем id того элемента, который нужно показать.
Верстка и компоненты
Теперь можно посмотреть типичную страницу внутри Panel, созданную с помощью компонентов VK UI.
Библиотека VK UI предоставляет практически полный набор компонентов, необходимых для построения интерактивного приложения: всевозможные элементы форм, попапы, стилизованные алерты, галереи, панели навигации, спиннеры, аватары, футеры и так далее.
import < Button, Div, FormLayout, Input, Panel, PanelHeader, PanelHeaderBack, Search, View >from "@vkontakte/vkui"; import Icon36Done from "@vkontakte/icons/dist/36/done"; import CustomTextarea from "./YourComponents/CustomTextarea"; render() < return () >> />> >App Title height= />This is the first page
You can do some interaction here
value= /> onChange= />Как видно, появился ещё один пакет vkontakte:
npm i —save-dev @vkontakte/iconsМожно воспользоваться удобным менеджером по подбору нужной иконки.
Основное правило — правильно использовать компонент либо собственную верстку шапки. В правой части шапки нативное приложение «ВКонтакте» размещает кнопки управления.

import < Textarea >from «@vkontakte/vkui»; export default class CustomTextarea extends React.Component < render() < return (Custom textarea is herename= onChange= this.bindData(e, this.props.name)> value= className= />
