背景：
前几篇学习了元服务，后面几期就让我们开发简单的元服务吧，里面丰富的内容大家自己加，本期案例 仅供参考
先上本期效果图 ，里面图片自行替换
效果图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 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 } }); }}
-
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 = undefined
private 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) } @Builder RandomBuilder() { 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')}`;}
最近文章>>>>>>>>>>>
HarmonyOS NEXT实战：元服务与应用 APP 发布应用市场的详细步骤与流程
若本文对您稍有帮助，诚望您不吝点赞，多谢。