이 글은 주로 휴대폰에서 코드 스캔 기능을 여는 것에 대한 HTML5 정보와 그 장점과 단점을 소개합니다. HTML5에 관심이 있는 친구들이 참고할 수 있습니다.
1. 해결된 문제:
1. Weibo에서 클라이언트는 QR 코드를 스캔하고 분석합니다.
웹에서 QR 코드를 스캔하고 분석할 수 있습니다. 클라이언트 또는 h5 단말기에서 QR 코드 스캔 작업을 직접 완료할 수 있습니다. 3. 단점:
그림이 선명하지 않고 구문 분석에 실패하기 쉽습니다. 렌즈가 QR 코드에 매우 가까워야 함), 기본 통화와 비교하면 카메라 분석에 1~2초 정도 지연이 발생합니다. 지침: 이 플러그인은 zepto.js 또는 jQuery.js와 함께 사용해야 합니다.
사용 지침:
1. 사용해야 하는 페이지
<script src="lib/zepto.js"></script> <script src="lib/qrcode.lib.min.js"></script> <script src="lib/qrcode.js"></script>
2. 버튼의 html 스타일을 맞춤 설정하세요
맞춤 속성을 추가하세요. 입력 버튼, 속성 이름은 node-type
이 플러그인에는
을 사용해야 하기 때문에 html 구조는 웹 페이지에 고정된 표시 스타일을 가지고 있어 버튼 스타일을 사용자 정의하기 위해 그에 따라 코드를 중첩할 수 있습니다. 다음 샘플 코드 구조<p> <p class="qr-btn" node-type="qr-btn">扫描二维码1 <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" /> </p> </p>
<input type="file" />
에 입력을 설정합니다. 버튼의 CSS는 버튼을 숨깁니다. 예를 들어, 저는
속성 선택기
input[node-type=jsbridge]{ display:none; }
를 사용합니다. 우리 자신의 필요에 따라 class="qr-btn" 스타일을 정의하면 됩니다.
개체를 초기화합니다.
//初始化扫描二维码按钮,传入自定义的 node-type 属性 $(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); } else { document.addEventListener('WeiboJSBridgeReady', function() { _this_.bridgeReady(tempBtn); }); } } else { _this_.nativeReady(tempBtn); } }; Qrcode.prototype = { nativeReady: function(tempBtn) { $('[node-type=jsbridge]',tempBtn).on('click',function(e){ e.stopPropagation(); }); $(tempBtn).bind('click',function(e){ $(this).find('input[node-type=jsbridge]').trigger('click'); }); $(tempBtn).bind('change', this.getImgFile); }, bridgeReady: function(tempBtn) { $(tempBtn).bind('click', this.weiBoBridge); }, weiBoBridge: function() { window.WeiboJSBridge.invoke('scanQRCode', null, function(params) { //得到扫码的结果 $('.result-qrcode').append(params.result + '<br/>'); }); }, getImgFile: function() { var _this_ = this; var inputDom = $(this).find('input[node-type=jsbridge]'); var imgFile = inputDom[0].files; var oFile = imgFile[0]; var oFReader = new FileReader(); var rFilter = /^(?: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\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; if (imgFile.length === 0) { return; } if (!rFilter.test(oFile.type)) { alert("选择正确的图片格式!"); return; } oFReader.onload = function(oFREvent) { qrcode.decode(oFREvent.target.result); qrcode.callback = function(data) { //得到扫码的结果 $('.result-qrcode').append(data + '<br/>'); }; }; oFReader.readAsDataURL(oFile); }, destory: function() { $(tempBtn).off('click'); } }; Qrcode.init = function(tempBtn) { var _this_ = this; tempBtn.each(function() { new _this_($(this)); }); }; window.Qrcode = Qrcode; })(window.Zepto ? Zepto : jQuery);
위는 에디터가 소개해드리는 내용입니다 HTML5의 휴대폰 코드 스캔 기능과 그 장점과 단점이 모두에게 도움이 되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주시면 편집자가 제 시간에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다! 관련 권장 사항:
html5 앱 호출 방법
몇 가지 유용한 HTML5 모바일 개발 프레임워크위 내용은 HTML5는 휴대폰 코드 스캔 기능과 그 장점과 단점을 엽니다_html5 튜토리얼 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!