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

HarmonyOS NEXT 实战之元服务：静态案例效果---我的生活记录

article 2024/12/28 8:06:10

背景：

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

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

在这里插入图片描述

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

Index

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

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

  build() {
    Column() {
      Text($r('app.string.EntryAbility_label')).fontSize(20).margin({ bottom: 10 })
      List({ space: 6 }) {
        ForEach([
          "参加了一场行业研讨会，会上各路精英分享他们在专业领域的见解与经验。其中一位资深专家对未来趋势的精准剖析，让我深刻意识到自身知识储备的不足，也明确了未来努力提升的方向，仿佛在迷雾中看到了一盏指引前行的明灯，心中充满了奋斗的动力。",
          "在公园散步时，看到一位老人专注地用画笔描绘着眼前的风景。他沉浸在自己的世界里，不受外界干扰，每一笔都倾注着对生活的热爱和对美的追求。那一刻，我明白了生活中的美好无处不在，只要我们拥有一颗善于发现和感受的心，即使是平凡的事物也能绽放出独特的魅力，也让我反思自己平日里是否过于匆忙，忽略了身边的小确幸。",
          "阅读了《百年孤独》这本书。书中家族的兴衰沉浮、人物的命运交织以及对时间和记忆深刻的描写，如同一把钥匙，打开了我对人生、对历史、对人性思考的新大门。那些充满奇幻色彩却又无比真实的故事，让我领悟到生命的孤独与坚韧，以及人类在历史长河中的渺小与伟大，使我对生活有了更深层次的理解和敬畏。",
          "与许久未见的老友相聚。我们一起回忆过去的趣事，分享各自生活中的喜怒哀乐。在欢声笑语中，我感受到了友情的珍贵与温暖，也意识到在忙碌的生活中，不能忘记与身边重要的人保持联系，他们是我们心灵的慰藉和力量的源泉，真正的情谊不会被时间和距离冲淡，只会在岁月的沉淀下愈发醇厚。",
          "观看了一场日出。当太阳从地平线缓缓升起，金色的光芒洒遍大地，万物渐渐苏醒，那种大自然赋予的震撼与生机让我心潮澎湃。在这壮丽的景象面前，我心中的烦恼和压力瞬间变得微不足道。它让我懂得要珍惜每一个新的开始，以积极乐观的心态迎接每一天的到来，无论生活中遭遇何种困难，都要像太阳一样，始终散发着希望与光芒。",
          "尝试学习一门新的手工技艺——陶艺制作。在陶泥与双手的不断接触中，我体验到了创造的乐趣与艰辛。从最初的不成形到逐渐有了模样，每一个步骤都需要耐心与专注。这个过程让我明白，生活就像制作陶艺，需要我们用心去塑造，不怕失败，在不断的尝试与摸索中，才能收获属于自己的独特成果，也让我学会在快节奏的生活中，给自己留出时间去专注于一件事，享受过程带来的满足感。"
        ], (item: string,index:number) => {
          ListItem() {
            EventHotItem({ title: item,index:index })
          }

        })


      }

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

      }
    });
  }
}

Item


@Extend(Text)
function textExtend(fontSize: number, fontColor: ResourceColor) {
  .fontSize(fontSize)
  .fontColor(fontColor)
  .maxLines(5)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
}

@Preview
@ComponentV2
export struct EventHotItem {
  @Param title: string = ''
  //下标
  @Param  index: number = 0;
  build() {
    Stack() {
      Column({ space: 8 }) {
        Text(this.title)
          .lineHeight(20)
          .textExtend(16, '#222222')

        Row() {
          Text(generateRandomDate())
            .textExtend(11, '#505050')

          Row({ space: 4 }) {
            Image($r('app.media.ic_hot')).width(16).height(16)
            Text(generateFiveDigitRandomNumber() + '')
              .textExtend(12, '#E65441').fontWeight(FontWeight.Bold)
          }

        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .padding(12)
      .margin({ left: 8 })
      .alignItems(HorizontalAlign.Start)
      //参考 EventHotAdapter 30行
      .border({
        width: 1,
        color: this.getBorderColor(),
        radius: 8
      })
      .linearGradient({
        angle: 0,
        colors: [[Color.White, 0.1], [this.getLinearGradientColor(), 0.9]]
      })

      Text(`${this.index + 1}`)
        .width(16)
        .height(24)
        .textExtend(11, Color.White)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 6 })
        .padding({ top: 7 })
        .textAlign(TextAlign.Center)//backgroundImage 不支持svg类型的图片 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-universal-attributes-background-0000001477981165-V2
        .backgroundImage(this.getTextBg())
        .backgroundImageSize(ImageSize.Cover)

    }
    .width('100%')
    .margin({ top: 8 })
    .padding({ left: 4, right: 12 })
    .alignContent(Alignment.TopStart)
  }

  getBorderColor(): ResourceColor {
    return this.index == 0 ? '#FCEDEC' : (this.index == 1 ? '#FCF4E' : (this.index == 2 ? "#EDF3FD" : '#F0F0F0'));
  }

  getLinearGradientColor(): ResourceColor {
    return this.index == 0 ? '#FCEDEC' : (this.index == 1 ? '#FCF4E' : (this.index == 2 ? "#EDF3FD" : Color.White));
  }

  getTextBg(): ResourceStr {
    return this.index == 0 ? $r('app.media.ic_hot_index_1') :
      (this.index == 1 ? $r('app.media.ic_hot_index_2') :
        (this.index == 2 ? $r('app.media.ic_hot_index_3') : $r('app.media.ic_hot_index_default')));
  }
}


function generateRandomDate(): string {
  const minYear = 2024; // 最小年份
  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 generateFiveDigitRandomNumber(): number {
  const min = 10000; // 五位数的最小值
  const max = 99999; // 五位数的最大值
  return Math.floor(Math.random() * (max - min + 1)) + min;
}