[ウェブ] + QQ、WeChat、Alipay決済コード3-in-1オンライン生成システム

夏 · 掲載地 2019/01/20 9:47:23

QRCODE
QQ WeChat Alipay 3-in-1オンライン世代

- 支払いコードの色をカスタマイズする
- QRコードの簡略化
デモサイト:http://qr.no0a.cn
GitHubアドレス:https://github.com/BWmelon/qrcode
前書き

最初に知ったのは、3-in-1のセマコレクションという支払いコードで、最初は無料でしたが、生成されると価格は5元になりました。その後、2つの決済コード生成システムを使いました。1つはコレクション、もう1つは友奇のコレクションコードです。前者はとても使いやすいです。つまり、QRコードの認識は比較的遅いです。インターフェースを変えたいのですが、PHPを学んでおらず何もできません。後者は私が購入したソースコードで、義理の娘があなたをBAN ( ̄▽ ̄)するように頼んだのに時間がかかりました~*、作者を見つけてからは、しばらく前にソースコードを買うよう促されました... 彼の制限をキャンセルしたかったのですが、html+cssのチュートリアルを読んでどうしようもなくなり、自分で生成システムを作ろうと思いつきました。

私は数週間かけてそれをやり取りし、基本的には百度の文書を読みながら過ごしていました。なぜなら、この分野を学んだばかりで、多くのことに触れたことがなかったからです。このシステムの機能を分析した結果、html+css+jsで達成できると感じ、その後百度は要件を段階的に実装し始めました。

原理
分析の結果、必要なのは2ページだけであることが判明しました。

- ページ生成
これはウェブサイトのメインページで、2つの機能があります。1つはQQ、WeChat、Alipayの支払いコードをアップロードしてリンクに解析すること、もう1つはこれらのリンクを組み合わせてQRコードを生成することです。 jQueryの「qrcode」プラグインは解析と生成に使われ、美観のために「canvas」で支払いコードのスタイルを描画します。
- 支払いページ
モバイル端末が以前に生成された決済コードをスキャンすると、このページが開かれ、支払いコードに記載された3つのパラメータ(qq、WeChat、Alipayリンク)を取得し、現在のソフトウェアがブラウザでスキャンしたQRコードをUAと判断します。QQとWeChatは直接支払いを呼び出せません。その後、QRコードのインターフェースが表示され、ユーザーは長押しで支払いをし、Alipayは直接送金ページに入ることができます。

この場合、このウェブサイトは完成しており、生成されたページはコレクションとYouqimengの支払いコードを借用しています。単調さを避け、機能をぎこちなくコピーしないように、しばらく考えた結果、色変更機能(使い物にならない感じがしますが、完全にコンテンツだけで構成されているので笑)を導入しました。もし他のスタイルが必要なら、彼らのウェブサイトで生成できます。また、3つの支払いコードリンクが合計すると特に長いため、生成されるQRコードはより密度が高くなり(つまり見た目が悪い)、長いURLは suo.im に短縮されるため、生成されたQRコードがよりシンプルになります。
使う

1. ソースコードをダウンロードし、自分のサーバーやウェブホストにアップロードします。
2. Alipayの赤封筒コードとパスワードを「/js/index.js」に変更し、ファイル内にマークされている赤封筒広告のインターフェースを生成する必要がない場合は該当コードを削除してください。

もし問題があればフィードバックをお願いしますが、解決できないかもしれません

ありがとうございます

* お金を受け取って
* 友奇明支払いコード
* ラユイ

ルフィはそうはしない · 掲載地 2019/11/01 11:41:54

一度のステップで達成できればもっと良いのですが

[共有ファイル] [ウェブ] + QQ、WeChat、Alipay決済コード3-in-1オンライン生成システム

関連記事