VK QR

Чтобы размещать ссылки на мини-приложение в офлайне, используйте QR-коды. Это поможет сделать VK QR — библиотека для генерации QR-кодов.

NPM: vk-qr

Внешний вид QR-кода

QR-код

Информация с QR-кода

Работа с библиотекой

1.

Перейдите к папке проекта мини-приложения:

Shell
cd <ПУТЬ_К_МИНИ_ПРИЛОЖЕНИЮ>
2.

Установите библиотеку:

Shell
yarn add @vkontakte/vk-qr || npm install @vkontakte/vk-qr
3.

Инициализируйте библиотеку:

JavaScript
import * as qr from '@vkontakte/vk-qr';
4.

Вызовите событие createQR объекта qr.

JavaScript
const qrSvg = qr.createQR(text, qrSize, className, options);

Платформы

Android, iOS, Mobile Web, Web

Параметры

Параметр	Тип	Описание
`text`	`string`	Строка для преобразования в QR-код.
`qrSize`	`integer`	Размер кода в пикселях.
`className`	`string`	Класс родительского SVG-элемента QR-кода.
`options`	`object`	Объект пользовательских настроек, которые вы хотите применить к сгенерированному QR-коду. Параметры объекта: • `isShowLogo` (`bool`) — Отображение логотипа ВКонтакте. Возможные значения: • `false` — QR-код без логотипа, • `true` — QR-код с логотипом. • `isShowBackground` (`bool`) — Отображение фона. Возможные значения: • `false` — без фона, • `true` — с фоном. • `backgroundColor` (`string`) — цвет фона QR-кода в кодировке HEX. Цвет фона задаётся, если параметр `isShowBackground` имеет значение `true`. • `foregroundColor` (`string`) — цвет QR-кода в кодировке HEX. • `logoColor` (`string`) — цвет фона логотипа ВКонтакте в кодировке HEX. Цвет фона задаётся, если параметр `isShowLogo` имеет значение `true`. Значение по умолчанию: `"#4680c2"`.

Пример использования

JavaScript

let text = 'https://vk.com/persik_ryzhiy';

let options = {};

options.isShowLogo = true;
options.isShowBackground = true;
options.backgroundColor = "#bbebf0";

const qrSvg = qr.createQR(text, 256, "qr-code-class", options);

document.body.innerHTML = qrSvg;

Примеры использования

Чтобы считать QR-код программно, используйте в мини-приложении событие VKWebAppOpenCodeReader.

Результат

Событие createQR возвращает строку SVG.