当前位置：首页 > article >正文

HarmonyOS NEXT 实战之元服务：静态案例效果---电台推荐

article 2024/12/26 15:10:44

背景：

前几篇学习了元服务，后面几期就让我们开发简单的元服务吧，里面丰富的内容大家自己加，本期案例仅供参考

先上本期效果图，里面图片自行替换

在这里插入图片描述

效果图1完整代码案例如下：

Index

import { authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { TypeCommonItem } from './TypeCommonItem';

@Entry
@ComponentV2
struct Index {
  build() {
    Column() {
      Text($r('app.string.EntryAbility_label')).fontSize(20)
      List() {
        ForEach(['喜马拉雅：有声书大全电台',
          '荔枝 FM：音乐故事电台',
          '蜻蜓 FM：新闻资讯早班车电台',
          '企鹅 FM：情感治愈谈心电台',
          '网易云音乐电台：小众音乐分享站',
          '懒人听书：国学经典诵读电台'], (item: string) => {
          ListItem() {
            TypeCommonItem({ title: item })
          }

        })


      }

    }
    .alignItems(HorizontalAlign.Start)
    .height('100%')
    .padding(8)
    .width('100%')
    .margin({ top: 40 })
  }

  aboutToAppear() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    this.loginWithHuaweiID();
  }

  /**
   * Sample code for using HUAWEI ID to log in to atomic service.
   * According to the Atomic Service Review Guide, when a atomic service has an account system,
   * the option to log in with a HUAWEI ID must be provided.
   * The following presets the atomic service to use the HUAWEI ID silent login function.
   * To enable the atomic service to log in successfully using the HUAWEI ID, please refer
   * to the HarmonyOS HUAWEI ID Access Guide to configure the client ID and fingerprint certificate.
   */
  private loginWithHuaweiID() {
    // Create a login request and set parameters
    let loginRequest = new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest();
    // Whether to forcibly launch the HUAWEI ID login page when the user is not logged in with the HUAWEI ID
    loginRequest.forceLogin = false;
    // Execute login request
    let controller = new authentication.AuthenticationController();
    controller.executeRequest(loginRequest).then((data) => {
      let loginWithHuaweiIDResponse = data as authentication.LoginWithHuaweiIDResponse;
      let authCode = loginWithHuaweiIDResponse.data?.authorizationCode;
      // Send authCode to the backend in exchange for unionID, session

    }).catch((error: BusinessError) => {
      hilog.error(0x0000, 'testTag', 'error: %{public}s', JSON.stringify(error));
      if (error.code == authentication.AuthenticationErrorCode.ACCOUNT_NOT_LOGGED_IN) {
        // HUAWEI ID is not logged in, it is recommended to jump to the login guide page

      }
    });
  }
}

TypeCommonItem

@Extend(Image)
function imageExtend(width: Length, height: Length) {
  .width(width)
  .height(height)
}

@Preview
@ComponentV2
export struct TypeCommonItem {
  @Param title: string = ''

  build() {
    Column() {
      Row() {
        // CheckBoxSquare({
        //   select: true, onChange: (value) => {
        //     ToastUtil.showToast(`${value}`)
        //   }
        // })
        Column() {
          Text(this.title)

          RelativeContainer() {
            Text(this.getjieshao(this.title) + '')
              .fontSize(13)
              .fontColor('#222222')
              .maxLines(3)
              .lineHeight(18)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .alignRules({
                left: { anchor: '__container__', align: HorizontalAlign.Start },
                right: { anchor: 'stack', align: HorizontalAlign.Start }
              })
              .id('title')
              .padding(8)

            Stack() {
              Image($r('app.media.diantaituijian')).width(48).height(48)
                .position({ x: 30, y: 12 })

              Image($r('app.media.startIcon'))
                .imageExtend(21, 19)

            }
            .alignContent(Alignment.TopEnd)
            .width(108)
            .height(72)
            .backgroundColor('#F2F3F7')
            .borderRadius(4)
            .alignRules({
              right: { anchor: '__container__', align: HorizontalAlign.End }
            })
            .id('stack')
            .offset({ x: -8, y: 8 })

            Row() {
              Text(generateRandomDate())
                .fontSize(11)
                .fontColor('#505050')

            }
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')
            .alignRules({
              left: { anchor: '__container__', align: HorizontalAlign.Start },
              bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
              right: { anchor: '__container__', align: HorizontalAlign.End }
            })
            .id('row_author_avatar')
            .offset({ x: 10, y: -10 })
            .padding({ right: 20 })
          }
          .width('100%')
          .height(90)
          .border({ width: 1, color: '#56DFB6', radius: 8 })
          .margin({ top: 8, bottom: 4 })

          Row() {
            Text(generateRandomDate()).fontSize(11).fontColor('#505050')
            Text(generateFiveCharacterRandomString()).fontSize(11).fontColor("#5090F1").margin({ left: 12, right: 12 })


            Image($r('app.media.startIcon')).width(16).borderRadius(8)
            Text(generateFiveCharacterRandomString()).fontSize(11).fontColor('#505050').margin({ left: 4, right: 4 })
            Image($r('app.media.startIcon')).imageExtend(44, 17)

            Blank()
            Image($r('app.media.ic_item_more')).width(16)


          }.width('100%').height(40)



        }.width('100%').layoutWeight(1)

      }.alignItems(VerticalAlign.Top).margin({ top: 12 })

      Divider()
    }
    .width('100%')
    .padding({ left: 12, right: 12 })
    // .height('100%')
    .backgroundColor(Color.White)
  }

  private getjieshao(title: string) {
    if (title == "喜马拉雅：有声书大全电台") {
      return '介绍：这是一个有声书爱好者的宝藏电台。这里汇聚了各种类型的有声书籍，涵盖古今中外的经典名著、畅销小说、历史传记、科幻奇幻等多个领域。无论是想重温《红楼梦》的细腻情感，还是跟随侦探在悬疑小说中抽丝剥茧，亦或是在科幻世界里畅想未来，这个电台都能满足你的需求。主播们用富有感染力的声音，将书中的情节生动地展现出来，让你在无法阅读书籍的时候，比如开车、做家务或者睡前，都能通过听书的方式沉浸在知识与故事的海洋中。'
    }
    if (title == "荔枝 FM：音乐故事电台") {
      return '介绍：在这个电台，音乐与故事完美交融。每一期节目都会围绕一首或几首歌曲展开一个温暖、感人、励志或者充满回忆的故事。也许是歌手创作歌曲背后的艰辛历程，也许是听众分享的一段与某首歌紧密相连的爱情、友情故事。当悠扬的旋律响起，搭配上深情的讲述，就像一杯热咖啡，在疲惫的生活中给你带来慰藉和感动，让你在聆听音乐的同时，也能感受到人性的美好和生活的多彩。'
    }
    if (title == "蜻蜓 FM：新闻资讯早班车电台") {
      return '介绍：每天清晨，这个电台就像一位可靠的信息使者，为你带来最新鲜、最全面的新闻资讯。它涵盖了国内外的政治、经济、文化、体育等各个领域的新闻事件，并且以简洁明了、重点突出的方式进行播报。主播们声音沉稳、节奏适中，让你在洗漱、吃早餐或者上班路上就能轻松掌握世界动态，开启一天充实的生活，帮助你在快节奏的社会中紧跟时代步伐，不会错过任何重要的消息。'
    }
    if (title == "企鹅 FM：情感治愈谈心电台") {
      return '介绍：当你在生活中遇到挫折、情绪低落或者感到迷茫的时候，这个电台就是你的心灵避风港。主播们用温柔的声音，和你分享关于爱情、亲情、友情等各种情感问题的见解和应对方法。同时，也会有听众的来信分享，让你知道自己不是孤单的，许多人都在经历着类似的情感困境。这里充满了理解、安慰和鼓励，能帮助你舒缓情绪，治愈内心的伤痛，重新找回面对生活的勇气。'
    }
    if (title == "网易云音乐电台：小众音乐分享站") {
      return '介绍：对于那些不满足于主流音乐，热衷于探索小众音乐宝藏的人来说，这个电台是绝佳的选择。它专注于挖掘各种风格的小众音乐，包括独立摇滚、民谣、电子实验音乐、世界音乐等。每一首推荐的歌曲都像是一颗未经雕琢的宝石，等待着听众去发现它的独特魅力。在这里，你可以拓宽自己的音乐视野，邂逅那些被遗忘在角落却极具个性的好音乐，感受小众音乐所带来的新鲜感和艺术氛围。'
    }
    if (title == "懒人听书：国学经典诵读电台") {
      return '介绍：这是一个弘扬中华传统文化的电台，主要内容是国学经典著作的诵读。从《论语》《孟子》等儒家经典，到《道德经》《庄子》等道家智慧，再到唐诗宋词的优美韵律，都能在这里听到。主播们用标准的普通话和恰当的节奏，将这些古老的经典娓娓道来，让你在聆听中感受国学的博大精深。对于想要学习国学知识、提升文化素养或者寻找内心宁静的人来说，这个电台是很好的选择。'
    }

    return ''
  }
}

function generateRandomDate(): string {
  const minYear = 2023; // 最小年份
  const maxYear = 2024; // 最大年份
  const minMonth = 1; // 最小月份
  const maxMonth = 12; // 最大月份
  const minDay = 1; // 最小日期
  const maxDay = 31; // 最大日期

  // 生成随机年份
  const year = Math.floor(Math.random() * (maxYear - minYear + 1)) + minYear;

  // 生成随机月份
  const month = Math.floor(Math.random() * (maxMonth - minMonth + 1)) + minMonth;

  // 根据月份生成合理的日期
  let day = 0;
  if ([1, 3, 5, 7, 8, 10, 12].includes(month)) {
    day = Math.floor(Math.random() * (31 - minDay + 1)) + minDay;
  } else if ([4, 6, 9, 11].includes(month)) {
    day = Math.floor(Math.random() * (30 - minDay + 1)) + minDay;
  } else if (month === 2) {
    // 处理闰年
    if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
      day = Math.floor(Math.random() * (29 - minDay + 1)) + minDay;
    } else {
      day = Math.floor(Math.random() * (28 - minDay + 1)) + minDay;
    }
  }

  // 返回格式化的日期字符串
  return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
}
function generateFiveCharacterRandomString(): string {
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < 5; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
}