barcode_custom.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>Hello H5+</title>
  9. <script type="text/javascript" src="../js/common.js"></script>
  10. <script type="text/javascript">
  11. var ws=null,wo=null;
  12. var scan=null;
  13. // H5 plus事件处理
  14. function plusReady(){
  15. // 获取窗口对象
  16. ws=plus.webview.currentWebview();
  17. nv=ws.getTitleNView();
  18. wo=ws.opener();
  19. // 开始扫描
  20. ws.addEventListener('show', function(){
  21. scan=new plus.barcode.Barcode('bcid',[plus.barcode.QR,plus.barcode.EAN8,plus.barcode.EAN13],{frameColor:'#00FF00',scanbarColor:'#00FF00'});
  22. scan.onmarked=onmarked;
  23. scan.start({conserve:true,filename:'_doc/barcode/'});
  24. createSubview();
  25. }, false);
  26. // 显示页面并关闭等待框
  27. ws.show('pop-in');
  28. }
  29. document.addEventListener('plusready', plusReady, false);
  30. // 二维码扫描成功
  31. function onmarked(type, result, file){
  32. switch(type){
  33. case plus.barcode.QR:
  34. type = 'QR';
  35. break;
  36. case plus.barcode.EAN13:
  37. type = 'EAN13';
  38. break;
  39. case plus.barcode.EAN8:
  40. type = 'EAN8';
  41. break;
  42. default:
  43. type = '其它'+type;
  44. break;
  45. }
  46. result = result.replace(/\r\n/g, '');
  47. wo.evalJS("scaned('"+ type +"','"+ result +"','"+ file +"');");
  48. back();
  49. }
  50. // 创建子窗口
  51. var view = null;
  52. function createSubview(){
  53. view = new plus.nativeObj.View('nbutton', {
  54. bottom: '20px',
  55. left: '30%',
  56. width: '40%',
  57. height: '44px'
  58. }, [{
  59. tag: 'rect',
  60. id: 'rect',
  61. rectStyles: {
  62. radius: '8px',
  63. color: 'rgba(255,0,0,0.8)'
  64. }},{
  65. tag: 'font',
  66. id: 'text',
  67. text: '暂 停',
  68. textStyles: {
  69. color: '#FFFFFF'
  70. }
  71. }]);
  72. // 处理事件
  73. view.addEventListener('click', function(e){
  74. switchScan();
  75. }, false);
  76. view.addEventListener('touchstart', function(e){
  77. view.drawRect({
  78. radius: '8px',
  79. color: 'rgba(255,0,0,0.5)'
  80. }, {}, 'rect');
  81. }, false);
  82. view.addEventListener('touchend', function(e){
  83. view.drawRect({
  84. radius: '8px',
  85. color: 'rgba(255,0,0,0.8)'
  86. }, {}, 'rect');
  87. }, false);
  88. ws.append(view);
  89. }
  90. // 开关闪光灯
  91. var bFlash = false;
  92. var AVCaptureDevice=null;
  93. var Camera=null;
  94. function switchFlash(){
  95. bFlash = !bFlash;
  96. scan.setFlash(bFlash);
  97. ws.setStyle({titleNView: {
  98. buttons: [{
  99. fontSrc: '_www/helloh5.ttf',
  100. text: (bFlash?'\ue400':'\ue401'),
  101. fontSize: '18px',
  102. onclick: 'javascript:switchFlash()'
  103. }]
  104. }});
  105. }
  106. // 切换扫描
  107. var bScan = false;
  108. function switchScan(){
  109. if(bScan){
  110. scan.start({conserve:true, filename:'_doc/barcode/'});
  111. view&&(view.drawText('暂 停', {}, {color:'#FFFFFF'}, 'text'));
  112. }else{
  113. scan.cancel();
  114. view&&(view.drawText('开 始', {}, {color:'#FFFFFF'}, 'text'));
  115. }
  116. bScan=!bScan;
  117. }
  118. </script>
  119. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  120. <style type="text/css">
  121. #bcid {
  122. width: 100%;
  123. position: absolute;
  124. top: 0px;
  125. bottom: 0px;
  126. text-align: center;
  127. }
  128. .tip {
  129. color: #FFFFFF;
  130. font-weight: bold;
  131. text-shadow: 0px -1px #103E5C;
  132. }
  133. </style>
  134. </head>
  135. <body style="background-color:#000000;">
  136. <div id="bcid">
  137. <div style="height:40%"></div>
  138. <p class="tip">...载入中...</p>
  139. </div>
  140. </body>
  141. </html>