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博客

你可能感兴趣的:(前端)