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 parameterslet loginRequest = new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest();// Whether to forcibly launch the HUAWEI ID login page when the user is not logged in with the HUAWEI IDloginRequest.forceLogin = false;// Execute login requestlet 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 = undefinedprivate 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)}@BuilderRandomBuilder() {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')}`;
}