【HarmonyOS 5】金融应用开发鸿蒙组件实践

// 导入人脸识别功能模块
import { interactiveLiveness } from '@kit.VisionKit';
// 导入业务错误处理模块
import { BusinessError } from '@kit.BasicServicesKit';
// 导入日志记录模块
import { hilog } from '@kit.PerformanceAnalysisKit';
// 导入权限控制相关模块
import { abilityAccessCtrl, common } from '@kit.AbilityKit';
// 导入提示框组件
import { promptAction } from '@kit.ArkUI';
// 导入应用包管理模块
import { bundleManager } from '@kit.MDMKit';
/**
 * 人脸活体检测页面组件
 * 提供相机权限申请和交互式人脸活体检测功能
 */
@Entry
@Component
struct FaceLivenessPage {
  // 记录用户是否已授予相机权限的状态
  @State userGrant: boolean = false;
  /**
   * 向用户申请相机权限
   * @returns 权限申请结果数组，0表示授权成功
   */
  private async reqPermissionsFromUser(): Promise<number[]> {
    // 获取当前UI上下文
    let context = getContext() as common.UIAbilityContext;
    // 创建权限管理实例
    let atManager = abilityAccessCtrl.createAtManager();
    // 发起相机权限申请
    let grantStatus = await atManager.requestPermissionsFromUser(context, ['ohos.permission.CAMERA']);
    return grantStatus.authResults;
  }
  /**
   * 处理相机权限申请流程
   */
  private async requestCameraPermission() {
    // 获取权限申请结果
    let grantStatus = await this.reqPermissionsFromUser();
    // 遍历结果检查是否授权成功
    for (let i = 0; i < grantStatus.length; i++) {
      if (grantStatus[i] === 0) {
        // 授权成功，更新状态并提示用户
        this.userGrant = true;
        promptAction.showToast({
          message: "授权成功!"
        });
      }
    }
  }
  /**
   * 权限申请按钮点击事件处理函数
   */
  onClickPermission = () => {
    this.requestCameraPermission();
  }
  /**
   * 人脸活体检测按钮点击事件处理函数
   */
  onClickFaceLiv = () => {
    // 检查是否有相机权限
    if (!this.userGrant) {
      promptAction.showToast({
        message: "无相机权限！"
      });
      return;
    }
    // 配置活体检测模式为交互式
    let isSilentMode = "INTERACTIVE_MODE" as interactiveLiveness.DetectionMode;
    // 配置需要完成的动作数量为3个
    let actionsNum = 3 as interactiveLiveness.ActionsNumber;
    // 配置活体检测参数
    let routerOptions: interactiveLiveness.InteractiveLivenessConfig = {
      actionsNum: actionsNum,         // 动作数量
      isSilentMode: isSilentMode,     // 检测模式
      routeMode: "back" as interactiveLiveness.RouteRedirectionMode // 检测完成后返回方式
    };
    
    // 启动人脸活体检测
    interactiveLiveness.startLivenessDetection(routerOptions, (err: BusinessError, result: interactiveLiveness.InteractiveLivenessResult | undefined) => {
      if (err.code !== 0 && !result) {
        // 检测失败，记录错误日志
        hilog.error(0x0001, "LivenessCollectionIndex", `Failed to detect. Code：${err.code}，message：${err.message}`);
        return;
      }
      // 检测成功，记录结果日志并提示用户
      hilog.info(0x0001, 'LivenessCollectionIndex', `Succeeded in detecting result：${JSON.stringify(result)}`);
      promptAction.showToast({
        message: JSON.stringify(result)
      });
    });
  }
  /**
   * 定义按钮通用样式
   */
  @Styles commonText() {
    .width(px2vp(600))      // 设置宽度
    .height(px2vp(120))     // 设置高度
    .backgroundColor(Color.Blue) // 设置背景色
    .borderRadius(15)       // 设置圆角
  }
  /**
   * 组件UI构建函数
   */
  build() {
    Column() {
      // 权限申请按钮
      Text("请求相机权限")
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
        .commonText()           // 应用通用样式
        .onClick(this.onClickPermission) // 绑定点击事件
        .margin({
          bottom: px2vp(60)     // 设置底部边距
        })
      // 人脸检测按钮
      Text("人脸活体检测")
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
        .commonText()           // 应用通用样式
        .onClick(this.onClickFaceLiv)   // 绑定点击事件
    }
    .height('100%')           // 设置高度为全屏
    .width('100%')            // 设置宽度为全屏
    .justifyContent(FlexAlign.Center) // 垂直居中对齐
    .backgroundColor(Color.Black)     // 设置背景色
  }
}

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { BusinessError } from '@kit.BasicServicesKit';
/**
 * 相册图片选择
 */
@Entry
@Component
struct AlbumPage {
  private TAG: string = "AlbumPage";
  onClickSelectPhoto = ()=>{
    try {
      let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
      // 设置筛选过滤条件
      PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
      // 选择用户选择数量
      PhotoSelectOptions.maxSelectNumber = 1;
      // 添加图片目标筛选类型
      let recommendOptions: photoAccessHelper.RecommendationOptions = {
        recommendationType: photoAccessHelper.RecommendationType.ID_CARD | photoAccessHelper.RecommendationType.BANK_CARD | photoAccessHelper.RecommendationType.QR_CODE
      }
      PhotoSelectOptions.recommendationOptions = recommendOptions;
      // 实例化图片选择器
      let photoPicker = new photoAccessHelper.PhotoViewPicker();
      // 唤起安全相册组件
      photoPicker.select(PhotoSelectOptions, (err: BusinessError, PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
        if (err) {
          console.error(this.TAG, "onClickSelectPhoto photoPicker.select error:" + JSON.stringify(err));
          return;
        }
        // 用户选择确认后，会回调到这里。
        console.info(this.TAG, "onClickSelectPhoto photoPicker.select successfully:" + JSON.stringify(PhotoSelectResult));
      });
    } catch (error) {
      let err: BusinessError = error as BusinessError;
      console.error(this.TAG, "onClickSelectPhoto photoPicker.select catch failed:" + JSON.stringify(err));
    }
  }
  build() {
    Row(){
      Button('点击唤起相册选择')
        .onClick(this.onClickSelectPhoto)
    }
    .justifyContent(FlexAlign.Center)
    .size({
      width: "100%",
      height: "100%"
    })
  }
}

import { scanBarcode, scanCore } from '@kit.ScanKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { promptAction } from '@kit.ArkUI';
@Entry
@Component
struct ScanPage {
  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%')
  }
}