HarmonyOS Next 教育类应用开发技术剖析（一）

HarmonyOS Next 教育类应用开发技术剖析

概述

在 HarmonyOS Next 教育类应用开发中，实现丰富多样的功能以满足用户的学习需求是关键。下面将介绍如何构建一个具备视频播放、课程展示、考试详情等功能的教育类应用。

核心代码功能及对应代码段

1. 视频播放功能
   • 功能：实现视频的播放、暂停、进度控制、速度调节等功能。
   • 代码段：

@Entry
@Component
export struct AVPlayerDemo {
  // 状态定义
  @Watch('setWindowLayOut') @State isFullScreen: boolean = false;
  // ... 其他状态定义
  private avPlayer: media.AVPlayer | undefined = undefined;

  // 初始化 AVPlayer
  aboutToAppear(): void {
    this.createAVPlayer();
    this.reset()
    // 监听窗口尺寸变化
    this.windowClass.on('windowSizeChange', (data) => {
      // ... 处理窗口尺寸变化逻辑
    });
  }

  // 创建 AVPlayer
  createAVPlayer() {
    media.createAVPlayer().then((video: media.AVPlayer) => {
      if (video != null) {
        this.avPlayer = video;
        this.setAVPlayerCallback(this.avPlayer);
        // ... 设置播放源
      }
    })
  }

  // 注册 avplayer 回调函数
  setAVPlayerCallback(avPlayer: media.AVPlayer) {
    avPlayer.on('timeUpdate', (time: number) => {
      // 更新当前播放时间
    })
    // ... 其他回调函数
  }

  // 播放视频
  async play() {
    if (!this.avPlayer || this.OPERATE_STATE.indexOf(this.avPlayer.state) === -1 ||
      this.OPERATE_STATE.indexOf(this.avPlayer.state) === 1) {
      return;
    }
    this.isPlay = true;
    if (this.avPlayer.state === 'completed') {
      this.currentTime = 0
      this.currentStringTime = '00:00'
      this.avPlayer.seek(1, media.SeekMode.SEEK_PREV_SYNC);
    }
    this.avPlayer.play();
  }
}

2. 课程展示功能
   • 功能：展示课程列表，包括课程图片、标题、教师、学时、进度等信息，并支持点击进入课程详情页。
   • 代码段：

@Component
export struct CourseListComponent {
  @Link CourseList: CourseInfo[]
  pathStack: NavPathStack = AppStorage.get('pathStack') as NavPathStack

  goToDetail(id: number) {
    let obj: IdInfo = new IdInfo(id)
    let params = new NavInfo('培训', JSON.stringify(obj));
    this.pathStack.pushPathByName('CourseDetailPage', params);
  }

  build() {
    Column() {
      if (this.CourseList.length > 0) {
        List({
          space: 10
        }) {
          ForEach(this.CourseList, (item: CourseInfo, index: number) => {
            ListItem() {
              Row() {
                // 展示课程图片
                Stack({
                  alignContent: Alignment.TopStart
                }) {
                  Image(item.img)
                    .width(120)
                    .height(70)
                    .borderRadius(10)
                    .objectFit(ImageFit.Cover)
                  // 显示课程类型
                  Text(item.type == 0 ? '选修' : '必修')
                    // ... 样式设置
                }
                .width(120)
                .height(70)
                .backgroundColor(Color.Pink)
                .borderRadius(10)
                .margin({
                  right: 10
                })

                Column() {
                  // 展示课程标题
                  Text(item.title)
                    .maxLines(2)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                    .textAlign(TextAlign.Start)
                    .width(TrainConstants.FULL_WIDTH)
                    .lineHeight(20)
                    .width(TrainConstants.FULL_WIDTH)
                  // 展示教师和学时信息
                  Row() {
                    Text(`教师：${item.name}`)
                      // ... 样式设置
                    Text(`学时：${item.hour}`)
                      // ... 样式设置
                  }
                  .margin({
                    top: 15,
                    bottom: 5
                  })
                  .width(TrainConstants.FULL_WIDTH)

                  // 展示课程进度
                  Text(`进度：${item.process}%`)
                    .width(TrainConstants.FULL_WIDTH)
                    .fontColor($r('app.color.gray_color'))
                    .fontSize(14)
                }
                .layoutWeight(1)
              }
            }
            .backgroundColor(Color.White)
            .padding(10)
            .borderRadius(10)
            .onClick(() => {
              this.goToDetail(item.id)
            })

          }, (item: CourseInfo) => JSON.stringify(item))
        }
        .alignListItem(ListItemAlign.End)
      } else {
        // 显示缺省图
        EmptyComponent({
          message: '暂无数据'
        })
      }

    }
    .width(TrainConstants.FULL_WIDTH)
    .height(TrainConstants.FULL_HEIGHT)
    .backgroundColor($r('app.color.page_gray_color'))
  }
}