纯血鸿蒙APP实战开发—如何实现二维码扫码识别

二维码的应用场景非常广泛，在购物应用中，消费者可以直接扫描商品二维码，浏览并购买产品，本文就以橘子购物示例应用为例，来讲解OpenHarmony应用二维码开发相关的技术点。

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

• 二维码生成

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

• 二维码解析

OpenHarmony提供了功能强大的三方库 @ohos/zxing，是一个解析/生成一维码/二维码的库。详细内容可以参考https://gitee.com/openharmony-tpc/zxing

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

橘子购物示例应用：https://gitee.com/openharmony/applications_app_samples/tree/master/code/Solutions/Shopping/OrangeShopping

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

配置文件

了解了二维码相关的概念后，我们看下橘子购物示例应用的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.heig