QRcode
QQ WeChat Alipay 3-en-1 generación online
- Personalizar el color del código de pago
- Simplificación de códigos QR
Página web de demostración:http://qr.no0a.cn
Dirección de GitHub:https://github.com/BWmelon/qrcode
prefacio
Al principio, me encontré con el código de pago 3-en-1 era colección de sésamo, que al principio era gratis, y luego el precio pasó a ser 5RMB una vez generado. Después de eso, usé dos sistemas de generación de códigos de pago, uno es de cobro y el otro es de código de cobro Youqimeng, el primero es muy cómodo de usar, es decir, el reconocimiento de códigos QR es relativamente lento, quiero cambiar la interfaz pero no he aprendido PHP y no puedo hacer nada. Este último es el código fuente que compré, y tardé un rato en que esa pequeña nuera me pidió que te banease ( ̄▽ ̄)~*, y después de encontrar al autor, me pidieron comprar el código fuente hace un tiempo... Quería cancelar sus restricciones, pero me sentí impotente tras leer el tutorial de html+css, así que se me ocurrió la idea de construir mi propio sistema de generación.
Pasé unas semanas haciéndolo de ida y vuelta, básicamente pasándola mientras leía documentos sobre Baidu, porque acababa de aprender esto y nunca había estado expuesto a muchas cosas. Después de analizar las funciones de este sistema, siento que esto se puede lograr con html+css+js, y entonces Baidu empezó a implementar los requisitos paso a paso.
Principio
Tras el análisis, se descubrió que solo se necesitaban dos páginas.
- Generar páginas
Esta es la página principal del sitio web, con dos funciones: una es subir códigos de pago QQ, WeChat y Alipay y descifrarlos en enlaces, y la otra es combinar estos enlaces y luego generar el código QR combinado. El plugin 'qrcode' de jQuery se utiliza para analizar y generar, y para la estética, 'canvas' se utiliza para dibujar el estilo del código de pago.
- Página de pagos
Cuando el dispositivo móvil escanea el código de pago previamente generado, se abre esta página y se transmiten los tres parámetros (qq, WeChat, enlace Alipay) en el código de pago, y luego se determina que el código QR escaneado por el software actual según el navegador UA, qq y WeChat no puede activar directamente el pago; después se muestra la interfaz del código QR para que los usuarios puedan pulsar para pagar, Alipay puede acceder directamente a la página de transferencia.
En este caso, esta web está lista, la página generada toma prestado de la colección y del código de pago de Youqimeng, para no ser monótono y no copiar sus funciones de forma rígida; después de pensarlo un rato, me salió una función de cambio de color (se siente inútil, está completamente hecha de contenido jaja), si necesitas otros estilos, puedes ir a su web para generar. Y como los tres enlaces de códigos de pago suman una longitud particular, el código QR generado es más denso (es decir, feo), y luego la URL larga se acorta a través de suo.im, de modo que el código QR generado será más sencillo.
uso
1. Descarga el código fuente y súbelo a tu propio servidor o proveedor de alojamiento web.
2. Cambia el código rojo de sobres de Alipay y la contraseña roja en '/js/index.js', y elimina el código relevante si no necesitas generar una interfaz para anuncios de sobres rojos que han sido marcados en el archivo.
Si encuentras algún problema, por favor dame tu opinión, aunque puede que no pueda solucionarlo
Gracias
* Recoge tu dinero
* Código de pago Youqimeng
* Layui
|
Publicado en 20/1/2019 9:47:23
|
|
|
Publicado en 1/11/2019 11:41:54