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

背景：

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

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

在这里插入图片描述

效果图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 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}});}
}

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