1. Weibo クライアントのカメラを呼び出して QR コードをスキャンし、解析する機能。
2. ネイティブ ブラウザおよび WeChat クライアントで QR コードをスキャンおよび解析できます。
2. 利点:Web 側または h5 側はコード スキャン作業を直接完了できます。
3. 短所:画像が鮮明でない場合、解析に失敗しやすくなります (画像をスキャンするために写真を撮るには、レンズを QR コードに非常に近づける必要があります)。カメラの解析には、ネイティブ呼び出しと比べて 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 スタイルをカスタマイズする
カスタム ボタンのカスタム属性を追加します。属性名はノード タイプです。
カスタム属性を入力ボタンに追加します。属性名はノードタイプです。
プラグインは<input type=file />を使用する必要があるため、HTML 構造には Web ページ上の固定表示スタイルがあり、ボタン スタイルをカスタマイズするには、次のサンプル コード構造に従ってコードをネストできます。
<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 を設定してボタンを非表示にします。たとえば、属性セレクターを使用します。
input[node-type=jsbridge]{display:none;}ここでは、必要に応じて 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') }); $(tempBtn).bind('change', 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|image//x/-xbitmap|image//x/-xpixmap|image//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.Qrcode = Qrcode;})(window.Zepto ? Zepto : jQuery);要約する以上が編集者による HTML5 携帯電話のスキャン機能とその利点と欠点です。ご質問がございましたら、メッセージを残していただければ編集者がすぐにご返答いたします。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！