PC WeChat コードスキャンログインスタイルのカスタマイズの詳細な説明

PC WeChat スキャンコードログインに関して、この記事では主に PC WeChat スキャンコードログインスタイルとコード分析をカスタマイズする方法を紹介します。

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

すべての準備が完了すると、Web ページ上の QR コードは最初は次のようになります。

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

var obj = new WxLogin({
      id:"login_container", 
      appid: "", 
      scope: "", 
      redirect_uri: "",
      state: "",
      style: "",
      href: "../qrcode.css"//就是这个属性
      });

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

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

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

var fs = require('fs');
// function to encode file data to base64 encoded string
function base64_encode(file) {
 // read binary data
 var bitmap = fs.readFileSync(file);
 // convert binary data to base64 encoded string
 return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');
}
console.log(base64_encode('./qrcode.css'))

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

var obj = new WxLogin({
      id:"login_container", 
      appid: "", 
      scope: "", 
      redirect_uri: "",
      state: "",
      style: "",
           href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTpub25lf
Q0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="//data-url
      });

ここでは MIME タイプに注意してください。必ず text/css を返してください。

カスタマイズされた QR コード:

PC WeChat コード スキャン ログイン スタイルをカスタマイズするこの機能は、ウェブサイトのログインに必須になりました。すぐにお試しください。

関連おすすめ:

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

phpでQRコードを生成してダウンロードする事例

PHPはWeChat PC QRコードログインを実装します

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