HarmonyOS NEXT 实战之元服务:静态案例效果(二)

news/2024/12/26 22:23:49/

背景:

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

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

在这里插入图片描述

效果图代码案例如下:

  • Index里面实现
import { authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { AddressExchangeViewComponent } from './AddressExchangeViewComponent';export const DATA_CONFIG: Record<string, number> = {'NUMBER_LEN': 7, // 数字个数'DURATION_TIME': 200, // 动画时长'MILLENNIAL_LEN': 3 // 千分位长度
}export const STYLE_CONFIG: Record<string, number> = {'ITEM_GUTTER': 12, // 元素间距'ITEM_HEIGHT': 26, // 数字元素高度'TEXT_MARGIN': 2, // 文本间距'PADDING_TOP': 32  // 顶部边距
}@Entry
@Component
struct Index {build() {Column({ space: STYLE_CONFIG.ITEM_GUTTER }) {Text($r('app.string.EntryAbility_label')).fontColor(Color.White).fontSize($r('sys.float.ohos_id_text_size_headline8')).width($r('app.string.digital_scroll_animation_max_size')).textAlign(TextAlign.Start).margin({left:25})Row({ space: 10 }) {Text(this.getDate()).fontSize($r('app.string.ohos_id_text_size_headline')).fontWeight(FontWeight.Medium).height(30).fontColor(Color.White)Text('天气  多云 18℃').height(30)}.width('100%').margin({left:15})AddressExchangeViewComponent()}.padding({top: STYLE_CONFIG.PADDING_TOP}).margin({ top: 60 }).width($r('app.string.digital_scroll_animation_max_size')).height($r('app.string.digital_scroll_animation_max_size')).linearGradient({colors: [[$r('app.color.digital_scroll_animation_background_color'), 0.0],[$r('sys.color.ohos_id_color_background'), 0.3]]})}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}});}private getDate() {const now = new Date();const year = now.getFullYear();const month = now.getMonth() + 1; // 注意:月份是从0开始计数的const day = now.getDate();const hours = now.getHours();const minutes = now.getMinutes();const seconds = now.getSeconds();return `${year} 年 ${month} 月 ${day} 日`}
}
  • AddressExchangeViewComponent 里面实现
import { promptAction } from "@kit.ArkUI"@Preview
@Component
export struct AddressExchangeViewComponent {build() {Column({ space: 16 }) {Row() {Text('附近汽车租赁门店').fontSize(18).fontColor(Color.Black)Text('查看更多>').fontSize(15).fontColor(Color.Black)}.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10).onClick(() => {})Row({ space: 20 }) {Column({ space: 10 }) {Text() {Span('小王汽车租赁门店')}.fontWeight(FontWeight.Bold).fontSize(13)Row({space:4}) {Image($r('app.media.weizhi')).width(18).height(18)Text('距离1.02km').fontSize(10).fontColor('#5EB761')}Text('预计3分钟路程').fontSize(10).fontColor('#2EB59F')}.width('40%').borderRadius(4).backgroundColor('#F5F9F8').padding(8).alignItems(HorizontalAlign.Start)Column({ space: 10 }) {Text() {Span('小贾汽车租赁门店')}.fontWeight(FontWeight.Bold).fontSize(13)Row({space:4}) {Image($r('app.media.weizhi')).width(18).height(18)Text('距离5km').fontSize(10).fontColor('#5EB761')}Text('预计23分钟路程').fontSize(10).fontColor('#2EB59F')}.width('40%').borderRadius(4).backgroundColor('#F5F9F8').padding(8).alignItems(HorizontalAlign.Start)}Row({ space: 20 }) {Column({ space: 10 }) {Text() {Span('小明汽车租赁门店')}.fontWeight(FontWeight.Bold).fontSize(13)Row({space:4}) {Image($r('app.media.weizhi')).width(18).height(18)Text('距离1.02km').fontSize(10).fontColor('#5EB761')}Text('预计3分钟路程').fontSize(10).fontColor('#2EB59F')}.width('40%').borderRadius(4).backgroundColor('#F5F9F8').padding(8).alignItems(HorizontalAlign.Start)Column({ space: 10 }) {Text() {Span('小朱汽车租赁门店')}.fontWeight(FontWeight.Bold).fontSize(13)Row({space:4}) {Image($r('app.media.weizhi')).width(18).height(18)Text('距离5km').fontSize(10).fontColor('#5EB761')}Text('预计23分钟路程').fontSize(10).fontColor('#2EB59F')}.width('40%').borderRadius(4).backgroundColor('#F5F9F8').padding(8).alignItems(HorizontalAlign.Start)}Button($r('app.string.EntryAbility_label')).fontColor(Color.White).height(40).backgroundColor('#5EB761').width(200).onClick(() => {promptAction.showToast({message: '今日机器出现故障,请找工作室人员解决'});})Row() {Text('我的服务').fontSize(18).fontColor(Color.Black)Text('查看更多 >').fontSize(15).fontColor(Color.Black)}.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10).onClick(() => {})Column() {Row() {this.msgRelated($r('app.media.j1'), '我的优惠', () => {})this.msgRelated($r('app.media.j3'), '邀请有奖', () => {})this.msgRelated($r('app.media.j4'), '收藏/看过', () => {})}.width('95%').height(80).margin({top: 10,left: 12,right: 12}).backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround)}.width('95%').height(80).margin({top: 10,bottom: 4,left: 12,right: 12}).borderRadius(10).borderWidth(1).borderColor('#35B6BD').backgroundColor(Color.White).justifyContent(FlexAlign.SpaceAround)}.width($r('app.string.address_exchange_content_size')).height(178).margin($r('app.string.ohos_id_card_margin_start'))}//消息相关@BuildermsgRelated(src: Resource, title: string, onClick?: () => void) {Column() {Image(src).width(24)Text(title).fontSize(11).fontColor('#222222').margin({ top: 8 })}.onClick(() => {onClick?.()})}}

最近文章>>>>>>>>>>>

HarmonyOS NEXT实战:元服务与应用 APP 发布应用市场的详细步骤与流程

若本文对您稍有帮助,诚望您不吝点赞,多谢。

有兴趣的同学可以点击查看源码

  • gitee:https://gitee.com/jiaojiaoone/explore-harmony-next/tree/case%2Fwanandroid/
  • github:https://github.com/JasonYinH/ExploreHarmonyNext.git

http://www.ppmy.cn/news/1558366.html

相关文章

云原生后端开发(一)

云原生后端开发 云原生&#xff08;Cloud-Native&#xff09;是指一种构建和运行应用程序的方式&#xff0c;它充分利用了云计算的特点&#xff0c;比如弹性伸缩、自动化部署、容器化等。在云原生的架构下&#xff0c;后端应用通常具备高度可扩展、可维护、易于自动化管理的特…

大数据新视界 -- Hive 数据生命周期管理:数据归档与删除策略(2 - 16 - 11)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

C# 第二阶段 modbus

1&#xff1a;nuget添加依赖 新建项目后&#xff0c;添加NModbus&#xff0c; 2&#xff1a;测试软件&#xff1a;Modbus slave ,新建一个从站&#xff0c;并连接 3&#xff1a;通信测试 4&#xff1a;本次学到的内容 4.1&#xff1a;用的DockPanel标签&#xff0c;使其能自适…

解决在vue3+vite+element-plus 中echarts在el-dialog无法正常显示问题

核心&#xff1a;在dom加载完成后调用echarts实例 的resize()方法 这里是一个例子 这里封装一个echarts <template><div class"container" ref"container"></div> </template> <script lang"ts" setup> import {…

如何使用 WebAssembly 扩展后端应用

1. WebAssembly 简介 随着互联网的发展&#xff0c;越来越多的应用借助 Javascript 转到了 Web 端&#xff0c;但人们也发现&#xff0c;随着移动互联网的兴起&#xff0c;需要把大量的应用迁移到手机端&#xff0c;随着手端的应用逻辑越来越复杂&#xff0c;Javascript 的解析…

js创建对象的方式

1.字面量 const obj {}2.工厂函数 function createPerson(name, age) {return {name,age,greet() {console.log("Hello!");}}; }const person createPerson("Charlie", 35);3.Object.create 4.构造函数 cosnt obj new Object()5.class class Perso…

武汉市电子信息与通信工程职称公示了

2024年武汉市电子信息与通信工程专业职称公示了&#xff0c;本次公示通过人员有109人。 基本这已经是今年武汉市工程相关职称最后公示了&#xff0c;等待出证即可。 为什么有人好奇&#xff0c;一样的资料&#xff0c;都是业绩、论文等&#xff0c;有的人可以过&#xff0c;有的…

评估大语言模型在药物基因组学问答任务中的表现:PGxQA

​这篇文献主要介绍了一个名为PGxQA的资源&#xff0c;用于评估大语言模型&#xff08;LLM&#xff09;在药物基因组学问答任务中的表现。 研究背景 药物基因组学&#xff08;Pharmacogenomics, PGx&#xff09;是精准医学中最有前景的领域之一&#xff0c;通过基因指导的治疗…