H5扫描条形码二维码html5-qrcode插件的坑

致命问题就是大部分条形码扫不出来,只有小部分可以,不过扫二维码倒是没问题很快。

最后我的解决办法是在微信公众号就调用微信的扫一扫(记得使用之前先调用一下微信签名),在安卓端就用安卓的(当然安卓端也需要配合改一下方法才能去调用安卓的方法)

var loadWxConfig = async () => {
  // 进行签名的时候  Android 不用使用之前的链接, ios 需要
  let signLink = /(Android)/i.test(navigator.userAgent) ? location.href : window.entryUrl
  console.log('拼接的链接',signLink)
  const config = await getWxConfig({url: signLink})
  console.log('签名',config)
  window.wx.config({
    debug: false,
    appId: config.appId,
    timestamp: config.timestamp,
    nonceStr: config.nonceStr,
    signature: config.signature,
    jsApiList: [ 'getLocation', 'updateAppMessageShareData', 'scanQRCode','updateTimelineShareData' ],
    openTagList: [
      'wx-open-launch-weapp' // 跳转小程序
    ]
  })
  window.wx.error(function (res) {
    console.log('哈哈', res)
  })
}
var scanQRCode = ({success, faild}) => {
  window.wx.ready(() => {
    window.wx.scanQRCode({
      needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
      scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
      success: (res) => {
        var result = res.resultStr // 当needResult 为 1 时,扫码返回的结果
        console.log('二维码数据', result)
        success(validInput(res.resultStr))
      },
      faild: err => {
        faild(err)
        console.error('错误:', err)
      }
    })
  })
}

   // 扫描
    callScan() {
      if (isMyApp()) {//安卓
        console.log('isMyApp()', isMyApp(), window.bridge)
        window.bridge.openScan()
        window.scanResult = (res) => {
          console.log('安卓扫描结果', res)
          this.simNum = res
        }
      } else if (isWeixinOfficialAccount()) {//微信公众号
        scanQRCode({
          success: (val) => {
            this.simNum = val
          }
        })
      } else {
        this.$vux.toast.text('该应用还没支持扫描功能', 'center')
        return
      }
    }

感谢以下博主:

VUE html5-qrcode H5扫一扫功能_改bug的101天的博客-CSDN博客

Html5-qrcode可以用于识别小二维码Html5-qrcode是一个基于JavaScript的库,用于在网页上进行二维码扫描和识别。它允许用户使用摄像头扫描网页上的二维码,并将其解码为文本或URL。这样,用户就可以方便地识别小二维码。 使用Html5-qrcode进行小二维码的识别非常简单。首先,我们需要在网页中引入Html5-qrcode库,并创建一个用于显示扫描结果的元素。接下来,我们需要调用Html5-qrcode的API函数以开始扫描二维码。 在代码中,我们可以使用以下的示例代码来实现小二维码的识别: ``` <!DOCTYPE html> <html> <head> <title>Html5-qrcode</title> <script src="html5-qrcode.min.js"></script> </head> <body> <h1>小二维码识别</h1> <div id="qrcode"></div> <script> var qrcode = new Html5Qrcode("qrcode"); function onScanSuccess(qrCodeMessage) { alert("成功识别小二维码: " + qrCodeMessage); } function onScanFailure(error) { // 处理扫描失败的情况 } function onScanError(error) { // 处理扫描错误的情况 } qrcode.start({ facingMode: "environment" }, { qrbox: 250 }, onScanSuccess, onScanFailure, onScanError); </script> </body> </html> ``` 在上面的代码中,我们首先创建一个名为"qrcode"的div元素,用于显示二维码扫描结果。然后,我们创建一个Html5Qrcode对象,并将"qrcode"作为构造函数的参数传递进去。接下来,我们定义了三个回调函数,分别用于处理成功识别二维码的情况、扫描失败的情况和扫描错误的情况。 最后,我们调用Html5Qrcode对象的start方法,传入参数设置为使用后置摄像头进行扫描,并设置二维码框的大小为250。同时,我们将之前定义的三个回调函数作为参数传递给start方法。 这样,当用户打开该网页时,会自动启动摄像头,并进行二维码扫描。一旦成功识别到小二维码,就会触发onScanSuccess函数,并显示识别结果。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值