QR code
QQ WeChat Alipay 3-em-1 geração online
- Personalizar a cor do código de pagamento
- Simplificação de código QR
Site de demonstração:http://qr.no0a.cn
Endereço do GitHub:https://github.com/BWmelon/qrcode
prefácio
No começo, entrei em contato com o código de pagamento 3-em-1 era coleção de gergelim, que era gratuito no começo, e depois o preço passou a ser 5RMB quando gerado. Depois disso, usei dois sistemas de geração de códigos de pagamento, um é de cobrança e o outro é de Youqimeng collection code; o primeiro é muito prático de usar, ou seja, o reconhecimento de QR code é relativamente lento, quero mudar a interface, mas não aprendi PHP e não consigo fazer nada. Esse último é o código-fonte que comprei, e demorou um pouco para que a norinha me pedisse para te banir ( ̄▽ ̄)~*, e depois de encontrar o autor, fui convidado a comprar o código-fonte há algum tempo... Eu queria cancelar as restrições dele, mas fiquei impotente depois de ler o tutorial em html+css, então tive a ideia de construir meu próprio sistema de geração.
Passei algumas semanas fazendo isso de um lado para o outro, basicamente enquanto lia documentos sobre Baidu, porque eu tinha acabado de descobrir isso e nunca tinha sido exposto a muitas coisas. Após analisar as funções desse sistema, sinto que isso pode ser alcançado por html+css+js, e então o Baidu começou a implementar os requisitos passo a passo.
Princípio
Após análise, constatou-se que apenas duas páginas eram necessárias.
- Gerar páginas
Esta é a página principal do site, com duas funções: uma é enviar códigos de pagamento QQ, WeChat e Alipay e separá-los em links, e a outra é combinar esses links e então gerar o código QR combinado. O plugin 'qrcode' do jQuery é usado para análise e geração, e para estética, 'canvas' é usado para desenhar o estilo do código de pagamento.
- Página de pagamentos
Quando o dispositivo móvel escaneia o código de pagamento previamente gerado, esta página é aberta e recebe os três parâmetros (qq, WeChat, link Alipay) passados no código de pagamento, e então julga que o código QR escaneado pelo software atual de acordo com o navegador UA, qq e WeChat não podem invocar diretamente o pagamento, então a interface do código QR é exibida para os usuários pressionarem longamente para pagar, o Alipay pode acessar diretamente a página de transferência.
Nesse caso, esse site está pronto, a página gerada pega emprestado da coleção e do código de pagamento do Youqimeng, para não ser monótono e não copiar suas funções de forma rígida, depois de pensar um pouco, comprei uma função de mudança de cor (parece inútil, é totalmente feita de conteúdo haha), se precisar de outros estilos, pode ir ao site deles para gerar. E como os três links de códigos de pagamento se somam para serem particularmente longos, o código QR gerado fica mais denso (ou seja, feio), e então a URL longa é encurtada por suo.im, tornando o código QR gerado mais simples.
usar
1. Baixe o código-fonte e envie para seu próprio servidor ou hospedagem.
2. Altere o código do envelope vermelho Alipay e a senha do envelope vermelho em '/js/index.js', e exclua o código relevante caso não precise gerar uma interface para anúncios de envelope vermelho, que foram marcados no arquivo.
Se você encontrar algum problema, por favor, dê feedback, embora eu possa não conseguir resolvê-los
Obrigado
* Colete seu dinheiro
* Código de pagamento Youqimeng
* Layui
|
Publicado em 20/01/2019 09:47:23
|
|
|
Publicado em 01/11/2019 11:41:54