织梦网站地图,个人网页制作总结,网站后台 js框架,移动端网站建设的软件有哪些背景#xff1a;
前几篇学习了元服务#xff0c;后面几期就让我们开发简单的元服务吧#xff0c;里面丰富的内容大家自己加#xff0c;本期案例 仅供参考
先上本期效果图 #xff0c;里面图片自行替换 效果图1完整代码案例如下#xff1a;
Index
import { authentica…背景
前几篇学习了元服务后面几期就让我们开发简单的元服务吧里面丰富的内容大家自己加本期案例 仅供参考
先上本期效果图 里面图片自行替换 效果图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;
}
最近文章
HarmonyOS NEXT实战元服务与应用 APP 发布应用市场的详细步骤与流程
若本文对您稍有帮助诚望您不吝点赞多谢。
有兴趣的同学可以点击查看源码
giteehttps://gitee.com/jiaojiaoone/explore-harmony-next/tree/case%2Fwanandroid/githubhttps://github.com/JasonYinH/ExploreHarmonyNext.git
