HarmonyOS NEXT 实战之元服务：静态案例效果---音乐排行榜

背景：

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

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

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

• Index

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

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column({space:10}) {
      Text($r('app.string.EntryAbility_label')).fontSize(25)

        ListWarningView()


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

  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

      }
    });
  }
}

• ListWarningView

import { LengthMetrics } from "@kit.ArkUI"


export class TabBarModel {
  id: string;
  name: string;

  constructor(id: string, name: string) {
    this.id = id;
    this.name = name;
  }
}


@Preview
@ComponentV2
export struct ListWarningView {
  @Local pixmap: PixelMap | undefined = undefined
  private list: Array<TabBarModel> = []

  aboutToAppear(): void {
    // 周深《解密》
    this.list.push(new TabBarModel('1', '周深《解密》'));
    // 于文文《狼人》
    this.list.push(new TabBarModel('2', '于文文《狼人》'));
    // 周笔畅《孩子气Like A Child》
    this.list.push(new TabBarModel('3', '周笔畅《孩子气Like A Child》'));
    // 易烊千玺《从时间的两端汇合》
    this.list.push(new TabBarModel('4', '易烊千玺《从时间的两端汇合》'));
    // 半吨兄弟《见一面少一面》
    this.list.push(new TabBarModel('5', '半吨兄弟《见一面少一面》'));
    // 吕口口《放纵L》
    this.list.push(new TabBarModel('6', '吕口口《放纵L》'));
    // 单依纯《纯妹妹》
    this.list.push(new TabBarModel('7', '单依纯《纯妹妹》'));
    // 安奕安《夺冠》
    this.list.push(new TabBarModel('8', '安奕安《夺冠》'));
    // 黄霄雲《没语季节》
    this.list.push(new TabBarModel('9', '黄霄雲《没语季节》'));
    // 王大雷《一切都是最好的安排》
    this.list.push(new TabBarModel('10', '王大雷《一切都是最好的安排》'));

  }

  build() {
    NavDestination() {
      List(){


      ForEach(this.list, (item: TabBarModel, index: number) => {
        ListItem(){
        Column() {
          Stack({ alignContent: Alignment.TopStart }) {
            Image($r('app.media.list_warning_no_remove')).width(18).height(20).margin({ top: 1 })
            Text() {
              Span(' '+item.id+'  ')
                .fontColor(Color.White)
                .fontSize(12)
                .fontWeight(FontWeight.Bold)
              ImageSpan($r('app.media.list_waring_goup'))
                .width(20)
                .height(20)

                .borderRadius(4)
                .backgroundColor('#FCEDEC')
                .padding(3)
                .margin({ right: 4,left:5 })
              Span(item.name)
                .fontColor('#222222')
                .fontSize(16)
            }.lineSpacing(LengthMetrics.vp(4))
            .maxLines(2)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
          }

          Row({ space: 12 }) {
            Text() {
              ImageSpan($r('app.media.list_warning_hot')).width(18).verticalAlign(ImageSpanAlignment.CENTER)
              ImageSpan('').width(4)
              Span(generateFiveDigitRandomNumber()+'').fontColor('#FF222222').fontSize(11)
            }

            Text() {
              ImageSpan($r('app.media.list_waring_eye')).width(18).verticalAlign(ImageSpanAlignment.CENTER)
              ImageSpan('').width(4)
              Span(generateFiveDigitRandomNumber()+'').fontColor('#FF222222').fontSize(11)
            }.height(18).textAlign(TextAlign.End)

            Text() {
              ImageSpan($r('app.media.list_warning_message')).width(18).verticalAlign(ImageSpanAlignment.CENTER)
              ImageSpan('').width(4)
              Span(generateFiveDigitRandomNumber()+'').fontColor('#FF222222').fontSize(11)
            }

          }.margin({ top: 10 })

          Row() {

            Text() {
              Span(generateRandomDate()).fontColor('#FF222222').fontSize(11)
              ImageSpan('').width(16)
              Span('腾讯新闻').fontColor('#5090F1').fontSize(11)
            }

            Text() {
              ImageSpan($r('app.media.list_warning_group')).height(18)
              ImageSpan('').width(12)
              ImageSpan($r('app.media.list_warning_more')).height(18)
            }
          }.width('100%').justifyContent(FlexAlign.SpaceBetween).margin({ top: 10 })
          Divider().height(1).backgroundColor('#F0F0F0').margin({ top: 10 })
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)
        .padding({
          left: 12,
          right: 12,
          top: 16,
          bottom: 16
        })


        }
      })
      }
    }.hideTitleBar(true)
  }

  @Builder
  RandomBuilder() {
    Stack() {
      Image($r('app.media.list_warning_no_remove')).width(18).height(20).margin({ top: 1 })
      Text('12')
        .fontColor(Color.White)
        .fontSize(12)
    }.id('root')

  }
}

function generateFiveDigitRandomNumber(): number {
  const min = 10000; // 五位数的最小值
  const max = 99999; // 五位数的最大值
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

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;
}

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')}`;
}

最近文章>>>>>>>>>>>

HarmonyOS NEXT实战：元服务与应用 APP 发布应用市场的详细步骤与流程

有兴趣的同学可以点击查看源码

• gitee：https://gitee.com/jiaojiaoone/explore-harmony-next/tree/case%2Fwanandroid/
• github：https://github.com/JasonYinH/ExploreHarmonyNext.git