This library mocks VK Bridge methods.
Use in your code instead of using vk-bridge by following way:
import bridge from '@vkontakte/vk-bridge-mock';
// App init
bridge.send('VKWebAppInit');
bridge.send('VKWebAppGetUserInfo', {}).then(data => {
// Do something
});Or event-based way:
import bridge from '@vkontakte/vk-bridge-mock';
// App init
bridge.send('VKWebAppInit');
bridge.subscribe(e => {
if (e.detail.type === 'VKWebAppGetUserInfoResult') {
// Do something
}
});
bridge.send('VKWebAppGetUserInfo', {});Please note that some methods may only receive (for example, VKWebAppUpdateConfig,
VKWebAppViewHide, VKWebAppViewRestore, etc.). To obtain data from them you need to use the event-based way and callReceiveOnlyMethod()
import bridge, { callReceiveOnlyMethod } from '@vkontakte/vk-bridge-mock';
// App init
bridge.send('VKWebAppInit');
bridge.subscribe(e => {
if (e.detail.type === 'VKWebAppUpdateConfig') {
// Do something
}
});
// Use this function when you need to get data
callReceiveOnlyMethod('VKWebAppUpdateConfig');For use without code bundler, include the file dist/browser.min.js and use as follows
<script src="https://unpkg.com/@vkontakte/vk-bridge-mock/dist/browser.min.js"></script>
<script>
// Sends event to client
vkBridgeMock.send('VKWebAppInit');
vkBridgeMock.subscribe(e => {
if (e.detail.type === 'VKWebAppUpdateConfig') {
// Do something
}
});
// Use this function when you need to get data
vkBridgeCallReceiveOnlyMethod('VKWebAppUpdateConfig');
</script>More documentation regarding VK Bridge is here.
Using with VK Mini Apps API
You can also use this library in conjunction with VK Mini Apps API:
import { VKMiniAppAPI } from '@vkontakte/vk-mini-apps-api';
import bridgeMock from '@vkontakte/vk-bridge-mock';
// Creating API instance
const api = new VKMiniAppAPI(bridgeMock);
// Using methods
api.getUserInfo().then(userInfo => {
// Do something with mock data of user info
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent