WeChat ログイン コード スキャン スタイルをカスタマイズするためのソリューション

PC WeChat スキャンコードログイン

最近、PC WeChat スキャンコードログインが必要になっています。WeChat コードをスキャンするには 2 つの方法があります。1 つは新しい QR コード ページを開く方法、もう 1 つは製品を埋め込む方法です。ウェブページ 。今回は埋め込み型 QR コードを例に挙げて、ページ上にログイン用 QR コードを表示する方法について非常にわかりやすく説明していますので、詳細は説明しません。

WeChat QR コードスタイルのカスタマイズの問題を解決します

すべての準備が完了すると、Web ページ上の QR コードはデフォルトで次のようになります。

非常に大きいことは言うまでもなく (デフォルトの QR コード サイズは 280x280)、WeChat ログイン用のタイトルもあり、以下にログインするためのコードをスキャンするように求めるプロンプトもあります。
幸いなことに、WeChat には、以前に QR コードをインスタンス化するときに、スタイルをカスタマイズする機会を提供する API が残されており、インスタンス オブジェクトの href 属性を使用してスタイルを設定できます。

<span style="font-size: 16px;"> var obj = new WxLogin({<br>                        id:"login_container", <br>                        appid: "", <br>                        scope: "", <br>                        redirect_uri: "",<br>                        state: "",<br>                        style: "",<br>                        href: "../qrcode.css"//就是这个属性<br>                       });<br></span>

残念ながら、href にスタイル ファイルのアドレスを渡すと、エラーが報告されます。 WeChat はセキュリティ上の理由から https リソースへのアクセスのみを許可しているようです。そこで、2 番目のソリューションの data-url を使用します。

data-urlにアクセスしてスタイルの問題を解決します

今のcssリソースをdata-urlに変換するnodejsスクリプトを書きます。具体的なコード実装は次のとおりです:

<span style="font-size: 16px;">var fs = require('fs');<br><br>// function to encode file data to base64 encoded string<br>function base64_encode(file) {<br>    // read binary data<br>    var bitmap = fs.readFileSync(file);<br>    // convert binary data to base64 encoded string<br>    return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');<br>}<br><br>console.log(base64_encode('./qrcode.css'))<br></span>

ノード スクリプトを実行し、出力されたデータ URL をコピーして、それを href に割り当てます。

<span style="font-size: 16px;"> var obj = new WxLogin({<br>                        id:"login_container", <br>                        appid: "", <br>                        scope: "", <br>                        redirect_uri: "",<br>                        state: "",<br>                        style: "",<br>                                           href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTpub25lf<br>Q0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="//data-url<br>                       });<br></span>

ここでは MIME タイプに注意してください。必ず text/css を返してください。
カスタマイズされた QR コード:

関連チュートリアル:

WeChat ログインのためのいくつかの新しいこと

php QR コードの作成とダウンロード方法

JavaScript で QR コードを生成する 2 つの方法

以上がWeChat ログイン コード スキャン スタイルをカスタマイズするためのソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。