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

介绍

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

效果图预览

使用说明

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

实现思路

1. 创建CommentData类，实现IDataSource接口的对象，用于评论列表使用LazyForEach加载数据。源码参考CommentModel.ets。

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);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2. 点击下方输入提示框，拉起评论输入弹窗。源码参考ImageCommentView.ets。

Text($r('app.string.text_input_hint'))
  ...
  .onClick(() => {
    if (this.dialogController != null) {
      // 打开评论输入弹窗
      this.dialogController.open();
    }
  })
1
2
3
4
5
6
7
8

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

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 "";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

工程结构&模块类型

imagecomment                                    // har类型
|---components
|   |---constants
|       |---Constants.ets                       // 常量类
|   |---model
|       |---CommentModel.ets                    // 评论数据类
|       |---MockCommentData.ets                 // 生成模拟数据
|   |---utils
|       |---CameraUtils.ets                     // 拉起相机工具类
|   |---view
|       |---CommentInputDialog.ets              // 输入评论弹窗
|       |---CommentItemView.ets                 // 单个评论组件
|       |---ImageCommentView.ets                // 评论列表页
|       |---ImageListView.ets                   // 评论图片List组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14

模块依赖

@ohos/routermodule(动态路由)

参考资料

UIAbilityContext

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

也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、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
  声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/520946