qrcode
QQ WeChat Alipay 3-in-1 online generation
- Customize the payment code color
- QR code simplification
Demo website:http://qr.no0a.cn
GitHub address:https://github.com/BWmelon/qrcode
preface
At first, I came into contact with the payment code 3-in-1 was sesame collection, which was free at first, and then the price became 5RMB once generated. After that, I used two payment code generation systems, one is collection, and the other is Youqimeng collection code, the first one is very convenient to use, that is, the QR code recognition is relatively slow, I want to change the interface but I haven't learned php and can't do anything. The latter one is the source code I bought, and it took a while to prompt what little daughter-in-law asked me to ban ( ̄▽ ̄) you~*, and after finding the author, I was prompted to buy the source code some time ago. . . I wanted to cancel his restrictions, but I was helpless after reading the html+css tutorial, so I came up with the idea of building my own generation system.
I spent a few weeks doing it back and forth, basically spending it while reading documents on Baidu, because I had just learned this and had never been exposed to many things. After analyzing the functions of this system, I feel that this can be achieved by html+css+js, and then Baidu began to implement the requirements step by step.
Principle
After analysis, it was found that only two pages were needed.
- Generate pages
This is the main page of the website, with two functions, one is to upload QQ, WeChat, Alipay payment codes and parse them into links, and the other is to combine these links and then generate the combined QR code. The 'qrcode' plugin of jQuery is used for parsing and generating, and for aesthetics, 'canvas' is used to draw the style of the payment code.
- Payment page
When the mobile device scans the previously generated payment code, this page is opened and will obtain the three parameters (qq, WeChat, Alipay link) passed in the payment code, and then judge the QR code scanned by the current software according to the browser UA, qq and WeChat cannot directly evoke payment, then the QR code interface is displayed for users to long press to pay, Alipay can directly enter the transfer page.
In this case, this website is ready, the generated page borrows from the collection and Youqimeng payment code, in order to not be monotonous and not to copy their functions stiffly, after thinking for a while, I got a color change function (it feels useless, it's completely made up of content haha), if you need other styles, you can go to their website to generate. And because the three payment code links add up to be particularly long, the generated QR code is denser (that is, ugly), and then the long URL is shortened through suo.im, so that the generated QR code will be simpler.
use
1. Download the source code and upload it to your own server or web host.
2. Change your Alipay red envelope code and red envelope password in '/js/index.js', and delete the relevant code if you do not need to generate an interface for red envelope advertisements, which have been marked in the file.
If you encounter any problems, please give feedback, although I may not be able to solve them
Thanks
* Collect your money
* Youqimeng payment code
* Layui
|
Posted on 1/20/2019 9:47:23 AM
|
|
|
Posted on 11/1/2019 11:41:54 AM