ホームページ > 記事 > WeChat アプレット > PC WeChat コードスキャンログインスタイルのカスタマイズの詳細な説明

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

小云云オリジナル: 2017-12-14 09:11:373518ブラウズ

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(&#39;fs&#39;);
// 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 &#39;data:text/css;base64,&#39;+new Buffer(bitmap).toString(&#39;base64&#39;);
}
console.log(base64_encode(&#39;./qrcode.css&#39;))

ノードスクリプトを実行し、出力されたデータ 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 コードスキャンログインスタイルをカスタマイズするこの機能は、ウェブサイトのログインに必須になりました。すぐにお試しください。

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

関連記事