QRCODE
QQ WeChat Alipay 3-in-1 Online-Generation
- Die Farbe des Zahlungscodes anpassen
- Vereinfachung von QR-Codes
Demo-Website:http://qr.no0a.cn
GitHub-Adresse:https://github.com/BWmelon/qrcode
Vorwort
Zuerst kam ich mit dem Zahlungscode 3-in-1 in Kontakt, der Sesam Collection war, was anfangs kostenlos war, und dann wurde der Preis nach der Generierung auf 5RMB reduziert. Danach habe ich zwei Zahlungscode-Generierungssysteme verwendet, eines ist Collection und das andere ist Youqimeng Collection Code, das erste ist sehr praktisch zu bedienen, das heißt, die QR-Code-Erkennung ist relativ langsam, ich möchte die Benutzeroberfläche ändern, aber ich habe PHP noch nicht gelernt und kann nichts machen. Letzteres ist der Quellcode, den ich gekauft habe, und es hat eine Weile gedauert, bis ich herausgefunden habe, welche kleine Schwiegertochter mich gebeten hatte, dich zu bannen ( ̄▽ ̄)~*, und nachdem ich den Autor gefunden hatte, wurde ich vor einiger Zeit aufgefordert, den Quellcode zu kaufen... Ich wollte seine Einschränkungen aufheben, aber ich war nach dem Lesen des html+css-Tutorials hilflos, also kam ich auf die Idee, mein eigenes Generierungssystem zu bauen.
Ich habe ein paar Wochen damit verbracht, das hin und her zu machen, im Grunde damit verbracht, Dokumente auf Baidu zu lesen, weil ich das gerade erst gelernt hatte und nie mit vielen Dingen in Berührung gekommen war. Nach der Analyse der Funktionen dieses Systems denke ich, dass dies mit html+css+js erreicht werden kann, und dann begann Baidu, die Anforderungen Schritt für Schritt umzusetzen.
Prinzip
Nach der Analyse stellte sich heraus, dass nur zwei Seiten benötigt wurden.
- Seiten generieren
Dies ist die Hauptseite der Website mit zwei Funktionen: Die eine besteht darin, QQ-, WeChat- und Alipay-Zahlungscodes hochzuladen und sie in Links zu verwandeln, und die andere besteht darin, diese Links zu kombinieren und dann den kombinierten QR-Code zu generieren. Das 'qrcode'-Plugin von jQuery wird zum Parsen und Generieren verwendet, und aus ästhetischen Gründen wird 'canvas' verwendet, um den Stil des Zahlungscodes zu zeichnen.
- Zahlungsseite
Wenn das mobile Gerät den zuvor generierten Zahlungscode scannt, wird diese Seite geöffnet und erhält die drei Parameter (qq, WeChat, Alipay-Link), die im Zahlungscode eingegeben wurden, und bewertet dann den QR-Code, der von der aktuellen Software gescannt wurde, entsprechend dem Browser UA, qq und WeChat, der keine direkte Zahlung auslösen kann. Dann wird die QR-Code-Oberfläche angezeigt, damit Nutzer lange drücken können, um zu bezahlen; Alipay kann direkt auf die Übertragungsseite eingehen.
In diesem Fall ist diese Website bereit, die generierte Seite leiht sich aus der Sammlung und Youqimeng-Zahlungscode, um nicht monoton zu wirken und ihre Funktionen nicht steif zu kopieren, habe ich nach kurzem Überlegen eine Farbänderungsfunktion bekommen (sie fühlt sich nutzlos an, sie besteht komplett aus Inhalten, haha). Wenn du andere Stile brauchst, kannst du auf deren Website gehen, um sie zu generieren. Und da die drei Zahlungscode-Links zusammen besonders lang sind, ist der generierte QR-Code dichter (also hässlich), und dann wird die lange URL durch suo.im verkürzt, sodass der generierte QR-Code einfacher ist.
gebrauchen
1. Laden Sie den Quellcode herunter und laden Sie ihn auf Ihren eigenen Server oder Webhoster hoch.
2. Ändere deinen Alipay-Umschlagcode und das rote Passwort in '/js/index.js' und lösche den entsprechenden Code, falls du keine Schnittstelle für rote Umschlaganzeigen erstellen musst, die in der Datei markiert wurden.
Wenn du Probleme hast, gib bitte Feedback, auch wenn ich sie vielleicht nicht lösen kann.
Danke
* Kassiere dein Geld
* Youqimeng Zahlungscode
* Layui
|
Veröffentlicht am 20.01.2019 09:47:23
|
|
|
Veröffentlicht am 01.11.2019 11:41:54
|
