QRCODE
QQ WeChat Alipay 3-в-1 онлайн-генерация
- Настройка цвета кода оплаты
- Упрощение QR-кодов
Демо-сайт:http://qr.no0a.cn
Адрес на GitHub:https://github.com/BWmelon/qrcode
предисловие
Сначала я столкнулся с кодом оплаты 3-в-1 — это был сбор кунжута, который сначала был бесплатным, а потом цена стала 5 юаней. После этого я использовал две системы генерации платёжных кодов: одна — коллекция, другая — код сбора Youqimeng, первая очень удобна в использовании, то есть распознавание QR-кодов довольно медленное, я хочу изменить интерфейс, но я не выучил php и ничего не умею делать. Последний — это исходный код, который я купил, и мне понадобилось время, чтобы заставить меня забанить тебя~( ̄▽ ̄)*, а после того, как я нашёл автора, меня посоветовали купить исходный код некоторое время назад... Я хотел отменить его ограничения, но после прочтения туториала по html+css оказался беспомощен, поэтому придумал создать собственную систему генерации.
Я провёл несколько недель, занимаясь этим туда-сюда, в основном читая документы на Baidu, потому что только что узнал об этом и никогда не сталкивался с многими вещами. После анализа функций этой системы я понял, что этого можно достичь с помощью html+css+js, а затем Baidu начал поэтапно реализовывать требования.
Принцип
После анализа выяснилось, что требуется всего две страницы.
- Генерировать страницы
Это главная страница сайта с двумя функциями: одна — загрузка платёжных кодов QQ, WeChat, Alipay и их разбор в ссылки, а другая — объединение этих ссылок и генерация комбинированного QR-кода. Плагин 'qrcode' jQuery используется для разбора и генерации, а для эстетики — 'canvas' для отрисовки стиля платёжного кода.
- Страница оплаты
Когда мобильное устройство сканирует ранее сгенерированный платёжный код, открывается эта страница и получает три параметра (qq, WeChat, ссылка Alipay), переданные в платежном коде, а затем оценивает QR-код, отсканированный текущим программным обеспечением, согласно браузеру UA, qq и WeChat не могут напрямую вызвать оплату, затем отображается интерфейс QR-кода, чтобы пользователи могли долго нажать для оплаты, Alipay может напрямую перейти на страницу перевода.
В данном случае сайт готов, сгенерированная страница заимствует из коллекции и платёжного кода Youqimeng, чтобы не быть монотонным и не копировать их функции жёстко, после некоторого размышления у меня есть функция смены цвета (она кажется бесполезной, полностью состоит из контента, ха-ха), если нужны другие стили, можно зайти на их сайт для генерации. И поскольку три платёжных кода в сумме оказываются особенно длинными, сгенерированный QR-код становится плотнее (то есть некрасивым), а длинный URL сокращается через suo.im, чтобы сгенерированный QR-код был проще.
использование
1. Скачайте исходный код и загрузите его на свой сервер или веб-хост.
2. Измените красный код конверта Alipay и пароль от красного конверта в '/js/index.js' и удалите соответствующий код, если не нужно генерировать интерфейс для рекламы с красным конвертом, которые отмечены в файле.
Если возникнут какие-либо проблемы, пожалуйста, дайте обратную связь, хотя, возможно, я не смогу их решить
Спасибо
* Забери свои деньги
* Платёжный код Youqimeng
* Лаюи
|
Опубликовано 20.01.2019 9:47:23
|
|
|
Опубликовано 01.11.2019 11:41:54