HarmonyOS NEXT 实战之元服务：静态案例效果---我的热门应用服务

背景：

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

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

在这里插入图片描述

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

Index

import { authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { EventMyItem } from './EventMyItem';export class ListItem1 {img: ResourceStr;title: string;content: string;version: string;constructor(img: ResourceStr, title: string, content: string, version: string) {this.img = img;this.title = title;this.content = content;this.version = version;}
}@Entry
@Component
struct Index {@State message: string = 'Hello World';@State listItem1: ListItem1[] = [new ListItem1($r('app.media.img'), '我爱我家', '北京我爱我家房地产经纪有限...', '版本6.30.0介绍|隐私」权限'),new ListItem1($r('app.media.img_1'), '头条搜索极速版', '北京抖音信息服务有限公司', '版本10.1.3.0|介绍|隐私|权限'),new ListItem1($r('app.media.img_2'), '番茄免费小说', '北京臻鼎科技有限公司', '版本6.5.1.32|介绍|隐私」权限'),new ListItem1($r('app.media.img_3'), '百度极速版', '百度在线网络技术(北京)有...', '版本6.39.0..介绍」隐私」权限'),new ListItem1($r('app.media.img_4'), '上古王冠', '厦门极致互动网络技术股份有...', '版本2.010...介绍」隐私」权限'),new ListItem1($r('app.media.img_5'), '途虎养车', '上海阑途信息技术有限公司', '版本7.3.0I介绍隐私」权限'),new ListItem1($r('app.media.img_6'), '平安证券(享开户礼包)', '平安证券股份有限公司', '版本10.0.1.1|介绍」隐私」权限'),new ListItem1($r('app.media.img_7'), '国泰君安君弘', '国泰君安证券股份有限公司', '版本9.11.30|介绍|隐私|权限'),]build() {Column() {Text($r('app.string.EntryAbility_label')).fontSize(20).margin({ bottom: 10 })List({ space: 6 }) {ForEach(this.listItem1, (item: ListItem1) => {ListItem() {EventMyItem({ data: 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 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}});}
}

Item

import { ListItem1 } from "./Index"@ComponentV2
export struct EventMyItem {@Param data: ListItem1 = new ListItem1('', '', '', '')build() {Column() {Row({ space: 6 }) {Image(this.data.img).width(50).height(50).borderRadius(10)Column({ space: 6 }) {Text(this.data.title).fontColor('#222222').fontSize(16)Text(this.data.content).fontColor('#222222').fontSize(16)Text(this.data.version).fontColor('#222222').fontSize(16)}.alignItems(HorizontalAlign.Start)}.width("100%").justifyContent(FlexAlign.Start).alignItems(VerticalAlign.Top)Row() {this.textNum(generateFiveDigitRandomNumber() + '', '下载量', Color.Red)this.textNum(generateFiveDigitRandomNumber() + '', '上热搜数', '#FFE6960C')}.width("100%").height(48).justifyContent(FlexAlign.SpaceAround)Row() {Image($r('app.media.startIcon')).width(28).padding(6).onClick(() => {})Text(`2024-12-01~${generateRandomDate()}`).fontSize(11).fontColor('#505050').layoutWeight(1)}.width("100%")}.width("100%").margin({ top: 4, bottom: 4 }).padding({right: 12,left: 12,top: 8,bottom: 6}).border({ width: 1, radius: 8, color: '#F0F0F0' }).linearGradient({angle: 45,colors: [["#9975E5", 0.1], [Color.White, 0.9]]})}/** isIncrease:参考AdapterMyEvent 90行 when (statisticsEntity.isIncrease) */@BuildertextNum(num: string, text: string, numFontColor: ResourceColor, isIncrease: number = -1) {Column() {if (isIncrease != -1) {Text() {Span(num)// ImageSpan}.fontSize(14).fontColor(isIncrease == 1 ? numFontColor : (isIncrease == 2 ? '#0BB746' : '#FFE6960C')).fontWeight(FontWeight.Bold)} else {Text(num).fontSize(14).fontColor(numFontColor).fontWeight(FontWeight.Bold)}Text(text).fontSize(10).fontColor('#505050')}}
}function generateRandomDate(): string {const minYear = 2024; // 最小年份const maxYear = 2024; // 最大年份const minMonth = 12; // 最小月份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 = 100; // 五位数的最小值const max = 999; // 五位数的最大值return Math.floor(Math.random() * (max - min + 1)) + min;
}