angular-vkui-connect v1.0.0

angular-vkui-connect

Пакет для интеграции VKUI-приложений с нативными клиентами VK для iOS и Android на Angular или Ionic Framework.

По сути является портированной бибилтотекой из React в Angular https://github.com/VKCOM/vkui-connect с небольшими доработками, понадобившиеся в работе.

Описание API: https://vk.com/dev/vk_apps_docs

Установка

npm i angular-vkui-connect

import { AngularVkuiConnectService, LogService } from 'angular-vkui-connect';

constructor(
  private connect: AngularVkuiConnectService,
  public log: LogService
) {
}

Использование

// отправка события
this.connect.send('VKWebAppInit');

// Подписывается на результат события
this.connect.subscribe((e) => console.log('subscribe', e));

// Отправка события с подпиской на результат в виде промиса
this.connect.send('VKWebAppGetUserInfo').then(e => console.log('promise', e));

// Отправка события с подпиской на результат в виде обсервера
this.dataProfile$ = this.connect.sendObserver('VKWebAppGetUserInfo');

<div *ngIf="data$ | async as data">
  <img [src]="data.photo_100">

  <div text-wrap>
    <h2>{{ data.first_name }} {{ data.last_name }}</h2>
    <div color="medium">
      <p>{{ data.city.title }}</p>
    </div>
  </div>
</div>

Отладка и логи

Для того чтобы удобно было отлаживать на мобильном устройстве, выводите логи прямо на экране устройства.

в ts файле:

this.log$ = this.log.readLog();

в html файле:

<div padding [innerHTML]="log$ | async"></div>