バーコードの導入事例
1. はじめにバーコード モジュールはバーコード スキャンを管理し、一般的なバーコード (QR コードおよび一次元コード) のスキャンおよび識別機能を提供し、デバイスのカメラを呼び出してデータ入力用のバーコード イメージをスキャンできます。バーコード管理オブジェクトは、plus.barcode を通じて取得できます。
2. 得られた効果3. コードを実装する<!doctype html> <html> <head> <meta charset=UTF-8> <title></title> <meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1 ,maximum-scale=1,user-scalable=no /> <link href=css/mui.min.css rel=stylesheet /> <script src=js/mui.min.js></script> <style type=text/css> #bcid{ width: 100%; height: 100%; } html, body ,div; { 高さ: 100%; 幅: 100%; } .fbt{ カラー: #0E76E1; #ffffff; フロート: 左; 行の高さ: 44px; } </style> </head> <body> <header class=mui-bar mui-bar-nav style=background-color: # ffffff;> <a class=mui-action-back mui-icon mui-icon-left-nav mui-pull-left></a> <h1 class=mui-title style=color: #0E76E1;>アイテム QR コード スキャン</h1> <span class=mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right id=turnTheLight></span> </header> <div id = bcid> <!--スキャン コントロールを保持している div--> </div> <div class=mui-bar mui-bar-footer style=padding: 0px;> <div class=fbt onclick=scanPicture();>アルバムから QR コードを選択</div> <div class=fbt mui-action-back>キャンセル</div> </div> <script type=text/javascript> スキャン= null; //スキャン オブジェクト mui.plusReady(function () { mui.init(); startRecognize(); }); function startRecognize(){ try{ var filter; style = {frameColor: #29E52C,scanbarColor: #29E52C,background: } //スキャン制御構築 scan = new plus.barcode.Barcode('bcid',filter,styles); scan.onmarked = onmarked; ; scan.start(); //フラッシュ処理をオンまたはオフにします var flag = false; document.getElementById(turnTheLight).addEventListener('tap',function(){ if(flag == false){ scan.setFlash(true); flag = true; }else{ scan.setFlash(false); flag = false; } }); }catch(e){ エラーが発生しました:/n+e) } }; onmarked( type, result ) { var text = ''; switch(type){ case plus.barcode.QR: text = 'QR: '; case plus.barcode.EAN13: text = 'EAN13: '; case plus.barcode.EAN8: text = 'EAN8: '; alert( text + : + result ); // アルバム関数 scanPicture(); plus.gallery.pick(function(path){ plus.barcode.scan(path,onmarked,function(error){ plus.nativeUI.alert(この画像は認識できません); }); },function(err){ プラス.nativeUI.alert(失敗: +err.message) } </script> </body> </html> 3. プロセス中に発生した問題a、div はページ全体を占めます
1. この div の幅と高さは 100% で、親要素の高さも 100% です (ルート ノードまで同様)、またはこの div の位置は絶対です。
2. js を使用して、ページの幅と高さを動的に設定できます。
var height = window.innerHeight + 'px';//ページの実際の高さを取得します var width = window.innerWidth + 'px'; document.getElementById(bcid).style.height= height; .style.幅=幅;
b、スキャン コントロールには上マージンと下マージンがあります。
視覚的な違いを薄めるために黒で塗りつぶしていますが、実際には解決されていません（解決した場合はメッセージを残してください、ありがとうございます）。
要約する上記は、編集者が導入した MUI フレームワークに基づいて HTML5 で実装された QR コード スキャン機能です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。 。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！