WeChat 로그인 코드 스캔 스타일을 사용자 정의하는 솔루션

PC WeChat 스캔 코드 로그인

최근 PC WeChat 스캔 코드 로그인에 대한 요구가 있습니다. WeChat 코드를 스캔하는 방법에는 두 가지가 있습니다. 하나는 새로운 QR 코드 페이지를 여는 것이고, 다른 하나는 제품을 삽입하는 것입니다. 웹페이지. 이번에는 삽입된 QR 코드를 예로 들어 보겠습니다. 문서에는 페이지에 로그인 QR 코드를 표시하는 방법이 매우 명확하게 설명되어 있으므로 자세히 설명하지 않겠습니다.

WeChat QR 코드 스타일 사용자 정의 문제 해결

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

매우 큰 것은 말할 것도 없고(기본 QR 코드 크기는 280x280) WeChat 로그인 제목도 있고 아래에 로그인하려면 코드를 스캔하라는 메시지도 있습니다.
다행히도 WeChat은 스타일을 사용자 정의할 수 있는 API를 남겼습니다. 이전에 QR 코드를 인스턴스화할 때 인스턴스 개체의 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 리소스에만 액세스를 허용하는 것 같습니다. 이제 두 번째 솔루션 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>

노드 스크립트를 실행하고 인쇄된 data-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 코드 생성 두 가지 방법

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