HarmonyOS鸿蒙Next应用开发快捷实现扫码功能,请解释业务流程和扫码集成步骤

HarmonyOS鸿蒙Next应用开发快捷实现扫码功能,请解释业务流程和扫码集成步骤

鸿蒙应用开发快捷实现扫码功能,请解释业务流程和扫码集成步骤

4 回复

一、结论

鸿蒙提供了扫码Kit, ScanKit。它有两种集成方式,定制化的自定义扫码 和 界面风格与系统一致的一键扫码。

集成快捷扫码,就可以使用一键扫码的使用。

使用一键扫码,不需要单独申请相机权限,因为会直接跳转到系统内置的扫码界面。扫码结果通过回调,应用在回调中处理扫码解析的值。该调用是鸿蒙系统内安全访问级别。会在扫码界面上提示用户。

目前一键扫码的功能已经完全可以满足扫码相关的需求。例如手电筒,设备设备光暗识别。扫码动画。跳转相册选择二维码识别。

并且除了二维码,也支持条码的识别,功能十分强大。并且集成方式异常简单,不超过十行代码即可实现扫码功能。

当然二维码数据解析的处理,需要三方应用根据自己的业务进行处理。

cke_1357.png

二、代码实现

import { scanBarcode, scanCore } from '@kit.ScanKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  private TAG: string = "Index";

  private onToEasyScan = () => {
    let options: scanBarcode.ScanOptions = {
      scanTypes: [scanCore.ScanType.ALL],
      enableMultiMode: true,
      enableAlbum: true
    };
    scanBarcode.startScanForResult(getContext(this), options).then((result: scanBarcode.ScanResult) => {
      // 扫码解析成功,二维码数据
      console.info(this.TAG, " result: " + JSON.stringify(result));
      promptAction.showToast({
        message: result.originalValue
      });
    }).catch((error: BusinessError) => {
      // 扫码解析失败
      console.info(this.TAG, " error: " + JSON.stringify(error));
    });
  }

  build() {
    RelativeContainer() {
      Text("跳转一键扫码")
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(this.onToEasyScan)
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next应用开发快捷实现扫码功能,请解释业务流程和扫码集成步骤的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


默认界面扫码

默认界面扫码能力提供系统级体验一致的扫码界面,包含相机预览流,相册扫码入口,暗光环境闪光灯开启提示。Scan Kit默认界面扫码对系统相机权限进行了预授权且调用期间处于安全访问状态,无需开发者再次申请相机权限。适用于不同扫码场景的应用开发。

说明

通过默认界面扫码可以实现应用内的扫码功能,为了应用更好的体验,推荐同时接入“扫码直达”服务,应用可以同时支持系统扫码入口(控制中心扫一扫)和应用内扫码两种方式跳转到指定服务页面。

场景介绍

默认界面扫码能力提供了系统级体验一致的扫码界面以及相册扫码入口,支持单码和多码识别,支持多种识码类型,请参见ScanType。无需使用三方库就可帮助开发者的应用快速处理各种扫码场景。

默认扫码界面UX:

默认扫码界面UX

业务流程

使用默认界面扫码的主要业务流程如下:

业务流程

  1. 用户向开发者的应用发起扫码请求。
  2. 开发者的应用通过调用Scan Kit的startScanForResult接口启动扫码界面。
  3. 系统首次使用默认界面扫码功能时,会向用户弹出隐私横幅提醒。
  4. 用户可以点击关闭隐私横幅,重新打开应用的扫码界面将不再显示隐私横幅提醒,显示安全访问提示,3s后消失。
  5. Scan Kit通过Callback回调函数或Promise方式返回扫码结果。
  6. 用户进行多码扫描时,需点击选择其中一个码图获取扫码结果返回。单码扫描则可直接返回扫码结果。
  7. 解析码值结果跳转应用服务页。

接口说明

接口返回值有两种返回形式:Callback和Promise回调。下表中为默认界面扫码Callback和Promise形式接口,Callback和Promise只是返回值方式不一样,功能相同。startScanForResult接口打开的是应用内呈现的扫码界面样式。具体API说明详见接口文档

接口名 描述
startScanForResult(context: common.Context, options?: ScanOptions): Promise<ScanResult> 启动默认界面扫码,通过ScanOptions进行扫码参数设置,使用Promise异步回调返回扫码结果。
startScanForResult(context: common.Context, options: ScanOptions, callback: AsyncCallback<ScanResult>): void 启动默认界面扫码,通过ScanOptions进行扫码参数设置,使用Callback异步回调返回扫码结果。
startScanForResult(context: common.Context, callback: AsyncCallback<ScanResult>): void 启动默认界面扫码,使用Callback异步回调返回扫码结果。

说明

startScanForResult接口需要在页面和组件的生命周期内调用。若需要设置扫码页面为全屏或沉浸式,请参见开发应用沉浸式效果

开发步骤

Scan Kit提供了默认界面扫码的能力,由扫码接口直接控制相机实现最优的相机放大控制、自适应的曝光调节、自适应对焦调节等操作,保障流畅的扫码体验,减少开发者的工作量。

为了方便开发者接入,我们提供了详细的样例工程供参考,推荐参考示例工程接入。

以下示例为调用Scan Kit的startScanForResult接口跳转扫码页面。

  1. 导入默认界面扫码模块,scanCore提供扫码类型定义,scanBarcode提供拉起默认界面扫码的方法和参数,导入方法如下。
  2. 调用startScanForResult方法拉起默认界面扫码。
  3. 通过Promise方式得到扫码结果。
  4. 通过Callback回调函数得到扫码结果。
import { scanCore, scanBarcode } from '@kit.ScanKit';
// 导入默认界面扫码需要的日志模块和错误码模块
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct ScanBarCodePage {
  build() {
    Column() {
      Row() {
        Button("Promise with options")
          .backgroundColor('#0D9FFB')
          .fontSize(20)
          .fontColor($r('sys.color.comp_background_list_card'))
          .fontWeight(FontWeight.Normal)
          .align(Alignment.Center)
          .type(ButtonType.Capsule)
          .width('90%')
          .height(40)
          .margin({ top: 5, bottom: 5 })
          .onClick(() => {
            // 定义扫码参数options
            let options: scanBarcode.ScanOptions = {
              scanTypes: [scanCore.ScanType.ALL],
              enableMultiMode: true,
              enableAlbum: true
            };
            try {
              // 可调用getHostContext接口获取当前页面关联的Context
              scanBarcode.startScanForResult(this.getUIContext().getHostContext(), options).then((result: scanBarcode.ScanResult) => {
                // 解析码值结果跳转应用服务页
                hilog.info(0x0001, '[Scan CPSample]', `Succeeded in getting ScanResult by promise with options, result is ${JSON.stringify(result)}`);
              }).catch((error: BusinessError) => {
                hilog.error(0x0001, '[Scan CPSample]',
                  `Failed to get ScanResult by promise with options. Code:${error.code}, message: ${error.message}`);
              });
            } catch (error) {
              hilog.error(0x0001, '[Scan CPSample]',
                `Failed to start the scanning service. Code:${error.code}, message: ${error.message}`);
            }
          })
      }
      .height('100%')
    }
    .width('100%')
  }
}
@Entry
@Component
struct ScanBarCodePage {
  build() {
    Column() {
      Row() {
        Button('Callback with options')
          .backgroundColor('#0D9FFB')
          .fontSize(20)
          .fontColor($r('sys.color.comp_background_list_card'))
          .fontWeight(FontWeight.Normal)
          .align(Alignment.Center)
          .type(ButtonType.Capsule)
          .width('90%')
          .height(40)
          .margin({ top: 5, bottom: 5 })
          .onClick(() => {
            // 定义扫码参数options
            let options: scanBarcode.ScanOptions = {
              scanTypes: [scanCore.ScanType.ALL],
              enableMultiMode: true,
              enableAlbum: true
            };
            try {
              // 可调用getHostContext接口获取当前页面关联的Context
              scanBarcode.startScanForResult(this.getUIContext().getHostContext(), options,
                (error: BusinessError, result: scanBarcode.ScanResult) => {
                  if (error) {
                    hilog.error(0x0001, '[Scan CPSample]',
                      `Failed to get ScanResult by callback with options. Code: ${error.code}, message: ${error.message}`);
                    return;
                  }
                  // 解析码值结果跳转应用服务页
                  hilog.info(0x0001, '[Scan CPSample]', `Succeeded in getting ScanResult by callback with options, result is ${JSON.stringify(result)}`);
                })
            } catch (error) {
              hilog.error(0x0001, '[Scan CPSample]',
                `Failed to start the scanning service. Code:${error.code}, message: ${error.message}`);
            }
          })
      }
      .height('100%')
    }
    .width('100%')
  }
}

HarmonyOS Next扫码功能开发指南

HarmonyOS Next的扫码功能基于ArkTS开发,业务流程为:应用调用系统扫码服务,用户授权后启动摄像头扫描,系统解析二维码并返回结果数据。

集成步骤

  1. 权限申请:在module.json5配置文件中申请ohos.permission.CAMERA权限。
  2. 导入接口:导入@ohos.systemCapability子系统接口。
  3. 创建扫码工具类:调用scanCode API启动扫码界面。
  4. 处理结果:在回调函数中处理扫码结果,系统会自动返回解析出的数据字符串。

整个过程无需处理摄像头底层操作,由系统服务完成图像采集与解码。

在HarmonyOS Next中实现扫码功能,主要业务流程为:应用启动扫码组件 → 调用系统相机或使用自定义界面捕获图像 → 通过系统服务识别图像中的条形码或二维码 → 将识别结果返回给应用进行后续处理。

集成步骤如下:

  1. 配置权限与依赖module.json5 文件中声明必要的权限:

    "requestPermissions": [
      {
        "name": "ohos.permission.CAMERA"
      },
      {
        "name": "ohos.permission.READ_IMAGEVIDEO"
      }
    ]
    

    package.json 中引入 [@ohos](/user/ohos)/zbar 等扫码库依赖。

  2. 调用扫码组件 使用系统提供的 ScanKit 或第三方库(如 ZBar)的 API 启动扫码。基本代码结构:

    import scanManager from '[@ohos](/user/ohos)/zbar';
    // 初始化配置
    let scanOption = { formats: ['QR_CODE'] };
    // 启动扫码界面
    scanManager.scan(scanOption, (err, result) => {
      if (err) { /* 处理错误 */ }
      // 处理扫码结果 result.codeText
    });
    
  3. 处理扫码结果 在回调函数中获取解析出的字符串(如 URL、文本),根据业务逻辑进行跳转、数据验证或本地存储等操作。

  4. 自定义界面(可选) 若需自定义扫码 UI,可通过 Camera 组件获取实时画面,结合扫码库的识别方法在后台处理帧数据,并自行绘制扫描框、动画等界面元素。

关键点:确保相机权限已动态申请并授予,扫码格式需根据业务需求配置(如 QR_CODEEAN_13)。使用系统 ScanKit 可简化集成,但需注意其支持的格式范围。

回到顶部