devbox
神奇cpp
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

html5qrcode的使用（自留笔记）_html5-qrcode

作者：神奇cpp | 2024-07-21 04:32:25

赞

踩

html5-qrcode

本次项目为基于vue2+vant的H5，套壳APP，无法使用APK的扫码时选择使用h5qrcode进行扫码，实现扫码单。

1.安装html5-qrcode

 npm i html5-qrcode
2.在所需组件处使用

模版：

  1.  <div class="canTab" @click="startScan" v-if="!isScanning"><van-icon name="scan" size="45" color="#fff" /></div>    
  2.  
  3.  
  4. <div class="scan" v-if="isScanning">
  5.       <div class="scan-box">
  6.         <div id="scanning" width="800px"></div>
  7.       </div>
  8.       <span class="close-scan" @click="stopScan">
  9.           <svg t="1681382339822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2626" width="200" height="200">
  10.             <path d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z" fill="#ffffff" p-id="2627"></path>
  11.             <path d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z" fill="#ffffff" p-id="2628"></path>
  12.           </svg>
  13.         </span>
  14.     </div>

JS：

  1.   // 引入扫描二维码
  2.   import { Html5Qrcode } from 'html5-qrcode';
  3.  
  4.  
  5.    data() {
  6.       return {
  7.         isScanning: false, // 扫码
  8.       }
  9.  
  10.  
  11. method： {
  12.    //扫码接单
  13.       startScan(){
  14.         this.isScanning = true
  15.         this.$nextTick(() => {
  16.           this.html5QrCode = new Html5Qrcode('scanning');
  17.           this.html5QrCode.start({
  18.               facingMode: "environment"
  19.             }, {
  20.               fps: 10,
  21.               aspectRatio: 1, // 4:3：1.333334 16:9：1.777778 1:1：1.0
  22.               qrbox: {
  23.                 width: 280,
  24.                 height: 280
  25.               },
  26.             }, (decodedText, decodedResult) => {
  27.             let codeUrl = decodedText; //获取二维码信息
  28.             // 以下为自己所需的业务逻辑处理
  29.             
  30.             
  31.               this.stopScan() // 结束扫码
  32.               // alert("识别结果" + decodedText)
  33.             }, errorMessage => {
  34.             },
  35.           )
  36.             .catch(err => {});
  37.         });
  38.       },
  39.       // 结束扫码
  40.       stopScan() {
  41.         this.html5QrCode.stop().then(() => {
  42.           this.isScanning = false;
  43.         })
  44.       },
  45.  
  46. }

style:

  1.   /* 扫码样式 */
  2.   .scan {
  3.     display: flex;
  4.     align-items: center;
  5.     justify-content: center;
  6.     flex-direction: column;
  7.     position: fixed;
  8.     top: 0;
  9.     left: 0;
  10.     width: 100%;
  11.     height: 100%;
  12.     background: #000;
  13.  
  14.     .scan-box {
  15.       width: 100%;
  16.     }
  17.  
  18.     .close-scan {
  19.       position: absolute;
  20.       top: 20px;
  21.       right: 20px;
  22.  
  23.       svg {
  24.         width: 40px;
  25.         height: 40px;
  26.       }
  27.     }
  28.   }
  29.   .start-scan{
  30.     position: absolute;
  31.     top: calc(50% - 25px);
  32.     left: calc(50% - 100px);
  33.     display: flex;
  34.     align-items: center;
  35.     justify-content: center;
  36.     border: none;
  37.     width: 200px;
  38.     height: 50px;
  39.     background: #00aaff;
  40.     color: #fff;
  41.     border-radius: 10px;
  42.   }

这是复制别人的逻辑，已经表明出处，仅供自己记录笔记，防止以后使用时忘记。

完整代码(此处仅有扫描二维码代码，其他已摘去)：

  1. <template>
  2.   <div class="driverMyBox">
  3.     <div class="canTab" @click="startScan" v-if="!isScanning">
  4.         <van-icon name="scan" size="45" color="#fff" />
  5.     </div>
  6.     <div class="scan" v-if="isScanning">
  7.       <div class="scan-box">
  8.         <div id="scanning" width="800px"></div>
  9.       </div>
  10.       <span class="close-scan" @click="stopScan">
  11.           <svg t="1681382339822" class="icon" viewBox="0 0 1024 1024" version="1.1"                 xmlns="http://www.w3.org/2000/svg" p-id="2626" width="200" height="200">
  12.             <path d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z" fill="#ffffff" p-id="2627"></path>
  13.             <path d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z" fill="#ffffff" p-id="2628"></path>
  14.           </svg>
  15.        </span>
  16.     </div>
  17.   </div>
  18. </template>
  19.  
  20. <script type='text/javascript'>
  21.  
  22.  // 引入扫描二维码
  23.   import { Html5Qrcode } from 'html5-qrcode';
  24.   export default {
  25.     data() {
  26.       return {
  27.         //扫码
  28.         isScanning: false, // 是否正在扫一扫
  29.       }
  30.     //扫码接单
  31.     startScan(){
  32.         this.isScanning = true;
  33.         this.$nextTick(() => {
  34.           this.html5QrCode = new Html5Qrcode('scanning');
  35.           this.html5QrCode.start({
  36.               facingMode: "environment"
  37.             }, {
  38.               fps: 10,
  39.               aspectRatio: 1, // 4:3：1.333334 16:9：1.777778 1:1：1.0
  40.               qrbox: {
  41.                 width: 280,
  42.                 height: 280
  43.               },
  44.             }, (decodedText, decodedResult) => {
  45.             let codeUrl = decodedText; //获取扫码信息
  46.  
  47.             //这里进行自己的业务逻辑操作
  48.  
  49.              this.stopScan() // 结束扫码
  50.               // alert("识别结果" + decodedText)
  51.             }, errorMessage => {
  52.             },
  53.           )
  54.             .catch(err => {});
  55.         });
  56.      },
  57.      // 结束扫码
  58.      stopScan() {
  59.         this.html5QrCode.stop().then(() => {
  60.           this.isScanning = false;
  61.         })
  62.      },
  63.   }
  64. </script>
  65. <style lang='scss' scoped>
  66.       /* 扫码样式 */
  67.   .scan {
  68.     display: flex;
  69.     align-items: center;
  70.     justify-content: center;
  71.     flex-direction: column;
  72.     position: fixed;
  73.     top: 0;
  74.     left: 0;
  75.     width: 100%;
  76.     height: 100%;
  77.     background: #000;
  78.  
  79.     .scan-box {
  80.       width: 100%;
  81.     }
  82.  
  83.     .close-scan {
  84.       position: absolute;
  85.       top: 20px;
  86.       right: 20px;
  87.  
  88.       svg {
  89.         width: 40px;
  90.         height: 40px;
  91.       }
  92.     }
  93.   }
  94.   .start-scan{
  95.     position: absolute;
  96.     top: calc(50% - 25px);
  97.     left: calc(50% - 100px);
  98.     display: flex;
  99.     align-items: center;
  100.     justify-content: center;
  101.     border: none;
  102.     width: 200px;
  103.     height: 50px;
  104.     background: #00aaff;
  105.     color: #fff;
  106.     border-radius: 10px;
  107.   }
  108. </style>
  109.

技术借鉴出处：

https://www.cnblogs.com/kinwai/p/17316033.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/859642
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号