HTML5는 휴대폰 코드 스캔 기능과 그 장점과 단점을 엽니다.

1. Weibo 클라이언트에서 카메라를 불러와 QR 코드를 스캔하고 구문 분석하는 기능

2. 기본 브라우저 및 WeChat 클라이언트에서 QR 코드를 스캔하고 구문 분석할 수 있습니다.

웹 측이나 h5 측에서는 코드 스캔 작업을 직접 완료할 수 있습니다.

사진이 선명하지 않으면 구문 분석에 실패하기 쉽습니다(사진을 스캔하려면 렌즈가 QR 코드에 매우 가까워야 함). 기본 호출과 비교할 때 카메라 구문 분석은 1-1의 지연이 발생합니다. 2초.

설명하다:

이 플러그인은 zepto.js 또는 jQuery.js와 함께 사용해야 합니다.

1. 사용해야 하는 페이지에서 lib 디렉터리에 있는 js 파일을 다음 순서대로 소개합니다.

 <script src=lib/zepto.js></script> <script src=lib/qrcode.lib.min.js></script> <script src=lib/qrcode.js></script>

2. 버튼의 HTML 스타일을 사용자 정의

사용자 정의 버튼에 대한 사용자 정의 속성을 추가합니다. 속성 이름은 node-type입니다.

입력 버튼에 사용자 정의 속성을 추가합니다. 속성 이름은 node-type입니다.

플러그인은 <input type=file /> 사용해야 하기 때문에 html 구조에는 웹 페이지의 고정된 표시 스타일이 있으므로 버튼 스타일을 사용자 정의하기 위해 다음 샘플 코드 구조에 따라 코드를 중첩할 수 있습니다.

 <div> <div class=qr-btn node-type=qr-btn>QR 코드 1 스캔 <input node-type=jsbridge type=file name=myPhoto value=QR 코드 1 스캔 /> </div> < /div >

그런 다음 입력 버튼의 CSS를 설정하여 버튼을 숨깁니다. 예를 들어 속성 ​​선택기를 사용합니다.

 입력[node-type=jsbridge]{ 디스플레이:없음;}

여기서는 필요에 따라 class=qr-btn 스타일을 정의하기만 하면 됩니다.

3. 페이지에서 Qrcode 개체를 초기화합니다.

 //QR 코드 스캔 버튼을 초기화하고 사용자 정의 노드 유형 속성을 전달합니다. $(function() { Qrcode.init($('[node-type=qr-btn]')); });

메인코드 분석

 (function($) { var Qrcode = function(tempBtn) { var _this_ = this; var isWeiboWebView = /__weibo__/.test(navigator.userAgent); if (isWeiboWebView) { if (window.WeiboJSBridge) { _this_.bridgeReady(tempBtn ); } 또 다른 { document.addEventListener('WeiboJSBridgeReady', function() { _this_.bridgeReady(tempBtn); }) } } else { _this_.nativeReady(tempBtn) } }; $('[node-type=jsbridge]',tempBtn).on('click',function(e){ e.stopPropagation(); }) $(tempBtn).bind('click',function(e) { $(this).find('input[node-type=jsbridge]').trigger('click') }); this.getImgFile); }, bridgeReady: function(tempBtn) { $(tempBtn).bind('click', this.weiBoBridge) }, weiBoBridge: function() { window.WeiboJSBridge.invoke('scanQRCode', null, 함수(매개변수) { //QR 코드 스캔 결과 가져오기 $('.result-qrcode').append(params.result + '<br/>') }) }, getImgFile: function() { var _this_ = this; var inputDom = $(this).find('input[node-type=jsbridge]'); var imgFile = inputDom[0].files; imgFile[0]; var oFReader = 새로운 FileReader(); /^(?:image//bmp|image//cis/-cod|image//gif|image//ief|image//jpeg|image//jpeg|image//jpeg|image//pipeg|image/ /png|image//svg/+xml|image//tiff|image//x/-cmu/-raster|image//x/-cmx|image//x/-i con|image//x/-portable/-anymap|image//x/-portable/-bitmap|image//x/-portable/-graymap|image//x/-portable/-pixmap|image//x /-rgb|이미지//x/-xbitmap|이미지//x/-xpixmap|이미지//x/-xwindowdump)$/i; if (imgFile.length === 0) { return; } if (!rFilter.test(oFile.type)) { Alert(올바른 이미지 형식을 선택하세요!) } oFReader.onload = function(oFREvent) { qrcode .decode(oFREvent.target.result); qrcode.callback = function(data) { //QR 코드 스캔 결과 가져오기 $('.result-qrcode').append(data + '<br/>') }, destory: function() { $( tempBtn).off('click') } }; Qrcode.init = function(tempBtn) { var _this_ = this; tempBtn.each(function() { new _this_($(this)); }) })(window.Zepto ? Zepto : jQuery);

이상은 편집자가 소개한 HTML5 휴대폰 스캔 기능과 그 장단점입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!