QRCo
QQ 위챗 알리페이 3-in-1 온라인 세대
- 결제 코드 색상 사용자 지정
- QR 코드 단순화
데모 웹사이트:http://qr.no0a.cn
GitHub 주소:https://github.com/BWmelon/qrcode
머리말
처음에는 3-in-1 결제 코드인 참깨 수집을 알게 되었는데, 처음에는 무료였고, 계산되자 가격이 5위안으로 바뀌었습니다. 그 후 두 가지 결제 코드 생성 시스템을 사용했는데, 하나는 수집용이고 다른 하나는 유치멍 수집 코드입니다. 첫 번째는 사용하기 매우 편리합니다. 즉, QR 코드 인식이 상대적으로 느립니다. 인터페이스를 바꾸고 싶지만 PHP를 배우지 못해 아무것도 할 수 없습니다. 후자는 제가 산 소스 코드인데, 며느리가 당신을 차단( ̄▽ ̄)하라고 요청한 걸 누르는 데 시간이 좀 걸렸어요~*, 그리고 작성자를 찾은 후에는 얼마 전에 소스 코드를 구매하라는 안내를 받았습니다... 그의 제한을 취소하고 싶었지만, html+css 튜토리얼을 읽고 나서 어쩔 수 없어서 직접 생성 시스템을 만들어보는 아이디어를 떠올렸습니다.
몇 주 동안 이 일을 왔다 갔다 하며 보냈는데, 사실상 바이두에 관한 문서를 읽으며 보냈습니다. 왜냐하면 저는 이 분야를 막 배웠고 많은 것을 접해본 적이 없었기 때문입니다. 이 시스템의 기능을 분석한 결과, html+css+js로도 달성할 수 있다고 생각했고, 이후 바이두가 요구사항을 단계별로 구현하기 시작했습니다.
원리
분석 결과, 두 페이지만 필요하다는 것이 밝혀졌습니다.
- 페이지 생성
이 페이지는 웹사이트의 메인 페이지로, 두 가지 기능이 있습니다. 하나는 QQ, 위챗, 알리페이 결제 코드를 업로드해 링크로 분석하는 것이고, 다른 하나는 이 링크를 결합한 후 결합된 QR 코드를 생성하는 것입니다. jQuery의 'qrcode' 플러그인은 파싱 및 생성에 사용되며, 미관적으로는 결제 코드 스타일을 그리는 'canvas'를 사용합니다.
- 결제 페이지
모바일 기기가 이전에 생성된 결제 코드를 스캔하면 이 페이지가 열리고, 결제 코드에 입력된 세 가지 매개변수(qq, WeChat, Alipay 링크)를 받고, 현재 소프트웨어가 브라우저 UA, qq, WeChat을 직접 결제할 수 없음을 판단합니다. QR 코드 인터페이스가 표시되어 사용자가 길게 눌러 결제할 수 있고, Alipay는 바로 이체 페이지에 진입할 수 있습니다.
이 경우에는 이 웹사이트가 준비되었고, 생성된 페이지는 컬렉션과 유기멍 결제 코드에서 차용했어요. 단조롭지 않고 기능을 딱딱하게 복사하지 않기 위해서요. 잠시 생각한 끝에 색상 변경 기능을 얻었는데(쓸모없고, 완전히 콘텐츠로 구성되어 있어요 ᄒᄒ), 다른 스타일이 필요하면 웹사이트에서 생성할 수 있어요. 그리고 세 개의 결제 코드 링크가 합쳐져 특히 길기 때문에, 생성된 QR 코드는 더 밀도가 높고(즉, 보기 흉하며), 긴 URL은 suo.im 동안 단축되어 생성된 QR 코드가 더 단순해집니다.
쓰다
1. 소스 코드를 다운로드하여 자신의 서버나 웹 호스트에 업로드합니다.
2. 알리페이 빨간 봉투 코드와 '/js/index.js' 비밀번호를 변경하고, 파일에 표시된 빨간 봉투 광고 인터페이스를 생성할 필요가 없다면 관련 코드를 삭제하세요.
문제가 있으면 피드백 부탁드리지만, 제가 해결하지 못할 수도 있습니다
감사합니다
* 돈 받아.
* 유치멍 결제 코드
* 라위(Layui)
|
게시됨 2019. 1. 20. 오전 9:47:23
|
|
|
게시됨 2019. 11. 1. 오전 11:41:54