纯血鸿蒙APP实战开发——发布图片评论

原创

小帅聊鸿蒙

发布于 2024-12-31 12:33:55

1380

文章被收录于专栏：鸿蒙开发笔记鸿蒙开发笔记

介绍

本示例将通过发布图片评论场景，介绍如何使用startAbilityForResult接口拉起相机拍照，并获取相机返回的数据。

效果图预览

使用说明

通过startAbilityForResult接口拉起相机，拍照后获取图片地址。

实现思路

创建CommentData类，实现IDataSource接口的对象，用于评论列表使用LazyForEach加载数据。

export class CommentData extends BasicDataSource {
  // 懒加载数据
  private comments: Array<Comment> = [];

  // TODO：知识点：获取懒加载数据源的数据长度
  totalCount(): number {
    return this.comments.length;
  }

  // 获取指定数据项
  getData(index: number): Comment {
    return this.comments[index];
  }

  // TODO：知识点：存储数据到懒加载数据源中
  pushData(data: Comment): void {
    this.comments.push(data);
    AppStorage.setOrCreate('commentCount', this.totalCount());
    // 在数组头部添加数据
    this.notifyDataAdd(this.comments.length - 1);
  }
}

点击下方输入提示框，拉起评论输入弹窗。

Text($r('app.string.text_input_hint'))
  ...
  .onClick(() => {
    if (this.dialogController != null) {
      // 打开评论输入弹窗
      this.dialogController.open();
    }
  })

3.在输入弹窗中，输入文字，点击相机按钮，拉起相机，拍照后获得返回的图片地址。

Image($r('app.media.camera'))
  ...
  .onClick(async () => {
    ...
    let image: string = await cameraCapture(getContext(this) as common.UIAbilityContext);
    ...
  })
...
export async function cameraCapture(context: common.UIAbilityContext): Promise<string> {
  let result: common.AbilityResult = await context.startAbilityForResult({
    action: Constants.ACTION_PICKER_CAMERA,
    parameters: {
      'supportMultiMode': false,
      'callBundleName': context.abilityInfo.bundleName
    }
  });
  if (result.resultCode === 0) {
    let param: Record<string, Object> | undefined = result.want?.parameters;
    if (param !== undefined) {
      let resourceUri: string = param[Constants.KEY_RESULT_PICKER_CAMERA] as string;
      return resourceUri;
    }
  }
  return "";
}

DD一下： `鸿蒙开发各类文档，可关注公众号<程序猿百晓生>获取。`

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

4.点击发布按钮，将评论添加到列表中。

Button($r('app.string.publish'))
  ...
  .onClick(() => {
    if (this.controller) {
      this.textInComment = this.text;
      this.imagesInComment = this.selectedImages;
      this.publish();
      this.controller.close();
      this.textInComment = "";
      this.imagesInComment = [];
    }
  })
...
publishComment(): void {
  let comment: Comment = new Comment("Kevin", this.textInComment, $r('app.media.icon_comment_icon_main'), this.imageInComment, this.getCurrentDate());
  this.commentList.pushData(comment);
}

工程结构&模块类型

   imagecomment                                    // har类型
   |---components
   |   |---constants
   |       |---Constants.ets                       // 常量类
   |   |---model
   |       |---CommentModel.ets                    // 评论数据类
   |       |---MockCommentData.ets                 // 生成模拟数据
   |   |---utils
   |       |---CameraUtils.ets                     // 拉起相机工具类
   |   |---view
   |       |---CommentInputDialog.ets              // 输入评论弹窗
   |       |---CommentItemView.ets                 // 单个评论组件
   |       |---ImageCommentView.ets                // 评论列表页
   |       |---ImageListView.ets                   // 评论图片List组件