鸿蒙开发5.0【折叠屏扫描二维码】方案

本示例介绍使用自定义界面扫码能力在折叠屏设备中实现折叠态切换适配。自定义界面扫码使用系统能力customScan，其提供相机流的初始化、启动扫码、识别、停止扫码、释放相机流资源等能力。折叠屏折叠状态通过监听display的foldStatusChange事件实现。

效果图预览

使用说明

1. 用户授权相机扫码。
2. 对准二维码即可识别展示，支持多二维码识别。
3. 支持打开相机闪光灯。
4. 折叠态不同，相机流的尺寸也不同，因此折叠态变更时，扫码服务会重新初始化。

实现思路

1.相机权限需要用户授权。

// 向用户申请授权

let context = getContext() as common.UIAbilityContext;

let atManager = abilityAccessCtrl.createAtManager();

let grantStatusArr = await atManager.requestPermissionsFromUser(context, [ 'ohos.permission.CAMERA' ]);

const grantStatus = grantStatusArr.authResults[0];

2.依赖XComponent展示相机流内容，在加载完相机流后启动相机扫码服务。

// TODO：知识点：相机流显示依赖XComponent

XComponent({

  id: CommonConstants.CAMERA_XCOMPONENT_ID,

  type: CommonConstants.CAMERA_XCOMPONENT_TYPE,

  controller: this.cameraSurfaceController

})

  .onLoad(() => {

    // TODO：知识点：customScan依赖XComponent组件的surfaceId，对图像进行扫描

    this.customScanVM.surfaceId = this.cameraSurfaceController.getXComponentSurfaceId();

    // TODO：知识点：XComponent加载完成后，启动相机进行扫码

    this.customScanVM.startCustomScan();

  })

3.二维码识别通过customScan系统能力在启动扫描之后，通过异步任务监控相机图像，对识别到的内容直接返回处理。

try {

  const viewControl: customScan.ViewControl = {

    width: this.cameraCompWidth,

    height: this.cameraCompHeight,

    surfaceId: this.surfaceId

  };

  customScan.start(viewControl)

    .then((result: Array<scanBarcode.ScanResult>) => {

      // 处理扫码结果

      this.showScanResult(result);

    })

} catch (error) {

  logger.error('start fail, error: %{public}s ', JSON.stringify(error));

}

4.识别到的数据为一个结果数组，每一个结果包括识别到的码源信息和二维码图像所在屏幕的坐标。

let showMsg: string = '';

// 处理扫码结果

scanResult.forEach((result: scanBarcode.ScanResult) => {

  // 码源信息

  const originalValue: string = result.originalValue;

  // 二维码在屏幕上的位置

  const scanCodeRect: scanBarcode.ScanCodeRect | undefined = result.scanCodeRect;



  if (scanCodeRect) {

    showMsg += `内容: ${originalValue}\n坐标: ${JSON.stringify(scanCodeRect)}\n`;

  }

})

5.折叠屏设备上，依赖display的屏幕状态事件，监听屏幕折叠状态变更，通过对折叠状态的分析，更新XComponent尺寸并重新启动扫码服务。

display.on('foldStatusChange', async (curFoldStatus: display.FoldStatus) => {

  // 同一个状态重复触发不做处理

  if (this.curFoldStatus === curFoldStatus) {

    return;

  }



  // 缓存当前折叠状态

  this.curFoldStatus = curFoldStatus;



  if (this.curFoldStatus === display.FoldStatus.FOLD_STATUS_EXPANDED

    || this.curFoldStatus === display.FoldStatus.FOLD_STATUS_FOLDED) {

    // 当前没有相机流资源，只更新相机流宽高设置

    if (!this.surfaceId) {

      this.updateCameraCompSize();

      return;

    }



    // 关闭闪光灯

    this.tryCloseFlashLight();

    setTimeout(() => {

      // 释放扫码资源

      this.releaseCustomScan();

      // 重新启动扫码

      this.restartCustomScan();

    }, 10)

  }

})

工程结构& 模块类型

customscan                           // har类型

  |---common

  |   |---constants

  |   |    |---CommonConstants.ets     // 通用常量

  |---components

  |   |---CustomScanCameraComp.ets     // 自定义组件-二维码扫描相机流组件

  |   |---CustomScanCtrlComp.ets       // 自定义组件-二维码扫描控制菜单组件

  |---model

  |   |---PermissionModel.ets          // 模型层-权限控制管理器

  |   |---WindowModel.ets              // 模型层-窗口管理器 

  |---pages

  |   |---CustomScanPage.ets           // 展示层-二维码扫描页面 

  |---viewmodel

  |   |---CustomScanViewModel.ets      // 控制层-二维码扫描控制器

以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解；想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到！
下面是鸿蒙的完整学习路线，展示如下：

除此之外，根据这个学习鸿蒙全栈学习路线，也附带一整套完整的学习【文档+视频】，内容包含如下：

内容包含了：（ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战）等技术知识点。帮助大家在学习鸿蒙路上快速成长！

鸿蒙【北向应用开发+南向系统层开发】文档

鸿蒙【基础+实战项目】视频

鸿蒙面经

为了避免大家在学习过程中产生更多的时间成本，对比我把以上内容全部放在了↓↓↓想要的可以自拿喔！谢谢大家观看！