QRcode
QQ WeChat Alipay generazione online 3-in-1
- Personalizzare il colore del codice di pagamento
- Semplificazione del codice QR
Sito dimostrativo:http://qr.no0a.cn
Indirizzo GitHub:https://github.com/BWmelon/qrcode
prefazione
All'inizio sono entrato in contatto con il codice di pagamento 3-in-1 era raccolta sesamo, che all'inizio era gratuita, e poi il prezzo è diventato 5RMB una volta generato. Dopo di ciò, ho usato due sistemi di generazione di codici di pagamento, uno è il recupero e l'altro è il codice di raccolta Youqimeng, il primo è molto comodo da usare, cioè il riconoscimento dei codici QR è relativamente lento, vorrei cambiare l'interfaccia ma non ho imparato PHP e non posso fare nulla. Quest'ultimo è il codice sorgente che ho comprato, e ci è voluto un po' prima che quella nuora mi avesse chiesto di bannarti ( ̄▽ ̄)~*, e dopo aver trovato l'autore, sono stato invitato a comprare il codice sorgente tempo fa... Volevo annullare le sue restrizioni, ma ero impotente dopo aver letto il tutorial html+css, così mi venne l'idea di costruire un mio sistema di generazione.
Ho passato alcune settimane a farlo avanti e indietro, praticamente passandole a leggere documenti su Baidu, perché l'avevo appena scoperto e non ero mai stato esposto a molte cose. Dopo aver analizzato le funzioni di questo sistema, ritengo che ciò possa essere realizzato con html+css+js, e poi Baidu ha iniziato a implementare i requisiti passo dopo passo.
Principio
Dopo l'analisi, si scoprì che servivano solo due pagine.
- Generare pagine
Questa è la pagina principale del sito web, con due funzioni: una è caricare i codici di pagamento QQ, WeChat, Alipay e analizzarli in link, e l'altra è combinare questi link e poi generare il codice QR combinato. Il plugin 'qrcode' di jQuery viene utilizzato per l'analisi e la generazione, e per l'estetica, 'canvas' viene usato per disegnare lo stile del codice di pagamento.
- Pagina dei pagamenti
Quando il dispositivo mobile scansiona il codice di pagamento precedentemente generato, questa pagina viene aperta e riceverà i tre parametri (qq, WeChat, link Alipay) inseriti nel codice di pagamento, quindi si verifica che il codice QR scansionato dal software attuale secondo il browser UA, qq e WeChat non possa attivare direttamente il pagamento, quindi verrà mostrata l'interfaccia del codice QR per permettere agli utenti di premuere a lungo per pagare, Alipay potrà accedere direttamente alla pagina di trasferimento.
In questo caso, questo sito è pronto, la pagina generata prende in prestito dalla collezione e dal codice di pagamento di Youqimeng, per non essere monotono e non copiare le loro funzioni in modo rigido, dopo aver riflettuto un po' ho trovato una funzione di cambio colore (sembra inutile, è completamente composta da contenuti haha), se ti servono altri stili puoi andare sul loro sito per generare. E poiché i tre link dei codici di pagamento si sommano particolarmente lunghi, il codice QR generato è più denso (cioè, brutto), e poi l'URL lungo viene accorciato attraverso suo.im, così che il codice QR generato sarà più semplice.
usare
1. Scarica il codice sorgente e caricalo sul tuo server o host web.
2. Cambia il codice rosso della busta Alipay e la password della busta rossa in '/js/index.js', ed elimina il codice pertinente se non è necessario generare un'interfaccia per le pubblicità della busta rossa, che sono state contrassegnate nel file.
Se incontri problemi, per favore dai un feedback, anche se potrei non riuscire a risolverli
Grazie
* Raccogli i tuoi soldi
* Codice di pagamento Youqimeng
* Layui
|
Pubblicato su 20/01/2019 09:47:23
|
|
|
Pubblicato su 01/11/2019 11:41:54