QR kód
QQ WeChat Alipay 3-v-1 online generovanie
- Prispôsobiť farbu platobného kódu
- Zjednodušenie QR kódov
Demo webstránka:http://qr.no0a.cn
GitHub adresa:https://github.com/BWmelon/qrcode
predhovor
Najprv som narazil na platobný kód 3-v-1 bol Sesame Collection, ktorý bol najprv zadarmo, a potom sa cena po vygenerovaní zmenila na 5 RMB. Potom som použil dva systémy na generovanie platobných kódov, jeden je inkasný a druhý je Youqimeng inkasný kód, prvý je veľmi pohodlný na používanie, teda rozpoznávanie QR kódov je relatívne pomalé, chcem zmeniť rozhranie, ale nenaučil som sa php a nemôžem nič robiť. Ten druhý je zdrojový kód, ktorý som kúpil, a chvíľu mi trvalo, kým som prinútil tú malú nevestu, ktorá ma požiadala, aby som ťa zabanoval~( ̄▽ ̄)*, a keď som našiel autora, bol som už dávno vyzvaný, aby som si kúpil zdrojový kód... Chcel som zrušiť jeho obmedzenia, ale po prečítaní tutoriálu html+css som bol bezmocný, tak som prišiel s nápadom postaviť si vlastný generačný systém.
Strávil som niekoľko týždňov tam a späť, v podstate som to strávil čítaním dokumentov o Baidu, pretože som sa to práve naučil a nikdy som nebol vystavený mnohým veciam. Po analýze funkcií tohto systému mám pocit, že to je možné dosiahnuť pomocou html+css+js, a potom Baidu začal postupne implementovať požiadavky.
Princíp
Po analýze sa zistilo, že sú potrebné len dve strany.
- Generovať stránky
Toto je hlavná stránka webu, ktorá má dve funkcie: jedna je nahrávanie QQ, WeChat, Alipay platobných kódov a ich rozdelenie do odkazov, a druhá je kombinovanie týchto odkazov a následné generovanie kombinovaného QR kódu. Plugin 'qrcode' v jQuery sa používa na parsovanie a generovanie a na estetiku sa používa 'canvas' na kreslenie štýlu platobného kódu.
- Platobná stránka
Keď mobilné zariadenie naskenuje predtým vygenerovaný platobný kód, táto stránka sa otvorí, získa tri parametre (qq, WeChat, Alipay odkaz) zadané v platobnom kóde, a potom posúdi QR kód naskenovaný aktuálnym softvérom podľa prehliadača. UA, qq a WeChat nemôžu priamo vyvolať platbu, potom sa zobrazí rozhranie QR kódu, aby používatelia mohli dlhým stlačením zaplatiť, Alipay môže priamo vstúpiť do stránky prevodu.
V tomto prípade je táto stránka pripravená, vygenerovaná stránka si požičiava z kolekcie a Youqimeng platobného kódu, aby to nebolo monotónne a nekopírovalo ich funkcie stuhnuto, po chvíli premýšľania som dostal funkciu zmeny farby (zdá sa mi zbytočná, je úplne zložená z obsahu haha), ak potrebujete iné štýly, môžete ísť na ich stránku a vygenerovať ich. A keďže tri odkazy na platobné kódy sú spolu obzvlášť dlhé, vygenerovaný QR kód je hustejší (teda škaredý) a potom sa dlhá URL skracuje cez suo.im, aby bol vygenerovaný QR kód jednoduchší.
použiť
1. Stiahnite si zdrojový kód a nahrajte ho na svoj vlastný server alebo webhosting.
2. Zmeňte kód červenej obálky Alipay a heslo červenej obálky v '/js/index.js' a vymažte príslušný kód, ak nepotrebujete generovať rozhranie pre reklamy na červených obálkach, ktoré sú v súbore označené.
Ak narazíte na nejaké problémy, prosím, dajte mi spätnú väzbu, hoci ich možno nebudem vedieť vyriešiť
Vďaka
* Zober si svoje peniaze
* Youqimeng platobný kód
* Layui
|
Zverejnené 20. 1. 2019 9:47:23
|
|
|
Zverejnené 1. 11. 2019 11:41:54