纯血鸿蒙APP实战开发——折叠屏扫描二维码方案

折叠屏扫描二维码方案

介绍

本示例介绍使用自定义界面扫码能力在折叠屏设备中实现折叠态切换适配。自定义界面扫码使用系统能力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      // 控制层-二维码扫描控制器

模块依赖

utils

参考资料

• 自定义界面扫码能力
• 属性动画
• 程序访问控制管理

鸿蒙全栈开发全新学习指南

也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线【包含了大厂APP实战项目开发】。

本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

第三阶段：应用开发中高级就业技术

第四阶段：全网首发-工业级南向设备开发就业技术：https://gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开发教学：gitee.com/MNxiaona/733GH

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习资源，请移步前往小编：gitee.com/MNxiaona/733GH