html5qrcode的使用（自留笔记）_html5-qrcode-程序员宅基地

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

1.安装html5-qrcode

 npm i html5-qrcode

2.在所需组件处使用

模版：

 <div class="canTab" @click="startScan" v-if="!isScanning"><van-icon name="scan" size="45" color="#fff" /></div>    


<div class="scan" v-if="isScanning">
      <div class="scan-box">
        <div id="scanning" width="800px"></div>
      </div>
      <span class="close-scan" @click="stopScan">
          <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">
            <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>
            <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>
          </svg>
        </span>
    </div>

JS：

  // 引入扫描二维码
  import { Html5Qrcode } from 'html5-qrcode';


   data() {
      return {
        isScanning: false, // 扫码
      }


method： {
   //扫码接单
      startScan(){
        this.isScanning = true
        this.$nextTick(() => {
          this.html5QrCode = new Html5Qrcode('scanning');
          this.html5QrCode.start({
              facingMode: "environment"
            }, {
              fps: 10,
              aspectRatio: 1, // 4:3：1.333334 16:9：1.777778 1:1：1.0
              qrbox: {
                width: 280,
                height: 280
              },
            }, (decodedText, decodedResult) => {
            let codeUrl = decodedText; //获取二维码信息
            // 以下为自己所需的业务逻辑处理
            
            
              this.stopScan() // 结束扫码
              // alert("识别结果" + decodedText)
            }, errorMessage => {
            },
          )
            .catch(err => {});
        });
      },
      // 结束扫码
      stopScan() {
        this.html5QrCode.stop().then(() => {
          this.isScanning = false;
        })
      },

}

style:

  /* 扫码样式 */
  .scan {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;

    .scan-box {
      width: 100%;
    }

    .close-scan {
      position: absolute;
      top: 20px;
      right: 20px;

      svg {
        width: 40px;
        height: 40px;
      }
    }
  }
  .start-scan{
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    width: 200px;
    height: 50px;
    background: #00aaff;
    color: #fff;
    border-radius: 10px;
  }

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

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

<template>
  <div class="driverMyBox">
    <div class="canTab" @click="startScan" v-if="!isScanning">
        <van-icon name="scan" size="45" color="#fff" />
    </div>
    <div class="scan" v-if="isScanning">
      <div class="scan-box">
        <div id="scanning" width="800px"></div>
      </div>
      <span class="close-scan" @click="stopScan">
          <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">
            <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>
            <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>
          </svg>
       </span>
    </div>
  </div>
</template>

<script type='text/javascript'>

 // 引入扫描二维码
  import { Html5Qrcode } from 'html5-qrcode';
  export default {
    data() {
      return {
        //扫码
        isScanning: false, // 是否正在扫一扫
      }
    //扫码接单
    startScan(){
        this.isScanning = true;
        this.$nextTick(() => {
          this.html5QrCode = new Html5Qrcode('scanning');
          this.html5QrCode.start({
              facingMode: "environment"
            }, {
              fps: 10,
              aspectRatio: 1, // 4:3：1.333334 16:9：1.777778 1:1：1.0
              qrbox: {
                width: 280,
                height: 280
              },
            }, (decodedText, decodedResult) => {
            let codeUrl = decodedText; //获取扫码信息

            //这里进行自己的业务逻辑操作

             this.stopScan() // 结束扫码
              // alert("识别结果" + decodedText)
            }, errorMessage => {
            },
          )
            .catch(err => {});
        });
     },
     // 结束扫码
     stopScan() {
        this.html5QrCode.stop().then(() => {
          this.isScanning = false;
        })
     },
  }
</script>
<style lang='scss' scoped>
      /* 扫码样式 */
  .scan {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;

    .scan-box {
      width: 100%;
    }

    .close-scan {
      position: absolute;
      top: 20px;
      right: 20px;

      svg {
        width: 40px;
        height: 40px;
      }
    }
  }
  .start-scan{
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    width: 200px;
    height: 50px;
    background: #00aaff;
    color: #fff;
    border-radius: 10px;
  }
</style>

技术借鉴出处：

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

本文链接：https://blog.csdn.net/Lin_javascript/article/details/134503635

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

使用UmcFramework和unimrcpclient.xml连接多个SIP设置的配置指南及C代码示例

在多媒体通信领域，MRCP（Media Resource Control Protocol）协议被广泛用于控制语音识别和合成等媒体资源。UniMRCP是一个开源的MRCP实现，提供了客户端和服务端的库。UmcFramework是一个基于UniMRCP客户端库的示例应用程序框架，它帮助开发者快速集成和测试MRCP客户端功能。本文将详细介绍如何使用UmcFramework和unimrcpclient.xml配置文件连接到多个SIP设置，以及如何用C代码进行示例说明。

java.net.ProtocolException: Server redirected too many times (20)-程序员宅基地

文章浏览阅读3k次。报错：java.net.ProtocolException: Server redirected too many times (20)1.没有检查到cookie，一直循环重定向。解决：CookieHandler.setDefault(new CookieManager(null, CookiePolicy.ACCEPT_ALL));URL url = new URL(url); ..._java.net.protocolexception: server redirected too many times (20)

springboot启动报错 Failed to scan *****/derbyLocale_ja_JP.jar from classloader hierarchy_failed to scan from classloader hierarchy-程序员宅基地

文章浏览阅读4.1k次。问题这是部分报错信息2019-07-11 14:03:34.283 WARN [restartedMain][DirectJDKLog.java:175] - Failed to scan [file:/D:/repo/org/apache/derby/derby/10.14.2.0/derbyLocale_ja_JP.jar] from classloader hierarchyjava...._failed to scan from classloader hierarchy

MATLAB-ones函数_matlab中ones函数-程序员宅基地

文章浏览阅读2.8k次，点赞3次，收藏7次。在MATLAB中，ones函数用于创建一个指定大小的由1组成的矩阵或数组。_matlab中ones函数

解决PS等软件出现应用程序无法正常启动(0xc000007b)_photoshop应用程序无法正常启动0xc000007b。请单击“确认”关闭应用程序。-程序员宅基地

文章浏览阅读3.9w次，点赞2次，收藏9次。　　在使用电脑办公过程中，安装应用程序时难免遇到无法安装或者无法正常启动的问题，这对我们使用电脑带来了诸多不便。那遇到应用程序无法正常启动的问题要如何解决呢?相信大家肯定都是十分疑问的，每次都是只能忍痛重新安装软件。今天，小编就和大家探讨下应用程序无法正常启动的解决方法，帮助大家排忧解难。0xc000007b电脑图解1　　第一种方案：SFC检查系统完整性来尝试修复丢失文件　　1、打开电脑搜索输入cmd.exe，选择以管理员身份运行，跳出提示框时选择继续。0xc000007b电脑图解2_photoshop应用程序无法正常启动0xc000007b。请单击“确认”关闭应用程序。

oracle介质恢复和实例恢复的异同-程序员宅基地

文章浏览阅读396次。1、概念 REDO LOG是Oracle为确保已经提交的事务不会丢失而建立的一个机制。实际上REDO LOG的存在是为两种场景准备的：实例恢复（INSTANCE RECOVERY）；介质恢复（MEDIA RECOVERY）。实例恢复的目的是在数据库发生故障时，确保BUFFER CACHE中的数据不会丢失，不会造成数据库的..._oracle 实例恢复和介质恢复