QRCODE
QQ WeChat Génération 3-en-1 en ligne Alipay
- Personnaliser la couleur du code de paiement
- Simplification des codes QR
Site de démonstration :http://qr.no0a.cn
Adresse GitHub :https://github.com/BWmelon/qrcode
préface
Au début, j’ai découvert que le code de paiement 3-en-1 était Sesame Collection, qui était gratuit au début, puis le prix est devenu 5RMB une fois généré. Après cela, j’ai utilisé deux systèmes de génération de codes de paiement, l’un est le code de collecte Youqimeng, le premier est très pratique à utiliser, c’est-à-dire que la reconnaissance des codes QR est relativement lente, je veux changer l’interface mais je n’ai pas appris PHP et je ne peux rien faire. La seconde est le code source que j’ai acheté, et il m’a fallu un moment pour que la petite belle-fille m’ait demandé de te bannir ( ̄▽ ̄)~*, et après avoir trouvé l’auteur, j’ai été invité à acheter le code source il y a quelque temps... Je voulais annuler ses restrictions, mais j’étais impuissant après avoir lu le tutoriel html+css, alors j’ai eu l’idée de construire mon propre système de génération.
J’ai passé quelques semaines à le faire d’un aller-retour, en gros à lire des documents sur Baidu, car je venais d’apprendre cela et je n’avais jamais été exposé à beaucoup de choses. Après avoir analysé les fonctions de ce système, je pense que cela peut être réalisé par html+css+js, puis Baidu a commencé à implémenter les exigences étape par étape.
Principe
Après analyse, il a été constaté que seules deux pages étaient nécessaires.
- Générer des pages
Voici la page principale du site, avec deux fonctions : l’une consiste à télécharger les codes de paiement QQ, WeChat, Alipay et à les décomposer en liens, et l’autre est de combiner ces liens pour ensuite générer le code QR combiné. Le plugin 'qrcode' de jQuery est utilisé pour l’analyse et la génération, et pour des raisons esthétiques, le 'canvas' sert à dessiner le style du code de paiement.
- Page des paiements
Lorsque l’appareil mobile scanne le code de paiement généré précédemment, cette page s’ouvre et reçoit les trois paramètres (qq, WeChat, lien Alipay) passés dans le code de paiement, puis juge que le code QR scanné par le logiciel actuel selon le navigateur UA, qq et WeChat ne peut pas directement détecter le paiement, puis l’interface du code QR s’affiche pour que les utilisateurs puissent appuyer longuement sur le paiement, Alipay peut accéder directement à la page de transfert.
Dans ce cas, ce site est prêt, la page générée emprunte à la collection et au code de paiement Youqimeng, pour ne pas être monotone et ne pas copier leurs fonctions de façon rigide, après y avoir réfléchi un moment, j’ai obtenu une fonction de changement de couleur (ça semble inutile, c’est entièrement composé de contenu haha), si vous avez besoin d’autres styles, vous pouvez aller sur leur site pour générer. Et comme les trois liens de codes de paiement s’additionnent pour être particulièrement longs, le code QR généré est plus dense (c’est-à-dire moche), puis l’URL longue est raccourcie à travers suo.im, ce qui rend le code QR généré plus simple.
utiliser
1. Téléchargez le code source et téléchargez-le sur votre propre serveur ou hébergeur web.
2. Changez votre code d’enveloppe rouge Alipay et votre mot de passe d’enveloppe rouge dans '/js/index.js', et supprimez le code pertinent si vous n’avez pas besoin de générer une interface pour les publicités d’enveloppe rouge, qui ont été indiquées dans le fichier.
Si vous rencontrez des problèmes, merci de donner votre avis, même si je ne pourrai pas les résoudre
Merci
* Récupérez votre argent
* Code de paiement Youqimeng
* Layui
|
Publié sur 20/01/2019 09:47:23
|
|
|
Publié sur 01/11/2019 11:41:54