QRCODE
QQ WeChat Alipay 3-i-1 nettgenerering
- Tilpass fargen på betalingskoden
- Forenkling av QR-koder
Demo-nettside:http://qr.no0a.cn
GitHub-adresse:https://github.com/BWmelon/qrcode
forord
Først kom jeg i kontakt med betalingskoden 3-in-1 som var sesamsamling, som var gratis i starten, og så ble prisen 5 RMB når den ble generert. Etter det brukte jeg to betalingskodegenereringssystemer, ett er innkreving og det andre er Youqimeng innsamlingskode, det første er veldig praktisk å bruke, det vil si at QR-kodegjenkjenningen er relativt treg, jeg vil endre grensesnittet, men jeg har ikke lært php og kan ikke gjøre noe. Den siste er kildekoden jeg kjøpte, og det tok en stund å finne ut hvilken lille svigerdatter som ba meg utestenge ( ̄▽ ̄)~*, og etter å ha funnet forfatteren, ble jeg bedt om å kjøpe kildekoden for en stund siden... Jeg ønsket å oppheve begrensningene hans, men jeg var hjelpeløs etter å ha lest html+css-veiledningen, så jeg kom opp med ideen om å bygge mitt eget genereringssystem.
Jeg brukte noen uker på å gjøre det frem og tilbake, i praksis mens jeg leste dokumenter på Baidu, fordi jeg nettopp hadde lært dette og aldri hadde vært eksponert for så mye. Etter å ha analysert funksjonene til dette systemet, føler jeg at dette kan oppnås med html+css+js, og deretter begynte Baidu å implementere kravene steg for steg.
Prinsipp
Etter analyse ble det funnet at bare to sider trengtes.
- Generere sider
Dette er hovedsiden på nettsiden, med to funksjoner: den ene er å laste opp QQ-, WeChat- og Alipay-betalingskoder og tolke dem til lenker, og den andre er å kombinere disse lenkene og deretter generere den kombinerte QR-koden. 'qrcode'-pluginen i jQuery brukes til parsing og generering, og for estetikk brukes 'canvas' til å tegne stilen på betalingskoden.
- Betalingsside
Når mobilen skanner den tidligere genererte betalingskoden, åpnes denne siden og henter de tre parameterne (qq, WeChat, Alipay-lenke) som er oppgitt i betalingskoden, og deretter vurderes QR-koden som er skannet av den nåværende programvaren i henhold til nettleseren UA, qq og WeChat kan ikke direkte utløse betaling, deretter vises QR-kodegrensesnittet slik at brukerne kan trykke lenge for å betale, Alipay kan gå direkte inn på overføringssiden.
I dette tilfellet er denne nettsiden klar, den genererte siden låner fra samlingen og Youqimeng betalingskode, for å ikke være monoton og ikke kopiere funksjonene deres stivt, etter å ha tenkt en stund, fikk jeg en fargeendringsfunksjon (den føles ubrukelig, den består helt av innhold haha), hvis du trenger andre stiler, kan du gå til nettsiden deres for å generere. Og fordi de tre betalingskodelenkene til sammen blir spesielt lange, er den genererte QR-koden tettere (det vil si stygg), og så forkortes den lange URL-en til suo.im, slik at den genererte QR-koden blir enklere.
bruk
1. Last ned kildekoden og last den opp til din egen server eller webvert.
2. Endre din Alipay røde konvoluttkode og røde konvoluttpassord i '/js/index.js', og slett den relevante koden hvis du ikke trenger å generere et grensesnitt for røde konvoluttannonser, som er markert i filen.
Hvis du støter på problemer, vennligst gi tilbakemelding, selv om jeg kanskje ikke kan løse dem
Takk
* Samle pengene dine
* Youqimeng betalingskode
* Layui
|
Publisert på 20.01.2019 09:47:23
|
|
|
Publisert på 01.11.2019 11:41:54