【HarmonyOS】鸿蒙系统在租房项目中的项目实战(一)

        从今天开始,博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”,对于刚接触这项技术的小伙伴在学习鸿蒙开发之前,有必要先了解一下鸿蒙,从你的角度来讲,你认为什么是鸿蒙呢?它出现的意义又是什么?鸿蒙仅仅是一个手机操作系统吗?它的出现能够和Android和IOS三分天下吗?它未来的潜力能否制霸整个手机市场呢?

今天实现一个简单的小案例,从零开始讲解如何通过鸿蒙开发实现一个租房平台的案例。

目录

初始化项目

搭建tabBar

轮播图搭建

主内容搭建


初始化项目

首先我们先打开DevEco Studio,点击新建项目:

然后根据自己的情况选择应用,这里我们选择空的 Empty Ability 进行创建: 

创建完成点击结束之后,我们就可以在pages目录下的index.ets文件中编写代码,如下所示可以看到我们的项目已经成功运行了:

http封装:因为项目肯定是需要用到接口内容的,所以这里我们新建完项目之后需要封装一下请求方法方便后期调用,这里我们可以借助官方给我们提供的第三方仓库网站:地址 如下所示:

然后我们下载我们调用接口的第三方库,终端执行如下命令进行安装: 

ohpm install @ohos/axios

然后我们在ets目录下新建utils工具文件夹,在该文件夹下新建http.ts文件对axios进行二次封装

import axios from '@ohos/axios'
import { promptAction } from '@kit.ArkUI'const http  = axios.create({baseURL: 'http://192.168.0.110:6060', // 请求地址timeout: 5000,
})http.interceptors.request.use((config) => {// 后期可以添加校验token内容return config},(error) => {promptAction.showToast(error.message) // 错误提示return Promise.reject(error)},
)http.interceptors.response.use((response) => {if (response.data.code === 200) {return response.data} else {promptAction.showToast(response.data.message) // 错误提示return Promise.reject(response.data.message)}},(error) => {promptAction.showToast(error.message) // 错误提示return Promise.reject(error)},
)
export default http

封装好接口之后,接下来我们需要配置下网络权限,方便后期我们使用真机模拟器的时候,网络服务是能够正常去请求的,如下所示:

在开发项目的时候,接口可能很多需要统一管理,我们直接在ets目录下去创建api文件夹去统一管理项目的接口: 

import http from "../../utils/http"
import type { HomeData } from './type'// 统一管理接口
enum API {HOME_INFO = '/home/info',
}// 获取首页数据
export const reqHomeData = () =>http.get<any, HomeData>(API.HOME_INFO)

搭建tabBar

        接下来我们开始搭建我们的tabBar内容,这里我们使用官方文档提供的Tabs组件进行搭建,这里我们先创建五个ets文件代表五个要实现的五个tab界面,首先我们先准备好tab切换的图片资源,资源可以在阿里云图标库上进行寻找,这里不再赘述,找到对应的这种放置在b资源文件base下的media目录里面:

然后我们通过构建器创建一个tab函数,里面实现的是图片和文本,根据用户点击不同的tab然后进行样式的切换,代码如下:

import Home from "./Home"
import See from "./See"
import Service from "./Service"
import Discover from "./Discover"
import My from "./My"@Entry
@Component
struct Index {@State currentTabBarIndex: number = 0@Builder tabBarBuilder(image: Resource, activeImage: Resource, text: string, index: number) {Column() {Image(this.currentTabBarIndex === index ? activeImage : image).width(28).height(28 )Text(text).fontSize(10).fontColor(this.currentTabBarIndex === index ? '#000' : '#A0A0A0')}}build() {Tabs({ barPosition: BarPosition.End }) {TabContent() {Home()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_home'), $r('app.media.tabbar_home_active'), '首页', 0))TabContent() {See()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_see'), $r('app.media.tabbar_see_active'), '想看', 1))TabContent() {Service()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_service'), $r('app.media.tabbar_service_active'), '服务', 2))TabContent() {Discover()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_discover'), $r('app.media.tabbar_discover_active'), '发现', 3))TabContent() {My()}.tabBar(this.tabBarBuilder($r('app.media.tabbar_my'), $r('app.media.tabbar_my_active'), '我的', 4))}.barHeight(50).scrollable(false).onChange((index: number) => {this.currentTabBarIndex = index})}
}

最终呈现的效果如下所示:

因为项目中可能许多地方会使用相同的变量,例如文字颜色或者大小等等,这里我们设置一下全局公共的样式内容,如下所示:

然后我们回到刚才我们设置tab的颜色的位置,设置成我们定义的全局公共样式:

当然我们也可以设置一下公共的常量内容,类似整个页面布局的边距,阴影圆角等等,这里我们直接在ets文件夹下新建一个资源目录,用于存放我们的定义的常量内容,方便后期用到:

轮播图搭建

首页的内容有很多,这里我们简单的讲每个模块用到的内容都讲解一下在home页面,我们通过Scroll组件来排列模块内容,首先我们先实现轮播图组件,这里我们将轮播图组件抽离出去,然后通过props将接口当中的数据传递给组件:

import { reqHomeData } from '../api/home'
import type { HomeData, bannerList } from '../api/home/type'
import SwiperLayout from '../components/Home/SwiperLayout'@Component
export default struct Home {@State bannerList: bannerList[] = []// 获取首页数据getHomeData = async () => {const res: HomeData = await reqHomeData()this.bannerList = res.data.bannerList}// 初始化页面调用aboutToAppear(): void {this.getHomeData()}build() {Scroll() {Column() {// 轮播图组件使用props通信SwiperLayout({ bannerList: this.bannerList })}.width('100%')}.width('100%').height('100%').scrollBar(BarState.Off).align(Alignment.TopStart)}
}

在轮播图组件当中,我们调用轮播组件Swiper,通过ForEach循环渲染图片资源,然后轮播组件设置对应的轮播参数内容即可,代码如下所示:

import type { bannerList } from '../../api/home/type'@Component
export default struct SwiperLayout {@Prop bannerList: bannerList[];build() {Swiper() {ForEach(this.bannerList, (item: bannerList) => {Image(item.imageURL).width('100%').height('100%').objectFit(ImageFit.Fill)}, (banner: bannerList) => banner.id.toString())}.width('100%').height(211 -36) // 减去状态栏高度36.autoPlay(true).interval(3000).indicator(new DotIndicator().color($r('app.color.indicator_color')).selectedColor($r('app.color.indicator_color_active')))}
}

去除上下留白:因为新版本的鸿蒙预览器是有安全距离的,也就是说手机预览器上下会有一定的空间留白,如果想清除这些留白的话在index.ets根文件中调用如下函数即可:

import { window } from '@kit.ArkUI';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setWindowLayoutFullScreen(true)});
}

最终呈现的效果如下所示:

主内容搭建

搜索栏搭建:内容很简单,我们借助层叠组件Stack在轮播图组件上搭建一个搜索栏组件,如下所示:

然后也是借助层叠组件,调整一下样式即可,然后把静态的搜索栏搭建出来:

import { PADDING, PADDING_S } from '../../contants/size'@Component
export default struct SearchBar {build() {Row({ space: PADDING }) {Text('北京').fontSize(14).fontColor($r('app.color.white'))Stack() {TextInput().width(244).height('100%').backgroundColor($r('app.color.white'))Row() {Image($r('app.media.search')).width(18).height(18)Text('公司/地铁/小区,马上搜索').fontSize(10).fontColor($r('app.color.gray')).layoutWeight(1).margin({ left: PADDING_S, right: PADDING_S })Column() {}.width(1).height(18).backgroundColor($r('app.color.line')).margin({ right: PADDING })Image($r('app.media.position')).width(18).height(18)}.width('100%').padding({ left: PADDING, right: PADDING })}.width(244)Image($r('app.media.message')).width(24).height(24).fillColor($r('app.color.white'))}.width('100%').height(38).padding({ left: PADDING, right: PADDING }).margin({ top: 4 })}
}

最终呈现的效果如下所示:

导航栏搭建:导航栏的内容这里我们就使用Grid布局进行处理,首先我们先定义导航栏组件然后在Home文件中进行引入,然后将首页的接口函数data中的数值赋值给navList,然后通过props的方式传递给导航栏组件,如下所示:

然后我们来到导航栏组件,通过Grid布局并调整相应的样式即可:

import { navList } from '../../api/home/type'@Component
export default struct NavList {@Prop navList: navList[]build() {Grid() {ForEach(this.navList, (item: navList) => {GridItem() {Column({ space: 8 }) {Image(item.imageURL).width(58).height(56).objectFit(ImageFit.Fill)Text(item.title).fontSize(12).fontColor($r('app.color.black'))}}}, (nav: navList) => nav.id.toString())}.width('100%').height(170).rowsTemplate('1fr 1fr').columnsTemplate('1fr 1fr 1fr 1fr').rowsGap(14).columnsGap(32).margin({ top: 24 })}
}

最终呈现的效果如下所示:

标题栏搭建:接下来开始对标题栏中的内容进行书写,老样子我们需要先定义标题栏组件,然后在Home文件中进行引入,并将首页数据data当中的titleList通过props通信传递给标题栏组件:

然后这里就很简单了,通过ForEach的方式进行渲染数据即可:

import { tileList } from '../../api/home/type'@Component
export default struct TitleList {@Prop titleList: tileList[]build() {Row({ space:32 }) {ForEach(this.titleList, (item: tileList) => {Column({ space: 8 }) {Image(item.imageURL).width('100%').height(58).objectFit(ImageFit.Fill)Row({ space: 5 }) {Text(item.title).fontSize(12).fontColor($r('app.color.black'))Text(item.sub_title).fontSize(10).fontColor($r('app.color.gray'))}.width('100%')}.width(148)}, (tit: tileList) => tit.id.toString())}.width('100%').margin({ top: 12 })}
}

最终呈现的效果如下所示:

列表栏搭建:同理列表栏搭建的方式和上面一样,这里就直接给出代码了:

import { planList } from '../../api/home/type'@Component
export default struct PlanList {@Prop planList: planList[]build() {Row({ space: 5 }) {ForEach(this.planList, (item: planList) => {Image(item.imageURL).width(78).height(60).objectFit(ImageFit.Fill)}, (plan: planList) => plan.id.toString())}.width('100%').margin({ top: 18 })}
}

效果如下所示:

下面的内容就放置一个广告图,代码很简单,这里就不再赘述了:

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

百度搜索AI探索版多线程批量生成TXT原创文章软件-可生成3种类型文章

百度搜索AI探索版是百度推出的一款基于大语言模型文心一言的综合搜索产品‌。以下是关于百度搜索AI探索版的详细介绍&#xff1a; ‌产品发布‌&#xff1a;百度搜索AI探索版在百度世界大会上进行了灰度测试&#xff0c;并面向用户开放体验‌。 ‌核心功能‌&#xff1a;与传…

Linux软件包管理与Vim编辑器使用指南

目录 一、Linux软件包管理器yum 1.什么是软件包&#xff1f; 2.什么是软件包管理器&#xff1f; 3.查看软件包 4.安装软件 ​编辑 5.卸载软件 Linux开发工具&#xff1a; 二、Linux编辑器---vim 1.vim的基本概念 (1) 正常/普通模式&#xff08;Normal mode&#xff0…

Android Osmdroid + 天地图 (一)

Osmdroid 天地图 前言正文一、配置build.gradle二、配置AndroidManifest.xml三、获取天地图的API Key① 获取开发版SHA1② 获取发布版SHA1 四、请求权限五、显示地图六、源码 前言 Osmdroid是一款完全开源的地图基本操作SDK&#xff0c;我们可以通过这个SDK去加一些地图API&am…

2024国内AI工具十大推荐丨亲测好用‼️

&#x1f680;探索了市面上数百款AI工具后&#xff0c;我精心挑选了10款在不同场景下超级好用的神器&#xff0c;快来一起看看吧&#xff01;&#x1f31f; 1️⃣豆包 基于云雀模型开发&#xff0c;具备聊天机器人、写作助手、英语学习助手等功能&#xff0c;能够进行多轮对话…

Unity学习---IL2CPP打包时可能遇到的问题

写这篇主要是怕自己之后打包的时候出问题不知道怎么搞&#xff0c;所以记录一下。 问题一&#xff1a;类型裁剪 IL2CPP打包后会自动对Unity工程的dll进行裁剪&#xff0c;将代码中没有引用到的类型裁剪掉。特别是通过反射等方式调用一些类的时候&#xff0c;很容易出问题。 …

多模态大模型(2)--BLIP

大模型如火如荼&#xff0c;研究者们已经不再满足于基本文本的大语言模型&#xff08;LLM, Large Language Model&#xff09;&#xff0c;AI领域的热点正逐步向多模态转移&#xff0c;具备多模态能力的多模态大型语言模型&#xff08;MM&#xff08;Multi-Modal&#xff09;-L…

基于MATLAB身份证号码识别

课题介绍 本课题为基于连通域分割和模板匹配的二代居民身份证号码识别系统&#xff0c;带有一个GUI人机交互界面。可以识别数十张身份证图片。 首先从身份证图像上获取0&#xff5e;9和X共十一个号码字符的样本图像作为后续识别的字符库样本&#xff0c;其次将待测身份证图像…

Siggraph Asia 2024 | Adobe发布MagicClay:可通过文字引导去对3D模型中的特定部分进行雕刻

今天给大家介绍一篇来自Adobe研究人员在Siggraph Asia 2024上发表的最新工作MagicClay&#xff0c;它是一款结合网格和距离场(SDF)的混合式工具&#xff0c;可以通过文字引导去对3D模型中的特定部分进行雕刻。允许艺术家通过文字提示进行局部网格编辑&#xff0c;支持生成具纹理…

滑动窗口的使用

一、定义与基本原理 滑动窗口是一种流量控制技术&#xff0c;也用于管理和处理数据流。它通过定义一个固定大小或可根据特定条件动态调整的窗口&#xff0c;在数据流或数据序列上滑动&#xff0c;以便高效地处理其中的数据。这种技术能够限制同时处理的数据量&#xff0c;从而…

Python学习26天

集合 # 定义集合 num {1, 2, 3, 4, 5} print(f"num&#xff1a;{num}\nnum数据类型为&#xff1a;{type(num)}") # 求集合中元素个数 print(f"num中元素个数为&#xff1a;{len(num)}") # 增加集合中的元素 num.add(6) print(num) # {1,2,3,4,5,6} # 删除…

android开发

文章目录 android开发 类微信界面整体框架展示&#xff1a;主页Fragment_MainActivity2&#xff1a;1. 聊天界面2. 用户界面用户界面的跳转 3. 朋友圈界面4. 我的界面 android开发 类微信界面 整体效果展示&#xff1a; 整体框架展示&#xff1a; 4个主要的fragment页面&#…

【大数据学习 | flume】flume的概述与组件的介绍

1. flume概述 Flume是cloudera(CDH版本的hadoop) 开发的一个分布式、可靠、高可用的海量日志收集系统。它将各个服务器中的数据收集起来并送到指定的地方去&#xff0c;比如说送到HDFS、Hbase&#xff0c;简单来说flume就是收集日志的。 Flume两个版本区别&#xff1a; ​ 1&…

vmware安装Ubuntu桌面版系统

1安装环境 vmware版本&#xff1a;VMware Workstation 17 Ubuntu版本&#xff1a;ubuntu-24.04.1-desktop-amd64.iso 文档时间&#xff1a;2024年11月 每一个Ubuntu的版本安装显示可能不一样&#xff0c;但安装方法是类似的 2镜像下载 Ubuntu官网&#xff1a;[https://ubun…

STL--map、set的使用和模拟实现

1.set 1.1 set的概念 set 是一种基于 平衡二叉搜索树&#xff08;通常是红黑树&#xff09; 实现的容器&#xff0c;它提供了有序集合的功能。set 用于存储唯一的元素&#xff0c;并且元素是按照某种顺序排列的&#xff08;通常是升序&#xff09;。 set 确实是一个关联式容…

软件测试之什么是缺陷

软件测试之什么是缺陷 1. 缺陷定义2. 缺陷判定标准3. 缺陷产生原因3.1 缺陷产生的原因3.2 缺陷的生命周期 4. 缺陷核心内容5. 缺陷提交要素6. 缺陷类型 1. 缺陷定义 软件在使用过程中存在的任何问题都叫软件的缺陷, 简称Bug. 2. 缺陷判定标准 3. 缺陷产生原因 3.1 缺陷产生的…

二叉树的遍历(手动)

树的遍历分四种&#xff1a; 层序遍历 前序遍历 中序遍历 后序遍历 层序遍历&#xff1a; 很好理解&#xff0c;就是bfs嘛&#xff08;二不二叉都行&#xff09; 前序遍历&#xff1a; 又叫先跟遍历&#xff0c;遍历顺序是根->左->右&#xff08;子树里也是&#…

Unix进程

文章目录 命令行参数进程终止正常结束异常终止exit和_exitatexit 环境变量环境变量性质环境表shell中操作环境变量查看环境变量设置环境变量 环境变量接口获取环境变量设置环境变量 环境变量的继承性 进程资源shell命令查看进程的资源限制 进程关系进程标识进程组会话控制终端控…

供应链管理、一件代发系统功能及源码分享 PHP+Mysql

随着电商行业的不断发展&#xff0c;传统的库存管理模式已经逐渐无法满足市场需求。越来越多的企业选择“一件代发”模式&#xff0c;即商家不需要自己储备商品库存&#xff0c;而是将订单直接转给供应商&#xff0c;由供应商直接进行发货。这种方式极大地降低了企业的运营成本…

关于离散模型优化的一份介绍

离散模型优化是运筹学和计算机科学领域中的一个重要分支&#xff0c;它主要研究如何在有限的、通常是计数的决策变量空间中寻找最优解。这类问题通常出现在资源分配、生产计划、物流管理、网络设计等实际应用场景中。在这篇文章中就将介绍离散模型优化中关于线性规划等部分内容…

hadoop_yarn详解

YARN秒懂 YARN定义基础架构ResourceManagerNodeManagerApplicationMasterContainer 工作流程资源调度器FIFO SchedulerCapacity SchedulerFair Scheduler 常用命令 YARN定义 YARN&#xff08;Yet Another Resource Negotiator&#xff09;是Hadoop的一个框架&#xff0c;它负责…