Κωδικός QR
QQ WeChat Alipay 3-σε-1 διαδικτυακή γενιά
- Προσαρμόστε το χρώμα του κωδικού πληρωμής
- Απλοποίηση κωδικού QR
Ιστότοπος επίδειξης:http://qr.no0a.cn
Διεύθυνση GitHub:https://github.com/BWmelon/qrcode
πρόλογος
Στην αρχή, ήρθα σε επαφή με τον κωδικό πληρωμής 3-σε-1 ήταν η συλλογή σουσαμιού, η οποία ήταν δωρεάν στην αρχή, και στη συνέχεια η τιμή έγινε 5 RMB μόλις δημιουργήθηκε. Μετά από αυτό, χρησιμοποίησα δύο συστήματα δημιουργίας κωδικών πληρωμής, το ένα είναι συλλογή και το άλλο είναι ο κωδικός συλλογής Youkimeng, το πρώτο είναι πολύ βολικό στη χρήση, δηλαδή η αναγνώριση κωδικού QR είναι σχετικά αργή, θέλω να αλλάξω τη διεπαφή αλλά δεν έχω μάθει php και δεν μπορώ να κάνω τίποτα. Ο τελευταίος είναι ο πηγαίος κώδικας που αγόρασα και χρειάστηκε λίγος χρόνος για να ζητήσω από τη μικρή νύφη να σε αποκλείσω ( ̄▽ ̄)~*, και αφού βρήκα τον συγγραφέα, μου ζητήθηκε να αγοράσω τον πηγαίο κώδικα πριν από λίγο καιρό. . . Ήθελα να ακυρώσω τους περιορισμούς του, αλλά ήμουν αβοήθητος αφού διάβασα το σεμινάριο html+css, οπότε μου ήρθε η ιδέα να φτιάξω το δικό μου σύστημα γενιάς.
Πέρασα μερικές εβδομάδες κάνοντας το πέρα δώθε, βασικά το πέρασα διαβάζοντας έγγραφα στο Baidu, γιατί μόλις το είχα μάθει και δεν είχα εκτεθεί ποτέ σε πολλά πράγματα. Αφού ανέλυσα τις λειτουργίες αυτού του συστήματος, πιστεύω ότι αυτό μπορεί να επιτευχθεί με html+css+js και στη συνέχεια η Baidu άρχισε να εφαρμόζει τις απαιτήσεις βήμα προς βήμα.
Αρχή
Μετά από ανάλυση, διαπιστώθηκε ότι χρειάζονταν μόνο δύο σελίδες.
- Δημιουργία σελίδων
Αυτή είναι η κύρια σελίδα του ιστότοπου, με δύο λειτουργίες, η μία είναι να ανεβάσετε κωδικούς πληρωμής QQ, WeChat, Alipay και να τους αναλύσετε σε συνδέσμους και η άλλη είναι να συνδυάσετε αυτούς τους συνδέσμους και στη συνέχεια να δημιουργήσετε τον συνδυασμένο κωδικό QR. Η προσθήκη «qrcode» του jQuery χρησιμοποιείται για την ανάλυση και τη δημιουργία, και για την αισθητική, ο «καμβάς» χρησιμοποιείται για τη σχεδίαση του στυλ του κωδικού πληρωμής.
- Σελίδα πληρωμής
Όταν η κινητή συσκευή σαρώσει τον κωδικό πληρωμής που δημιουργήθηκε προηγουμένως, αυτή η σελίδα ανοίγει και θα λάβει τις τρεις παραμέτρους (qq, WeChat, σύνδεσμος Alipay) που έχουν περάσει στον κωδικό πληρωμής και, στη συνέχεια, θα κρίνει τον κωδικό QR που σαρώθηκε από το τρέχον λογισμικό σύμφωνα με το πρόγραμμα περιήγησης UA, το qq και το WeChat δεν μπορούν να προκαλέσουν απευθείας πληρωμή και, στη συνέχεια, εμφανίζεται η διεπαφή κωδικού QR για να πατήσουν παρατεταμένα για να πληρώσουν, η Alipay μπορεί να εισέλθει απευθείας στη σελίδα μεταφοράς.
Σε αυτήν την περίπτωση, αυτός ο ιστότοπος είναι έτοιμος, η σελίδα που δημιουργείται δανείζεται από τη συλλογή και τον κωδικό πληρωμής Youqimeng, για να μην είναι μονότονη και να μην αντιγράφει άκαμπτα τις λειτουργίες τους, αφού σκέφτηκα για λίγο, πήρα μια λειτουργία αλλαγής χρώματος (αισθάνεται άχρηστο, αποτελείται εξ ολοκλήρου από περιεχόμενο χαχα), εάν χρειάζεστε άλλα στυλ, μπορείτε να μεταβείτε στον ιστότοπό τους για να δημιουργήσετε. Και επειδή οι τρεις σύνδεσμοι κωδικών πληρωμής είναι ιδιαίτερα μεγάλοι, ο κωδικός QR που δημιουργείται είναι πιο πυκνός (δηλαδή άσχημος) και, στη συνέχεια, η μεγάλη διεύθυνση URL συντομεύεται μέσω suo.im, έτσι ώστε ο κωδικός QR που δημιουργείται να είναι απλούστερος.
χρήση
1. Κατεβάστε τον πηγαίο κώδικα και μεταφορτώστε τον στον δικό σας διακομιστή ή οικοδεσπότη Ιστού.
2. Αλλάξτε τον κωδικό κόκκινου φακέλου Alipay και τον κωδικό πρόσβασης κόκκινου φακέλου στο '/js/index.js' και διαγράψτε τον σχετικό κωδικό εάν δεν χρειάζεται να δημιουργήσετε μια διεπαφή για διαφημίσεις κόκκινου φακέλου, οι οποίες έχουν επισημανθεί στο αρχείο.
Εάν αντιμετωπίσετε προβλήματα, δώστε σχόλια, αν και μπορεί να μην είμαι σε θέση να τα λύσω
Ευχαριστώ
* Συλλέξτε τα χρήματά σας
* Κωδικός πληρωμής Youqimeng
* Λαγιούι
|
Δημοσιεύτηκε στις 20/1/2019 9:47:23 π.μ.
|
|
|
Δημοσιεύτηκε στις 1/11/2019 11:41:54 π.μ.