PC WeChat スキャンコードログインをカスタマイズする方法

この記事では主に、PC WeChat コード スキャン ログイン スタイルとコード分析をカスタマイズする方法を紹介します。必要な友人はそこから学ぶことができます。

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

最近、PC WeChat スキャンコードログインの需要があります。WeChat コードをスキャンするには 2 つの方法があります。1 つは新しい QR コード ページを開く方法、もう 1 つは製品 Web ページを埋め込む方法です。 。今回は埋め込み QR コードを例に挙げて、ページにログイン QR コードを表示する方法を非常にわかりやすく説明しています。ドキュメントのアドレスは https://open.weixin です。 qq.com/cg. ..

WeChat 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 コード:

上記は私があなたのためにまとめたものです。

関連記事:

VUEで配列更新関数を実装する方法

Vueプロジェクトを最適化するときに注意すべきことは何ですか?

vuejs のモジュラーアプローチを使用して開発されました

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