PC WeChat 스캔 코드 로그인을 사용자 정의하는 방법

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

PC WeChat 스캔 코드 로그인

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

WeChat 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 유형에 주의하고 text/css를 반환해야 합니다.

맞춤형 QR 코드:

위 내용은 제가 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

VUE에서 배열 업데이트 기능을 구현하는 방법

Vue 프로젝트를 최적화할 때 주의해야 할 사항은 무엇인가요?

vuejs의 모듈식 접근 방식을 사용하여 개발

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