Создание vk mini apps?

Question

[sema-fedotov]

Добрый день, решил заняться разработкой vk mini apps приложения, но столкнулся с кучей трудностей.
Решил разрабатывать на Node js, подключил vk-bridge
import bridge from '@vkontakte/vk-bridge'
Подключил vk-io

import VK from 'vk-io'
const vk = new VK({
	appId: ***
})

И тут начались первые трудности. При запуске скрипта появляется такая картина:

const vk = new VK({
           ^
TypeError: VK is not a constructor

Я уже все перепробовал, надеюсь на вашу помощь

Comments

[Сергей Соколов]

зачем для mini-apps понадобился модуль vk-io? Там же все запросы через bridge.
Имхо vk-io для mini apps не нужен.

[sema-fedotov]

Сергей Соколов, вылез следующий косяк)

import bridge from '@vkontakte/vk-bridge'
bridge.send("VKWebAppInit")

TypeError: bridge.send is not a function

[Сергей Соколов]

sema-fedotov,

<script src="https://cdn.jsdelivr.net/npm/@vkontakte/vk-bridge@2.0.8/dist/index.umd.js"></script>
<script>
const bridge = vkBridge.default;
bridge.subscribe((e) => console.log("vkBridge event", e));
bridge.send("VKWebAppInit", {});

</script>

[sema-fedotov]

Сергей Соколов, Мне нужно создать html файл?

[Сергей Соколов]

sema-fedotov, да, эти строки – из прототипа, над которым сейчас работаю, как раз – чтобы не париться со сборкой, прямо в HTML вот так сделал пока. Всё работает.

Странно, что у вас возникает описанная ошибка – ведь строки прямо из их документации..

[Сергей Соколов]

sema-fedotov, это ведь всё делается в итоге для браузера, это же mini-app. Как вы собираете проект? Babel подключили?

[sema-fedotov]

Сергей Соколов, на чистом node js и в package.json прописал "type":"module"

[sema-fedotov]

Сергей Соколов, просто мне как то нужно это связать все дело с базой mysql, но вот пока не знаю в какую сторону копать.
Пришлось уйти в сторону от их "быстрого старта" на реакте.

[Сергей Соколов]

sema-fedotov, MySQL у вас на сервере.
JavaScript на HTML-странице VK Mini App выполняется в браузере клиента.
Чтобы на клиенте получить что-то из базы, надо либо сразу это вставлять в html страницы, либо делать ajax-запросы к "концам" вашего api.

[sema-fedotov]

Сергей Соколов, Да, но как мне вставить данные в html через Node?

[Сергей Соколов]

sema-fedotov, ну как, у вас же Node генерит страницу, которую отдаёт в браузер? Покажите, как

[sema-fedotov]

Сергей Соколов, нет, этого я пока не делал, застрял на моменте, что bridge не видит функцию send

[Сергей Соколов]

sema-fedotov, выше я привел рабочий код, прям копи, пэйст, ран )

[Сергей М.]

Сергей Соколов, Большое спасибо! Помогло

Answer 1

[Сергей Соколов]

HTML:

<script src="https://cdn.jsdelivr.net/npm/@vkontakte/vk-bridge@2.0.8/dist/index.umd.js"></script>
<script>
const bridge = vkBridge.default;
bridge.subscribe((e) => console.log("vkBridge event", e));
bridge.send("VKWebAppInit", {});

</script>

Answer 2

[SideWest]

Брат, надо

const vk = require('vk-io')