鸿蒙5.0【实现二维码扫码识别】OpenHarmony

概念介绍

二维码的应用场景非常广泛，在购物应用中，消费者可以直接扫描商品二维码，浏览并购买产品，如图是购物应用的扫描二维码的页面。

本文就以[橘子购物示例应用]为例，来讲解OpenHarmony应用二维码开发相关的技术点。

我们先看下二维码相关的几个概念。

● 二维码生成

OpenHarmony应用框架提供了[QRCode组件]，用于显示单个二维码的组件。该组件只能用于显示二维码，无法显示条码与解析码内容。

● 二维码解析

OpenHarmony提供了功能强大的三方库 @ohos/zxing，是一个解析/生成一维码/二维码的库。

二维码解析时，通常有两种方式，使用相机拍摄获取图片或打开相册选取图片，然后图片解析合适的图片格式，进行二维码解析。

[橘子购物示例应用]扫描二维码的示例图：

配置文件

了解了二维码相关的概念后，我们看下[橘子购物示例应用]的oh-package.json5配置文件。

在[橘子购物示例应用]中，实现首页二维码扫描的页面的文件位置为：[entry/src/main/ets/pages/ScanPage.ets]。文件内容如下：

import { QRCodeScanComponent } from "@ohos/scan-component"
@Entry
@Component
struct Scan {
  build() {
    Column() {
      QRCodeScanComponent()
    }
  }
}

内容非常简单，主要是导入的自定义组件QRCodeScanComponent，这个组件的代码来自：[二维码扫描示例应用]，后文我们这样分析如何开发这个二维码扫描应用。

从这一行，可以了解到OpenHarmony应用如何引用ohpm本地三方库。

"@ohos/scan-component":"file:../libs/ohos-qr-code-scan-1.0.1.har",

oh-package.json5配置文件片段如下：

{
  "license": "ISC",
  "devDependencies": {},
  "name": "product",
  "description": "example description",
  "repository": {},
  "version": "1.0.0",
  "dependencies": {
    "@ohos/http": "file:../libs/ohos-http-1.0.0.tgz",
    "@ohos/video-component": "file:../libs/ohos-video-component-1.0.5.tgz",
    "@ohos/details-page-component": "file:../feature/detailPage",
    "@ohos/notification": "file:../libs/ohos-notification-1.0.0.tgz",
    "@ohos/scan-component": "file:../libs/ohos-qr-code-scan-1.0.1.har",
    "@ohos/updatedialog": "file:../libs/ohos-updatedialog-1.0.0.tgz",
    "@ohos/enter-animation": "file:../libs/ohos-enter-animation-1.0.1.tgz",
    "@ohos/share-component": "file:../libs/ohos-sharecomponent-1.0.1.tgz",
    "@ohos/emitter": "file:../feature/emitter",
    "@ohos/navigation-component": "file:../feature/navigationHome"
  }
}

开发步骤

我们来看二维码扫描功能是如何开发的。

导入ohpm三方库

在开发前，我们需要导入ohpm组件库：@ohos/zxing。可以使用命令行方式导入ohpm install @ohos/zxing，也可以直接在文件[entry\oh-package.json5]中配置，如文件片段所示。

可以看出，二维码扫描的核心代码存放在Feature目录，是一个独立的module模块，方便复用：

[“@ohos/feature-qr-code-scan”: “file:…/Feature”]。

文件[entry\oh-package.json5]片段:

  "dependencies": {
    "@ohos/feature-qr-code-scan": "file:../Feature",
    "@ohos/zxing": "^2.0.0"
  }  

相机服务

[CameraService.ets]文件相机服务构造函数中，会创建一个图片接收器。

该图片接收器可以监听’imageArrival’事件，当相机拍照时会触发该事件。在监听事件的回调函数里，实现对拍照的图片进行处理。

CameraService.ets文件相机服务构造函数：

constructor(imgReceiver?: image.ImageReceiver) {
    if (imgReceiver === undefined) {
      this.imageReceiver = image.createImageReceiver(QRCodeScanConst.IMG_DEFAULT_SIZE.WIDTH,
      QRCodeScanConst.IMG_DEFAULT_SIZE.HEIGHT, image.ImageFormat.JPEG, QRCodeScanConst.MAX_IMAGE_CAPACITY)
    } else {
      this.imageReceiver = image.createImageReceiver(imgReceiver.size.width, imgReceiver.size.height,
      imgReceiver.format, imgReceiver.capacity)
    }
  }

在[CameraService.ets]文件创建相机函数中，主要包含如下几个步骤：