QRCODE
QQ WeChat Alipay 3-i-1 online-generering
- Anpassa färgen på betalningskoden
- Förenkling av QR-kod
Demowebbplats:http://qr.no0a.cn
GitHub-adress:https://github.com/BWmelon/qrcode
förord
Först kom jag i kontakt med betalningskoden 3-i-1 som var sesame collection, vilket först var gratis, och sedan blev priset 5 RMB när det genererades. Efter det använde jag två system för generering av betalningskoder, ett är inkasso och det andra är Youqimeng insamlingskod, det första är väldigt smidigt att använda, det vill säga, QR-kodigenkänningen är relativt långsam, jag vill ändra gränssnittet men jag har inte lärt mig php och kan inte göra något. Den senare är källkoden jag köpte, och det tog ett tag att få fram vilken lilla svärdotter som bad mig bannlysa ( ̄▽ ̄) dig~*, och efter att ha hittat författaren blev jag uppmanad att köpa källkoden för ett tag sedan... Jag ville ta bort hans begränsningar, men jag var hjälplös efter att ha läst html+css-tutorialen, så jag kom på idén att bygga mitt eget genereringssystem.
Jag tillbringade några veckor med att göra det fram och tillbaka och i princip läsa dokument på Baidu, eftersom jag precis hade lärt mig detta och aldrig hade exponerats för så mycket. Efter att ha analyserat funktionerna i detta system anser jag att detta kan uppnås med html+css+js, och sedan började Baidu implementera kraven steg för steg.
Princip
Efter analys visade det sig att endast två sidor behövdes.
- Generera sidor
Detta är webbplatsens huvudsida, med två funktioner: en är att ladda upp QQ-, WeChat- och Alipay-betalningskoder och tolka dem till länkar, och den andra är att kombinera dessa länkar och sedan generera den kombinerade QR-koden. 'qrcode'-pluginet i jQuery används för parsning och generering, och för estetik används 'canvas' för att rita stilen på betalningskoden.
- Betalningssida
När mobilen skannar den tidigare genererade betalningskoden öppnas denna sida och hämtar de tre parametrarna (qq, WeChat, Alipay-länk) som angavs i betalningskoden, och bedömer sedan QR-koden som skannat av den aktuella mjukvaran enligt webbläsaren UA, qq och WeChat kan inte direkt framkalla betalning, sedan visas QR-kodgränssnittet för användare att trycka långt för att betala, Alipay kan direkt ange överföringssidan.
I det här fallet är den här webbplatsen klar, den genererade sidan lånar från samlingen och Youqimengs betalningskod, för att inte bli monoton och för att inte kopiera deras funktioner stelt, efter att ha tänkt ett tag fick jag en färgbytesfunktion (den känns värdelös, den består helt av innehåll haha), om du behöver andra stilar kan du gå till deras webbplats för att generera. Och eftersom de tre betalningskodslänkarna tillsammans blir särskilt långa, är den genererade QR-koden tätare (det vill säga ful), och sedan förkortas den långa URL:en genom suo.im, så att den genererade QR-koden blir enklare.
använda
1. Ladda ner källkoden och ladda upp den till din egen server eller webbhotell.
2. Byt din Alipay röda kuvertkod och ditt röda kuvertlösenord i '/js/index.js', och ta bort relevant kod om du inte behöver skapa ett gränssnitt för röda kuvertannonser som har markerats i filen.
Om du stöter på några problem, vänligen ge feedback, även om jag kanske inte kan lösa dem
Tack
* Samla in dina pengar
* Youqimeng betalningskod
* Layui
|
Publicerad på 2019-01-20 09:47:23
|
|
|
Publicerad på 2019-11-01 11:41:54