Инструмент генерации QR-кода в апплете WeChat: weapp.qrcode.js

JavaScript Апплет WeChat NPM

предисловие

В недавней разработке небольшого программы необходимо создать QR-код в автономном режиме. Я подумал о некоторых отличных внешних библиотеках открытых источников.jquery-qrcodeа такжеnode-qrcode, так как в апплете нет понятия DOM, эти библиотеки в апплете не применимы.

Поэтому по характеристикам мини-программ WeChat, упакованныхweapp.qrcode.js, который используется для быстрого создания QR-кода в апплете. Эффект следующий:

Вот как это использовать:

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

Создать тег холста

Сначала в файле wxml создайте нарисованныйcanvasи определитьwidth, height, canvasId. Поскольку у апплета нет API для динамического создания тегов, этот шаг нельзя пропустить.

<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>

вызвать метод рисования

Поскольку апплет WeChat не поддерживает введение пакетов NPM, вы можете скопировать в проект weapp.qrcode.min.js из каталога dist.

Если ваш апплет использует фреймворк, поддерживающий импорт пакетов NPM, напримерwepy, также может быть установлен напрямуюweapp-qrcodeнпм-пакет.

npm install weapp-qrcode --save

После импорта файла js вызовитеdrawQrcode()Нарисуйте QR-код.

import drawQrcode from 'weapp-qrcode'
// 或者，将 dist 目录下，weapp.qrcode.min.js 复制到项目目录中
// import drawQrcode from '../../utils/weapp.qrcode.min.js'

drawQrcode({
  width: 200,
  height: 200,
  canvasId: 'myQrcode',
  text: 'https://github.com/yingye'
}

Описание API

параметр иллюстрировать Пример
width Требуется, ширина QR-кода иcanvasизwidthбыть последовательным 200
height Обязательно, высота QR-кода иcanvasизheightбыть последовательным 200
canvasId должен, нарисованcanvasId 'myQrcode'
text Обязательно, содержимое QR-кода 'https://github.com/yingye'
typeNumber Необязательный режим расчета QR-кода, значение по умолчанию -1 8
correctLevel Необязательно, уровень исправления ошибок QR-кода, значение по умолчанию расширено, значение:{ L: 1, M: 0, Q: 3, H: 2 } 1
background Не требуется, цвет фона QR-кода, значение по умолчанию — белый '#ffffff'
foreground Не требуется, основной цвет QR-кода, значение по умолчанию — черный '#000000'

Если вы хотите глубже понять принцип работы QR-кода, рекомендуется прочитатьДетали и принципы генерации QR-кода.

оригинальный документ

https://github.com/yingye/weapp-qrcode, если вы считаете, что это неплохо, не забудьте поставить звездочку~

Категории