Важно

Работает только с сервером vk-mock-server достаточно скачать данный сервер и запустить, займет не более пары минут

Библиотека mocks объектов vkui-connect для разработки в браузере

Установка

npm install --save-dev vkui-api-connect-mock

как использовать

import VKConnect from 'vkui-api-connect-mock';

VKConnect.subscribe((e) => {
  if (e.detail.type === 'VKWebAppGetUserInfoResult') {
    // do something
  }
});
VKConnect.send('VKWebAppGetUserInfo', {});

More documentation regarding VK Connect is here.

Как изменить возвращаемый объект

В примере показано как для события VKWebAppGetUserInfo изменить возвращаемый объект detail.data

VKConnect.setConnectData('VKWebAppGetUserInfo', {
    photo_100: 'https://pp.userapi.com/c841034/v841034569/3b8c1/pt3sOw_qhfg.jpg',
    photo_200: 'https://pp.userapi.com/c841034/v841034569/3b8c1/pt3sOw_qhfg.jpg',
    first_name: 'Василий',
    last_name: 'Петров',
    sex: 0,
    city: {
      id: 1,
      title: 'Москва',
    },
    country: {
      id: 1,
      title: 'Россия'
    },
    timezone: 0
});

Список событий

• [x] VKWebAppInit
• [x] VKWebAppGetUserInfo
• [x] VKWebAppGetPhoneNumber
• [x] VKWebAppGetEmail
• [x] VKWebAppGetGeodata
• [x] VKWebAppGetAuthToken
• [x] VKWebAppCallAPIMethod
• [x] VKWebAppShare
• [x] VKWebAppShowWallPostBox
• [x] VKWebAppGetClientVersion
• [ ] VKWebAppOpenPayForm - Нет
• [x] VKWebAppAllowNotifications
• [x] VKWebAppDenyNotifications
• [x] VKWebAppSetLocation
• [x] VKWebAppAllowMessagesFromGroup
• [x] VKWebAppJoinGroup
• [x] VKWebAppOpenQR
• [ ] VKWebAppOpenApp - Нет
• [ ] VKWebAppSetViewSettings - Нет
• [x] VKWebAppScroll
• [ ] VKWebAppResizeWindow - Нет

Методы

• subscribe() - Подписаться на события

Пример

VKConnect.subscribe((e) => {
    console.log(e);
});

• send() - Отправляет событие с параметрами

Пример

VKConnect.send('VKWebAppGetEmail', {});

• unsubscribe() - Отписка от событий

Пример

let clb = (e) => {
    console.log(e)};
}
VKConnect.subscribe(clb);

VKConnect.unsubscribe(clb);

• setParameters({}) - Устанавливает параметры запроса, принимает объект в качестве параметра

Пример

VKConnect.setParameters({
    vk_user_id: 1 // id пользователя который зашел в сервис
});

• setConnectData() - Устанавливает возвращаемый объект для конкретного события

Пример

VKConnect.setConnectData('VKWebAppGetUserInfo', {
    photo_100: 'https://pp.userapi.com/c841034/v841034569/3b8c1/pt3sOw_qhfg.jpg',
    photo_200: 'https://pp.userapi.com/c841034/v841034569/3b8c1/pt3sOw_qhfg.jpg',
    first_name: 'Василий',
    last_name: 'Петров',
    sex: 0,
    city: {
      id: 1,
      title: 'Москва',
    },
    country: {
      id: 1,
      title: 'Россия'
    },
    timezone: 0
});

• setApiData() - Устанавливает возвращаемый объект для API запросов, событием VKWebAppCallAPIMethod

Пример

VKConnect.setApiData('users.get', [{
    "id": 210700286,
    "first_name": "Lindsey",
    "last_name": "Stirling",
    "city": {
        "id": 5331,
        "title": "Los Angeles"
    },
    "photo_50": "https://pp.vk.me/f6e/4-funfNRMwg.jpg",
    "verified": 1
}]);

• apiHuck() - Хук для события VKWebAppCallAPIMethod принимает функцию в качестве параметра

Пример

// Худля для отлова события `VKWebAppCallAPIMethod` когда будут возвращены данные
VKConnect.apiHuck(function (data, params) {
    // data - То что будет в detail.data
    // params - Параметры которые были переданы с событием VKWebAppCallAPIMethod (method, params)
    
    data.response[0]['first_name'] = "Василий"

    return data;
});

// отправляем событие `VKWebAppCallAPIMethod` для получения пользователей
VKConnect.send("VKWebAppCallAPIMethod", {
    "request_id": "dsfdsdfdsfds",
    "method": "users.get",
    "params": {
        "user_ids": "23486",
        "v":"5.87",
        "access_token":"79ba0f961302108f2d2b22c7907be10975be21441e6e3bfaee99a87144dd1fe4eb8bac70f44443ef042fd324e4ed6d7f"
    }
});

• cleansTokens() - Удаляет все ранее выданые access_token

Пример

VKConnect.cleansTokens();