背景：
前几篇学习了元服务，后面几期就让我们开发简单的元服务吧，里面丰富的内容大家自己加，本期案例 仅供参考
先上本期效果图 ，里面图片自行替换
效果图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 发布应用市场的详细步骤与流程
有兴趣的同学可以点击查看源码
- gitee：gitee.com/jiaojiaoone…
- github：github.com/JasonYinH/E…
