qrcode
QQ WeChat Alipay 3-in-1 -verkkogenerointi
- Mukauta maksukoodin väriä
- QR-koodin yksinkertaistaminen
Demosivusto:http://qr.no0a.cn
GitHub-osoite:https://github.com/BWmelon/qrcode
johdanto
Aluksi törmäsin maksukoodiin 3-in-1 oli seesamikeräys, joka oli aluksi ilmainen, ja sitten hinta nousi 5RMB:ksi kun se oli generoitu. Sen jälkeen käytin kahta maksukoodin generointijärjestelmää, toinen on perintäkoodi ja toinen Youqimengin keräyskoodi, ensimmäinen on erittäin kätevä käyttää, eli QR-koodin tunnistus on suhteellisen hidas, haluan muuttaa käyttöliittymää, mutta en ole oppinut PHP:tä enkä osaa tehdä mitään. Jälkimmäinen on lähdekoodi, jonka ostin, ja kesti hetken ennen kuin pieni miniä pyysi minua bannaamaan ( ̄▽ ̄) sinut~*, ja kun löysin tekijän, minua kehotettiin ostamaan lähdekoodi jo aikaa sitten... Halusin perua hänen rajoituksensa, mutta olin avuton luettuani html+css-tutoriaalin, joten keksin idean rakentaa oma generaattorijärjestelmä.
Vietin muutaman viikon tehden sitä edestakaisin, käytännössä lukien Baidun dokumentteja, koska olin juuri oppinut tämän enkä ollut koskaan altistunut monille asioille. Analysoituani tämän järjestelmän toimintoja uskon, että tämä onnistuu html+css+js:llä, ja sitten Baidu alkoi toteuttaa vaatimuksia askel askeleelta.
Periaate
Analyysin jälkeen havaittiin, että tarvittiin vain kaksi sivua.
- Sivujen luominen
Tämä on verkkosivuston pääsivu, jossa on kaksi toimintoa: toinen on QQ-, WeChat- ja Alipay-maksukoodien lataaminen ja niiden jäsentäminen linkkeiksi, ja toinen on yhdistää nämä linkit ja luoda yhdistetty QR-koodi. jQueryn 'qrcode'-lisäosaa käytetään jäsentämiseen ja generointiin, ja ulkonäön vuoksi 'canvas' piirtää maksukoodin tyyliä.
- Maksusivu
Kun mobiililaite skannaa aiemmin luodun maksukoodin, tämä sivu avautuu ja saa maksukoodin välittämät kolme parametria (qq, WeChat, Alipay-linkki), ja sitten arvioidaan nykyisen ohjelmiston skannaama QR-koodi selaimen UA, qq ja WeChat mukaan, jotka eivät voi suoraan aktivoida maksua. Tämän jälkeen QR-koodikäyttöliittymä avautuu, jolloin käyttäjät voivat painaa pitkään maksaakseen, Alipay voi suoraan siirtyä siirtosivulle.
Tässä tapauksessa tämä sivusto on valmis, luotu sivu lainaa kokoelmasta ja Youqimengin maksukoodista, jotta ei olisi yksitoikkoinen eikä kopioisi niiden toimintoja jäykästi, hetken mietittyäni sain värinvaihtotoiminnon (se tuntuu turhalta, se koostuu kokonaan sisällöstä haha), jos tarvitset muita tyylejä, voit mennä heidän verkkosivuilleen luomaan niitä. Ja koska kolme maksukoodilinkkiä yhteensä ovat erityisen pitkiä, generoitu QR-koodi on tiheämpi (eli ruma), ja pitkä URL-osoite lyhennetään suo.im, jolloin luotu QR-koodi on yksinkertaisempi.
käyttää
1. Lataa lähdekoodi ja lataa se omalle palvelimellesi tai web-hostingillesi.
2. Vaihda Alipay-punaisen kirjekuoren koodisi ja punaisen kirjekuoren salasanasi muodossa '/js/index.js', ja poista asiaankuuluva koodi, jos sinun ei tarvitse luoda rajapintaa punaisen kirjekuoren mainoksille, jotka on merkitty tiedostoon.
Jos kohtaat ongelmia, anna palautetta, vaikka en ehkä pysty ratkaisemaan niitä
Kiitos
* Kerää rahasi
* Youqimengin maksukoodi
* Layui
|
Julkaistu 20.1.2019 9.47.23
|
|
|
Julkaistu 1.11.2019 11.41.54