H5移动端网页自定义扫码

早上不想起_

已于 2022-06-23 17:20:36 修改

阅读量822

点赞数 1

文章标签： vue.js javascript 前端

于 2021-12-19 22:10:11 首次发布

本文链接：https://blog.csdn.net/qq_43371595/article/details/122031105

版权

本文介绍了在H5移动端实现网页扫码的需求，推荐使用@zxing/library库（适用于vue或uniApp）以及html5-qrcode。二维码识别效果优于条形码。在uniApp中可能遇到白屏问题，解决方案是删除node_modules并固定库版本。此外，还提供了一个替代插件vue-qrcode-reader的简单示例链接。

摘要由CSDN通过智能技术生成

最近遇到个需求，需要做H5网页版的扫码

总结了一下版本
vue或uni的可以使用"@zxing/library": “^0.18.6”,
其他的可以使用html5-qrcode（https://github.com/zhiqiang21/WebComponent/tree/master/html5-Qrcode）
本人使用的是第一种

<template>
  <div class="scan">
    <div class="scanNav">
      <van-nav-bar
        safe-area-inset-top
        title=""
        left-arrow
        :left-text="$t('message.返回')"
        :right-text="$t('message.选择摄像头')"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <div class="creatScan"></div>
    <van-popup v-model:show="showPicker" round position="bottom" >
      <van-picker
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
        :confirm-button-text='$t("message.确认")'
        :cancel-button-text='$t("message.取消")'
      />
    </van-popup>
    <div
      class="SolicitationNum"
      v-if="routFrom == 'Solicitation'"
      @click="navTo('/Query', { active: 1 })"
    >
      <van-badge :content="SolicitationNum">
        <van-button plain type="primary">{
  {
          $t("message.揽件数量")
        }}</van-button>
      </van-badge>
    </div>
  </div>
</template>

<script>
import {