PC WeChat 코드 스캔 로그인 스타일 사용자 정의에 대한 자세한 설명

PC WeChat 스캔 코드 로그인과 관련하여 이 글에서는 주로 PC WeChat 스캔 코드 로그인 스타일을 사용자 정의하는 방법과 코드 분석을 소개합니다.

최근 PC에서 로그인하려면 위챗 코드를 스캔해야 하는 경우가 있는데, 위챗 코드를 스캔하는 방법은 두 가지가 있는데, 하나는 새 QR 코드 페이지를 여는 것이고, 다른 하나는 제품 웹 페이지를 삽입하는 것입니다. . 이번에는 삽입된 QR 코드를 예로 들어 보겠습니다. 문서에는 페이지에 로그인 QR 코드를 표시하는 방법이 매우 명확하게 설명되어 있으므로 자세히 설명하지 않겠습니다.

모든 것이 준비되면 처음에는 웹페이지의 QR 코드가 다음과 같이 표시됩니다.

말할 것도 없이 매우 크며(기본 QR 코드 크기는 280x280) WeChat 로그인 제목도 있고 아래에 로그인하려면 코드를 스캔하라는 메시지도 있습니다.
다행히도 WeChat은 스타일을 사용자 정의할 수 있는 API를 남겼습니다. 이전에 QR 코드를 인스턴스화할 때 인스턴스 개체의 href 속성을 사용하여 스타일을 설정할 수 있습니다.

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

안타깝게도 href에 스타일 파일의 주소를 전달하면 오류가 보고됩니다. WeChat은 보안상의 이유로 https 리소스에만 액세스를 허용하는 것 같습니다. 이제 두 번째 솔루션 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 유형에 주의하고 텍스트/CSS를 반환해야 합니다.

맞춤형 QR 코드:

PC WeChat 코드 스캔 로그인 스타일을 맞춤설정하는 것은 이제 웹사이트 로그인에 필요한 기능입니다.

관련 추천:

php QR 코드 제작 및 다운로드 방법

PHP가 QR 코드를 생성하고 다운로드하는 방법에 대한 사례 연구

PHP에서 WeChat PC QR 코드 로그인을 구현합니다

위 내용은 PC WeChat 코드 스캔 로그인 스타일 사용자 정의에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!