当前位置:   article > 正文

uniapp在h5页面做扫码功能——html5-qrcode_uniapp html5-qrcode

uniapp html5-qrcode

安装

npm install html5-qrcode

代码

  1. <template>
  2. <view class="container">
  3. <button class="scan" @click="scanCode">打开相机扫码</button>
  4. <view class="reader-box" v-if="isScaning">
  5. <view class="reader" id="reader"></view>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. import {
  11. Html5Qrcode
  12. } from 'html5-qrcode';
  13. export default {
  14. data() {
  15. return {
  16. html5Qrcode: null,
  17. isScaning: false,
  18. }
  19. },
  20. methods: {
  21. startScan() {
  22. this.isScaning = true;
  23. Html5Qrcode.getCameras().then(devices => {
  24. if (devices && devices.length) {
  25. this.html5Qrcode = new Html5Qrcode('reader');
  26. this.html5Qrcode.start({
  27. facingMode: 'environment',
  28. }, {
  29. fps: 24,
  30. qrbox: 280
  31. }, (decodeText, decodeResult) => {
  32. console.log(decodeText)
  33. if (decodeText) {
  34. this.stopScan();
  35. this.isScaning = false;
  36. }
  37. }, (err) => {
  38. console.log(err)
  39. });
  40. }
  41. });
  42. },
  43. stopScan() {
  44. this.html5Qrcode.stop();
  45. },
  46. scanCode() {
  47. console.log('helo')
  48. this.startScan();
  49. }
  50. }
  51. }
  52. </script>
  53. <style scoped>
  54. .container{
  55. height:100%;
  56. }
  57. .reader-box {
  58. position: fixed;
  59. top: 0;
  60. bottom: 0;
  61. left: 0;
  62. right: 0;
  63. background-color: rgba(0, 0, 0, 0.5);
  64. }
  65. .reader {
  66. width: 540rpx;
  67. height: 540rpx;
  68. position: absolute;
  69. top: 50%;
  70. left: 50%;
  71. transform: translate(-50%, -50%);
  72. }
  73. </style>

测试效果

uniapp运行到浏览器

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号