记录hbuild打包为apk做二维码扫描所踩的坑

概述

本文并非旨在详解打包流程，毕竟市面上已有许多教程可供参考。然而，我认为有必要记录下在这个过程中遇到的问题，以便后来者避免重蹈覆辙。

背景

我面临一个需求，需要在基于Vue2和Vant UI的移动应用中实现二维码扫描功能，并最终打包成安卓APK。虽然项目本身已经完备，我的任务只是扩展功能，但由于涉及二维码扫描，我无法仅通过浏览器进行调试，而必须将其打包为APK进行测试, 确定不能搞uniapp那套了, 只能打包为dist再通过H5+Hbuild打包为apk。遗憾的是，由于我的手机无法连接到电脑，我不得不依赖模拟器进行调试。

踩坑经历

模拟器的选择

看Hbuild模拟器推荐Android sudio,下载下来,一开始我就装D盘,并打开了Android sudio开始下载模拟器并且联调hbuild,但是一直卡在界面显示---同步手机端程序文件完成不动了, 去社区问答查看下面一堆人都有这个问题, 没有人说怎么解决.....这其实是幸存者偏差, 我到现在为止, 也不知道具体原因,当然我也不可能去论坛上面回帖,我猜想是因为我的Android sudio没有装在C盘或者环境配置有问题或者啥的, 逛了各种网页又下了另外的镜像,最终也是卵用没有.折腾了大半天,后面我改用了夜神模拟器,62001端口配上去,马上连好了, 但是页面一片空白......这里需要改路由为hash, 并且vue.config.js中 baseUrl: './',页面终于正常显示。

扫描插件的选择

我首先尝试了html5-qrcode插件,它在GitHub上有4.5K的星标，但存在300多个未解决的issue。尽管它支持多种类型的码扫描，但在夜神模拟器中测试时，我发现截屏框的像素极低，难以识别二维码。我尝试了@zxing/library，但同样遇到了问题。后来，我又尝试了vue-qrcode-reader，它基于@zxing/library，但同样无法满足需求。我还尝试了雷电模拟器，但每次尝试截屏时应用都会闪退。

html5plus

在尝试过程中，同事向我推荐了html5plus，它提供了直接调用摄像头的API，扫码效果非常准确。虽然需要自己设计UI界面，但我最终还是选择了它，因为它简单高效。以下是我使用的html5plus API的链接：HTML5+ API Reference。(www.html5plus.org/doc/zh_cn/b…) 这个调试中, 我又踩了个坑, 我是下面这么写方法,<button onclick='startScan()'/>开始扫码</button> 怎么都调用不到方法里面,当然如果是浏览器里面点,肯定有反应. 后面看文档需要写成<input type='button' onclick='startScan()' value='开始扫码' />

最后的写法,贴一下

export const scanCodeH5 = async () => {
  var barcode = null
  return new Promise((resolve, reject) => {
    // 扫码成功回调
    function onmarked(type, result) {
      var text = '未知: '
      switch (type) {
        case plus.barcode.QR:
          text = 'QR: '
          break
        case plus.barcode.EAN13:
          text = 'EAN13: '
          break
        case plus.barcode.EAN8:
          text = 'EAN8: '
          break
      }
      console.log(text + result + '结果')
      try {
        barcode.close()
        resolve(result)
      } catch (error) {
        barcode.close()
      }
    }
    // 创建Barcode扫码控件
    function createBarcode() {
      if (!barcode) {
        barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
          top: '0',
          left: '0px',
          width: '100%',
          height: '100vh',
          scanbarColor: '#1DA7FF',
          position: 'absolute',
          frameColor: '#1DA7FF'
        })
        barcode.onmarked = onmarked
        plus.webview.currentWebview().append(barcode)
      }
      barcode.start()
    }
    try {
      createBarcode()
    } catch (error) {
      reject(new Error(error))
    }
  })
}

最终，我成功实现了一个清晰的摄像头扫描功能，证实了之前的问题并非由模拟器引起。尽管我没有深入研究其他插件识别率低的原因，但html5plus已经满足了我的需求。

总结

有时候，过分依赖插件可能会浪费时间，因为一些插件可能已经过时。在某些情况下，直接调用API可能更加高效。这次的经历让我认识到，有时候自己动手可能比调试插件更为迅速和有效。大家有什么更好的方法或者插件推荐请留言讨论。