HarmonyOS NEXT 实战之元服务:静态案例效果---查看国内航班服务

背景:

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

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

在这里插入图片描述

效果图1完整代码案例如下:

  • 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.Center)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}});}
}
  • AddressExchangeViewComponent 代码
import curves from '@ohos.curves';
import { promptAction } from '@kit.ArkUI';@Preview
@Component
export struct AddressExchangeViewComponent {@State rotateAngle: number = 0;@State translateX: number = 0;@State swap: boolean = false;private JWidth: number = 300;build() {Column({ space: 15 }) {Row() {Text($r('app.string.address_exchange_address_left')).translate({ x: this.translateX }).width("40%").textAlign(this.swap ? TextAlign.End : TextAlign.Start).onClick(() => {promptAction.showToast({message: '北京',});})Stack() {Image($r('app.media.address_exchange_airplane')).size({height: 16,width: 16})Image($r('app.media.address_exchange_recycle')).size({height: 38,width: 38}).rotate({ angle: this.rotateAngle }).animation({curve: Curve.EaseOut,playMode: PlayMode.Normal,})}.width("20%").onClick(() => {this.swap = !this.swapanimateTo({ curve: curves.springMotion() }, () => {if (this.swap) {this.translateX = this.JWidth * 0.5;} else {this.translateX = 0}})this.rotateAngle += 180;})Text('深圳').translate({ x: -this.translateX }).width("40%").textAlign(this.swap ? TextAlign.Start : TextAlign.End).onClick(() => {promptAction.showToast({message: '点了'});})}.width(this.JWidth).borderWidth(1).borderRadius(8).padding(8).height(60)Row({ space: 15 }) {Text(this.getDate()).fontSize($r('app.string.ohos_id_text_size_headline')).fontWeight(FontWeight.Medium).height(30)Text($r('app.string.address_exchange_week')).height(30)}.width(this.JWidth).onClick(() => {promptAction.showToast({message: '点了'});})Button($r('app.string.address_exchange_search_ticket')).fontColor(Color.White).height(40).backgroundColor('#6486FF').width(this.JWidth).onClick(() => {promptAction.showToast({message: '今日机器出现故障,请找工作室人员解决'});})Row({ space: 10 }) {Row() {Text('出差 返现').fontSize(13).fontColor('#222222')Toggle({ type: ToggleType.Checkbox, isOn: false })}Row() {Row() {Text('带儿童/婴儿').fontSize(13).fontColor('#222222')Toggle({ type: ToggleType.Checkbox, isOn: true })}Row() {Text('学生票').fontSize(13).fontColor('#222222')Toggle({ type: ToggleType.Checkbox, isOn: false })}}}.width('100%').justifyContent(FlexAlign.SpaceBetween)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('上海   ->   深圳').fontWeight(FontWeight.Bold).fontSize(13).fontColor('#5A5A5A')Row() {Text('12月3日 | 周一').fontSize(10).fontColor('#CAC8C9')Text('¥600').fontSize(15).fontColor(Color.Red).fontWeight(FontWeight.Bold).margin({ left: 8 })}.width('100%').justifyContent(FlexAlign.SpaceBetween)Text() {Span('原价  ').fontColor('#222222').fontSize(15)Span('¥1000').fontColor(Color.Red).fontSize(15)}.fontWeight(FontWeight.Bold).margin({ left: 8 })}.width('100%').borderRadius(4).backgroundColor('#F5F9F8').padding(8).alignItems(HorizontalAlign.Start)}Row({ space: 20 }) {Column({ space: 10 }) {Text('北京   ->   天津').fontWeight(FontWeight.Bold).fontSize(13).fontColor('#5A5A5A')Row() {Text('12月5日 | 周四').fontSize(10).fontColor('#CAC8C9')Text('¥300').fontSize(15).fontColor(Color.Red).fontWeight(FontWeight.Bold).margin({ left: 8 })}.width('100%').justifyContent(FlexAlign.SpaceBetween)Text() {Span('原价  ').fontColor('#222222').fontSize(15)Span('¥400').fontColor(Color.Red).fontSize(15)}.fontWeight(FontWeight.Bold).margin({ left: 8 })}.width('100%').borderRadius(4).backgroundColor('#F5F9F8').padding(8).alignItems(HorizontalAlign.Start)}}.width($r('app.string.address_exchange_content_size')).height(178).margin($r('app.string.ohos_id_card_margin_start'))}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} 日`}
}

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

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/64037.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows11家庭版启动Hyper-V

Hyper-V 是微软的硬件虚拟化产品&#xff0c;允许在 Windows 上以虚拟机形式运行多个操作系统。每个虚拟机都在虚拟硬件上运行&#xff0c;可以创建虚拟硬盘驱动器、虚拟交换机等虚拟设备。使用虚拟化可以运行需要较旧版本的 Windows 或非 Windows 操作系统的软件&#xff0c;以…

为什么深度学习和神经网络要使用 GPU?

为什么深度学习和神经网络要使用 GPU&#xff1f; 本篇文章的目标是帮助初学者了解 CUDA 是什么&#xff0c;以及它如何与 PyTorch 配合使用&#xff0c;更重要的是&#xff0c;我们为何在神经网络编程中使用 GPU。 图形处理单元 (GPU) 要了解 CUDA&#xff0c;我们需要对图…

图像处理-Ch7-快速小波变换和小波包

个人博客&#xff01;无广告观看&#xff0c;因为这节内容太多了&#xff0c;有点放不下&#xff0c;分了三节 文章目录 快速小波变换(The Fast Wavelet Transform)与两频段子带编译码系统的关系例&#xff1a;计算一维小波变换 一维快速小波反变换例&#xff1a;计算一维小波…

[项目][boost搜索引擎#4] cpp-httplib使用 log.hpp 前端 测试及总结

目录 编写http_server模块 1. 引入cpp-httplib到项目中 2. cpp-httplib的使用介绍 3. 正式编写http_server 九、添加日志到项目中 十、编写前端模块 十一. 详解传 gitee 十二、项目总结 项目的扩展 写在前面 [项目详解][boost搜索引擎#1] 概述 | 去标签 | 数据清洗 |…

xxl-job 简单的入门到实战

本文是参考官方文档自己实践一次&#xff0c;纯享版&#xff0c;大致也是作者边写博客边去跟着官方文档实现 一、前期准备 1、官网地址 GitHub地址&#xff1a; GitHub - xuxueli/xxl-job: A distributed task scheduling framework.&#xff08;分布式任务调度平台XXL-JOB&…

【教程】通过Docker运行AnythingLLM

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 官方教程&#xff1a;Local Docker Installation ~ AnythingLLM 1、先创建一个目录用于保存anythingllm的持久化文件&#xff1a; sudo mkdir /app su…

若依(RuoYi-Vue)+Flowable工作流前后端整合教程

此教程适合若依前后端分离项目&#xff0c;其他项目可以在扩展列表中进行查找。 近期公司里需要对很久以前的RuoYi-Vue前后端分离项目扩展出flowable的功能&#xff0c;当然这个重任也是落在了我的身上&#xff08;不然也不会有这篇文章&#xff09;&#xff0c;然后我在官网看…

ubuntu 网络管理--NetworkManager

ubuntu 网络管理--NetworkManager 1 介绍2 NetworkManager 命令2 nmcli 命令显示可用的wifi AP连接wifi检查网络连接 ?? 如何删除删除网络连接查看设备状态添加一个新的以太网连接设置静态 IP 地址启用并测试连接添加新的wifi连接 3 其他命令参考 1 介绍 NetworkManager 是标…

水库大坝三维模型的开发和使用3Dmax篇

成果图 开发过程 工具插件three.js先加载模型做水体衔接水位测量标尺水位标记断面标记大坝监测点打点 上代码&#xff0c;技术交流V: bloxed <template><div class"box w100 h100"><el-row :gutter"20" v-loading"loading"e…

计算机毕设-基于springboot的校园招聘网站的设计与实现(附源码+lw+ppt+开题报告)

博主介绍&#xff1a;✌多个项目实战经验、多个大型网购商城开发经验、在某机构指导学员上千名、专注于本行业领域✌ 技术范围&#xff1a;Java实战项目、Python实战项目、微信小程序/安卓实战项目、爬虫大数据实战项目、Nodejs实战项目、PHP实战项目、.NET实战项目、Golang实战…

重生之我在异世界学编程之C语言:深入动态内存管理收尾 + 柔性数组篇

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 本文目录 引言正文常见的动态内存管理错误&#xf…

无人直播源码

DY无人直播系统架构设计介绍 在DY等短视频平台的直播中&#xff0c;无人直播系统能够提供自动化、智能化的互动体验&#xff0c;既减轻了主播的工作量&#xff0c;又提升了观众的参与感。以下是一个典型的无人直播系统架构设计&#xff0c;包含全局配置、点对点互动、产品话术、…

被裁20240927 --- 嵌入式硬件开发 前篇

前篇主要介绍一些相关的概念&#xff0c;用于常识扫盲&#xff0c;后篇开始上干货&#xff01; 他捧着一只碗吃过百家的饭 1. 处理器芯片1.1 处理器芯片制造商一、 英特尔&#xff08;Intel&#xff09;二、 三星&#xff08;SAMSUNG&#xff09;三、 高通&#xff08;Qualcomm…

【Linux】进程间通信 -> 匿名管道命名管道

进程间通信的目的 数据传输&#xff1a;一个进程许需要将它的数据发送给另外一个进程。资源共享&#xff1a;多个进程之间共享同样的资源。通知事件&#xff1a;一个进程需要向另一个或一组进程发送消息&#xff0c;通知它们发生了某种事件&#xff08;如进程终止时要通知父进程…

Pytorch注意力机制应用到具体网络方法(闭眼都会版)

文章目录 以YoloV4-tiny为例要加入的注意力机制代码模型中插入注意力机制 以YoloV4-tiny为例 解释一下各个部分&#xff1a; 最左边这部分为主干提取网络&#xff0c;功能为特征提取中间这边部分为FPN&#xff0c;功能是加强特征提取最后一部分为yolo head&#xff0c;功能为获…

修改el-select下拉框高度;更新:支持动态修改

文章目录 效果动态修改&#xff1a;效果代码固定高度版本动态修改高度版本&#xff08;2024-12-25 更新&#xff1a; 支持动态修改下拉框高度&#xff09; 效果 动态修改&#xff1a;效果 代码 固定高度版本 注意点&#xff1a; popper-class 尽量独一无二&#xff0c;防止影…

如何完全剔除对Eureka的依赖,报错Cannot execute request on any known server

【现象】 程序运行报错如下&#xff1a; com.netflix.discovery.shared.transport.TransportException报错Cannot execute request on any known server 【解决方案】 &#xff08;1&#xff09;在Maven工程中的pom去掉Eureka相关的引用&#xff08;注释以下部分&#xff0…

vscode写python,遇到问题:ModuleNotFoundError: No module named ‘pillow‘(已解决 避坑)

1 问题&#xff1a; ModuleNotFoundError: No module named pillow 2 原因&#xff1a; 原因1&#xff1a;安装Pillow的pip命令所处的python版本与vscode调用的python解释器版本不同。 如&#xff1a; 原因2&#xff1a;虽然用的是pillow&#xff0c;但是写代码的时候只能用…

Ashy的考研游记

文章目录 摘要12.1112.2012.21 DAY1&#xff08;政治/英语&#xff09;政治英语 12.22 DAY2&#xff08;数学/专业课&#xff09;数学专业课 结束估分 摘要 在24年的12月里&#xff0c;Ashy完成了他的考研冲刺&#xff0c;顺利的结束了他本年度的考研之旅。 在十二月里&#…

AIGC实践|AI/AR助力文旅沉浸式互动体验探索

前言&#xff1a; 本篇文章的创作灵感来源于近期热门话题——让文物“动起来”&#xff0c;各大博物馆成为新进潮流打卡地。结合之前创作的AI文旅宣传片良好的流量和反馈&#xff0c;外加最近比较感兴趣的AR互动探索&#xff0c;想尝试看看自己能不能把这些零碎的内容整合起来…