__uniappscan.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <script>
  6. var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
  7. CSS.supports(
  8. 'top: constant(a)'))
  9. document.write(
  10. '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
  11. (coverSupport ? ', viewport-fit=cover' : '') + '" />')
  12. </script>
  13. <title>扫码</title>
  14. <style>
  15. html,
  16. body,
  17. .container {
  18. margin: 0;
  19. padding: 0;
  20. position: absolute;
  21. left: 0;
  22. top: 0;
  23. right: 0;
  24. bottom: 0;
  25. background: #000000;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div id="scan" class="container">
  31. </div>
  32. <script>
  33. var scan;
  34. var lightImg;
  35. var lightView;
  36. var back = function(cancel) {
  37. if (cancel) {
  38. plus.webview.postMessageToUniNView({
  39. type: 'scanCode',
  40. args: {
  41. errMsg: 'cancel'
  42. }
  43. }, '__uniapp__service');
  44. }
  45. lightImg && lightImg.clear();
  46. lightView && lightView.clear();
  47. scan && scan.close();
  48. var webview = plus.webview.currentWebview();
  49. if (webview.__uniapp_dark) {
  50. plus.navigator.setStatusBarStyle('dark');
  51. }
  52. webview.close('auto');
  53. }
  54. /**
  55. * 绘制照亮开关
  56. */
  57. function drawLight() {
  58. var offImg =
  59. 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABjklEQVRoQ+1ZbVHEQAx9TwE4ABTcOQAknANQAKcAUAAOAAXgAHAACsDCKQiTmbYDzJZtNt2bFrJ/m6+Xl2yyU2LmhzOPH/8PgIjcADirxNyapNoffMwMiMgzgMPBHmyCLySPLCoBwJKtAbJbYaBmD1yRvBwAtBMxl5DF+DZkiwCIyBLAzsgBbki+Wm2WAlCaL6zOMvKnJO+sNksB7ALQbO1ZHfbIv5FUVs2nCIB6EZETALdmj2mFY5I6X8ynGEADQllYmL1+VzBfnV/VvQB0aj45ARyQ/Ci14QLQsOBZLe5JaikWnzEA7AN4L4hgA2Dpyb76dANwsOCq/TZhASAYKGie0a7R1lDPI0ebtF0NUi+4yfdAtxr3PEMnD6BbD0QkNfACQO05EAwMuaBqDrIVycdmTpwDuP4R0OR7QFftVRP0g+49cwOQq4DJMxAAchmofY3m/EcJBQOZbTRKKJeBKKEoIePvpFRJ1VzmciUccyCa+C81cerBkuuB7sGTE/zt+yhN7AnAqxsAvBn06n8CkyPwMZKwm+UAAAAASUVORK5CYII=';
  60. var onImg =
  61. 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAB4klEQVRoQ+1ZQU7CUBCdaWVBLFETqUtxB7iQG4hH4AZ4AvUE4gnkBuoJ9AbiDXAhZadby4IQICaS9psqJBVLy5/fkhKHbefPzPvzZv6bgLDmP1zz/OH/ARjZpSYAniVSORQXRt5qyviWrsDQLrUQ8FgmyLK2AsRTzrSqy9p7dgxA5raibFdSgSR7QAi4yu11GlFA/d+lKSTjfBW2JAAj+7Cio7MVZ4KO0AeG+dKW9UkCMHwvNxDhUjZYuL17apjdW1mfJACiX9gef2bbgLgvG3CB/bNhdioUXyQAXqCRXawDaDeUoPNnBLonuXy3RfFFBvADouxx9ogSeHaGMjpjm0LDXrGKQntUAaBn3IPsTveN6kOpAl5QNWkh7gzTqlOTJ0mJ+WAf/WLBmWivskkIEIONjKio3H4sAKhVUOX+7MKUKcQAZLk3Z88VWEQhr0kRYCoN/m5wqe8BvzQOkuDpB+CTB0EPHgOYNnNiTewXaFyBkFGbWAVQE7XNXevhW7X2Sucg8NqfR+p7AADaesateUk7E+0eAH4tLOsAIPSNZQBJT6EoicMV4Ar4OEJZK5lCTCGmkPy/MUGjOTEtxO9A1A1wE3MTp6iJgxaWKAr7F54o27DvsUwhlQRUzzIA1RtUPf8FRKRYQOI+9hQAAAAASUVORK5CYII=';
  62. var onText = '轻触照亮';
  63. var offText = '轻触关闭';
  64. var on = false;
  65. var viewWidth = 48;
  66. var fontSize = 12;
  67. var imgWidth = 30;
  68. function changeType() {
  69. lightView.reset();
  70. lightImg.loadBase64Data(on ? onImg : offImg, function() {
  71. lightView.drawBitmap(lightImg, {}, {
  72. top: 0,
  73. left: (viewWidth - imgWidth) / 2 + 'px',
  74. width: imgWidth + 'px',
  75. height: imgWidth + 'px'
  76. });
  77. });
  78. lightView.drawText(on ? offText : onText, {
  79. top: imgWidth + 'px',
  80. left: '0px',
  81. width: '100%',
  82. height: fontSize + 'px'
  83. }, {
  84. color: '#ffffff',
  85. size: fontSize + 'px'
  86. });
  87. scan.setFlash(on);
  88. on = !on;
  89. }
  90. lightImg = new plus.nativeObj.Bitmap('lightImg');
  91. lightView = new plus.nativeObj.View('lightView', {
  92. width: viewWidth + 'px',
  93. height: viewWidth + 'px',
  94. top: window.innerHeight / 2 + 50 + 'px',
  95. left: (window.innerWidth - viewWidth) / 2 + 'px',
  96. position: 'static'
  97. });
  98. lightView.addEventListener('click', function() {
  99. changeType();
  100. });
  101. plus.webview.currentWebview().append(lightView);
  102. changeType();
  103. }
  104. document.addEventListener('plusready', function() {
  105. var serviceWebview = plus.webview.getWebviewById('__W2A_CONTEXT_') || plus.webview.getLaunchWebview();
  106. plus.key.addEventListener('backbutton', function() {
  107. back(true);
  108. });
  109. setTimeout(function() {
  110. var webview = plus.webview.currentWebview();
  111. scan = new plus.barcode.Barcode('scan', webview.__uniapp_scan_type, {
  112. frameColor: '#118CE9',
  113. scanbarColor: '#118CE9'
  114. });
  115. scan.onmarked = function(type, code, file) {
  116. var res = {
  117. type: type,
  118. code: code
  119. };
  120. back()
  121. plus.webview.postMessageToUniNView({
  122. type: 'scanCode',
  123. args: res
  124. }, '__uniapp__service');
  125. };
  126. scan.onerror = function(error) {
  127. back()
  128. plus.webview.postMessageToUniNView({
  129. type: 'scanCode',
  130. args: {
  131. errMsg: error.message + ',错误码:' + error.code
  132. }
  133. }, '__uniapp__service');
  134. };
  135. scan.start();
  136. drawLight();
  137. }, 500)
  138. })
  139. </script>
  140. </body>
  141. </html>