QRCODE
QQ WeChat Alipay 3-in-1 online generatie
- Pas de kleur van de betalingscode aan
- Vereenvoudiging van QR-codes
Demowebsite:http://qr.no0a.cn
GitHub-adres:https://github.com/BWmelon/qrcode
inleiding
In eerste instantie kwam ik in contact met de betaalcode 3-in-1 die Sesam Collection was, wat eerst gratis was, en toen werd de prijs 5RMB zodra het werd gegenereerd. Daarna gebruikte ik twee systemen voor het genereren van betalingscodes, één is incasso en de andere is Youqimeng verzamelcode, de eerste is erg handig in gebruik, dat wil zeggen, de QR-code herkenning is relatief traag, ik wil de interface veranderen maar ik heb PHP nog niet geleerd en kan niets doen. De laatste is de broncode die ik heb gekocht, en het duurde even voordat ik het kleine schoondochtertje had gevraagd je te verbannen ( ̄▽ ̄)~*, en nadat ik de auteur had gevonden, werd ik enige tijd geleden gevraagd de broncode te kopen... Ik wilde zijn beperkingen annuleren, maar ik was machteloos na het lezen van de html+css-tutorial, dus kwam ik op het idee om mijn eigen generatiesysteem te bouwen.
Ik heb er een paar weken mee doorgebracht, eigenlijk bezig met het lezen van documenten over Baidu, omdat ik dit net had geleerd en nog nooit veel dingen had meegemaakt. Na het analyseren van de functies van dit systeem denk ik dat dit kan worden bereikt met html+css+js, en daarna begon Baidu de vereisten stap voor stap te implementeren.
Principe
Na analyse bleek dat er slechts twee pagina's nodig waren.
- Pagina's genereren
Dit is de hoofdpagina van de website, met twee functies: de ene is het uploaden van QQ-, WeChat- en Alipay-betalingscodes en deze omzetten in links, en de andere is het combineren van deze links en vervolgens het genereren van de gecombineerde QR-code. De 'qrcode'-plugin van jQuery wordt gebruikt voor parsing en genereren, en voor esthetiek wordt 'canvas' gebruikt om de stijl van de betalingscode te tekenen.
- Betalingspagina
Wanneer het mobiele apparaat de eerder gegenereerde betalingscode scant, wordt deze pagina geopend en worden de drie parameters (qq, WeChat, Alipay-link) die in de betaalcode zijn ingevoerd, en vervolgens wordt de QR-code beoordeeld die door de huidige software is gescand volgens de browser, waarbij UA, qq en WeChat geen betaling direct kunnen oproepen, waarna de QR-code-interface wordt weergegeven zodat gebruikers kunnen lang drukken om te betalen; Alipay kan direct de overdrachtspagina invoeren.
In dit geval is deze website klaar, de gegenereerde pagina leent uit de collectie en Youqimeng betaalcode, om niet eentonig te zijn en hun functies niet stijf te kopiëren, heb ik na een tijdje nadenken een kleurveranderingsfunctie gekregen (het voelt nutteloos, het bestaat volledig uit content haha), als je andere stijlen nodig hebt, kun je naar hun website gaan om te genereren. En omdat de drie betaalcode-links samen bijzonder lang zijn, is de gegenereerde QR-code dichter (dat wil zeggen, lelijk), en wordt de lange URL ingekort tot suo.im, zodat de gegenereerde QR-code eenvoudiger wordt.
gebruiken
1. Download de broncode en upload deze naar je eigen server of webhost.
2. Verander je Alipay rode envelopcode en rode envelopwachtwoord in '/js/index.js', en verwijder de relevante code als je geen interface hoeft te genereren voor rode envelopadvertenties die in het bestand zijn gemarkeerd.
Als je problemen tegenkomt, geef dan alsjeblieft feedback, hoewel ik ze misschien niet kan oplossen
Bedankt
* Verzamel je geld
* Youqimeng betaalcode
* Layui
|
Geplaatst op 20-01-2019 09:47:23
|
|
|
Geplaatst op 01-11-2019 11:41:54