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 09:47:23
|
|
|
Опубліковано 01.11.2019 11:41:54