scan.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  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"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>Hello H5+</title>
  9. <script type="text/javascript" src="js/h5.js"></script>
  10. <script type="text/javascript">
  11. var ws=null,wo=null;
  12. var scan=null,domready=false;
  13. // H5 plus事件处理
  14. function plusReady(){
  15. if(ws||!window.plus||!domready){
  16. return;
  17. }
  18. // 获取窗口对象
  19. ws=plus.webview.currentWebview();
  20. wo=ws.opener();
  21. // 开始扫描
  22. ws.addEventListener('show',function(){
  23. scan=new plus.barcode.Barcode('bcid');
  24. scan.onmarked=onmarked;
  25. scan.start({conserve:true,filename:"_doc/barcode/"});
  26. });
  27. // 显示页面并关闭等待框
  28. ws.show("pop-in");
  29. wo.evalJS("closeWaiting()");
  30. }
  31. if(window.plus){
  32. plusReady();
  33. }else{
  34. document.addEventListener("plusready",plusReady,false);
  35. }
  36. // 监听DOMContentLoaded事件
  37. document.addEventListener("DOMContentLoaded",function(){
  38. domready=true;
  39. plusReady();
  40. },false);
  41. // 二维码扫描成功
  42. function onmarked(type,result,file){
  43. switch(type){
  44. case plus.barcode.QR:
  45. type = "QR";
  46. break;
  47. case plus.barcode.EAN13:
  48. type = "EAN13";
  49. break;
  50. case plus.barcode.EAN8:
  51. type = "EAN8";
  52. break;
  53. default:
  54. type = "其它"+type;
  55. break;
  56. }
  57. result = result.replace(/\n/g, '');
  58. wo.evalJS("scaned('"+ type +"','"+ result +"','"+ file +"');");
  59. back();
  60. }
  61. // 从相册中选择二维码图片
  62. function scanPicture() {
  63. plus.gallery.pick(function(path){
  64. plus.barcode.scan(path,onmarked,function(error){
  65. plus.nativeUI.alert( "无法识别此图片" );
  66. });
  67. },function(err){
  68. plus.nativeUI.alert("Failed: "+err.message);
  69. });
  70. }
  71. </script>
  72. <link rel="stylesheet" href="css/h5.css" type="text/css" charset="utf-8"/>
  73. <style type="text/css">
  74. #bcid {
  75. width: 100%;
  76. position: absolute;
  77. top: 0px;
  78. bottom: 44px;
  79. text-align: center;
  80. }
  81. .tip {
  82. color: #FFFFFF;
  83. font-weight: bold;
  84. text-shadow: 0px -1px #103E5C;
  85. }
  86. footer {
  87. width: 100%;
  88. height: 44px;
  89. position: absolute;
  90. bottom: 0px;
  91. line-height: 44px;
  92. text-align: center;
  93. color: #FFF;
  94. }
  95. .fbt {
  96. width: 50%;
  97. height: 100%;
  98. background-color: #FFCC33;
  99. float: left;
  100. }
  101. .fbt:active {
  102. -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
  103. box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
  104. }
  105. </style>
  106. </head>
  107. <body style="background-color: #000000;">
  108. <div id="bcid">
  109. <div style="height:40%"></div>
  110. <p class="tip">...载入中...</p>
  111. </div>
  112. <footer>
  113. <div class="fbt" onclick="back();">取  消</div>
  114. <div class="fbt" onclick="scanPicture();">从相册选择二维码</div>
  115. </footer>
  116. </body>
  117. </html>