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;我们需要对图…

每天五分钟机器学习:核函数

本文重点 在学习支持向量机算法之前,我们要继续学习一些数学基础,本文我们将学习核函数的概念。当数据线性不可分的时候,此时就需要核函数出场了,它可以将低维不可分的数据映射到高维可分数据,此时就可以完成数据分类了。 核函数的定义 核函数K(x, y)定义为两个数据点x…

MaaS(Model as a Service)

1.MasS是什么&#xff1f; Model as a Service&#xff08;MaaS&#xff09;是一种云计算服务模式&#xff0c;它允许用户通过互联网访问和使用机器学习模型&#xff0c;而不需要自行构建和维护这些模型。MaaS提供了模型的托管、管理和监控&#xff0c;使用户能够专注于应用程…

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

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

KAFKA 权威指南笔记(一)究竟应该配置多少个BROKER?

一个KAFKA集群需要多少个BROKER&#xff1f; 一个单独的Kafka服务器被叫做BROKER&#xff0c;BROKER可以处理数千个分区以及每秒百万级别的消息量。由BROKER组成了“集群”&#xff08;其中由集群控制器角色的BROKER是从成员中选举出来的&#xff0c;负责控制管理工作&#xf…

【ES6复习笔记】函数参数的默认值(6)

在ES6中&#xff0c;函数参数默认值是一个非常有用的特性&#xff0c;它允许你在定义函数时为参数指定一个默认值。如果在调用函数时没有提供相应的参数值&#xff0c;那么函数将使用默认值。 1. 形参初始值 具有默认值的参数&#xff0c;一般位置要靠后。这是一个潜规则&…

WebRtc webrtc-streamer部署

文章目录 本文档只是为了留档方便以后工作运维&#xff0c;或者给同事分享文档内容比较简陋命令也不是特别全&#xff0c;不适合小白观看&#xff0c;如有不懂可以私信&#xff0c;上班期间都是在得 WebRtc webrtc-streamer 部署 docker run -p 8000:8000 -it mpromonet/webrt…

Spring Boot中幂等性的应用

在 Spring Boot 中&#xff0c;幂等性是实现分布式系统设计和接口调用的一个重要概念&#xff0c;尤其在高并发、分布式环境下&#xff0c;确保接口重复调用不会引发系统数据异常至关重要。 幂等性概念 幂等性&#xff08;Idempotence&#xff09;是指一次请求和重复多次请求…

leetcode 7. 整数反转

class Solution { public: int reverse(int x) { long long n0; if(x0) return 0; while(x%100) { xx/10; } while(x!0) { nn*10x%10; xx/10; } if(n<-2147483648||n>2147483647) return 0; return n; } };

[项目][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&…

Centos7, 使用yum工具,出现 Could not resolve host: mirrorlist.centos.org

在 CentOS 7 中使用 yum 工具时&#xff0c;如果出现 "Could not resolve host: mirrorlist.centos.org" 的错误&#xff0c;通常是因为默认的镜像源无法访问。以下是一些常用的解决方法&#xff1a; 检查网络连接&#xff1a;首先使用 ping 命令测试网络连接是否正常…

【教程】通过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 是标…

计算机网络习题(第5章 网络层 第6章 传输层)

第5章 网络层 一、单选题 1、下列关于 IPv4 地址的说法中&#xff0c;错误的是( )。 A、 IP 地址是逻辑地址 B、 IP 地址一般用点分十进制表示 C、 205.106.286.36 是一个合法的 IP 地址 D、 同一个网络中不能有两台计算机的 IP 地址相同 正确答案&#xff1a; C 2、…

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

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

【蓝桥杯每日一题】分糖果——DFS

分糖果 蓝桥杯每日一题 2024-12-24 分糖果 DFS 题目描述 两种糖果分别有 9 个和 16 个&#xff0c;要全部分给 7 个小朋友&#xff0c;每个小朋友得到的糖果总数最少为 2 个最多为 5 个&#xff0c;问有多少种不同的分法。糖果必须全部分完。 只要有其中一个小朋友在两种方案中…

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

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