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

news2024/12/23 22:11:11

        从今天开始，博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”，对于刚接触这项技术的小伙伴在学习鸿蒙开发之前，有必要先了解一下鸿蒙，从你的角度来讲，你认为什么是鸿蒙呢？它出现的意义又是什么？鸿蒙仅仅是一个手机操作系统吗？它的出现能够和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.coloradmin.cn/o/2240569.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

/// ts中的三斜线指令 | 前端

/// ts中的三斜线指令 | 前端

第一次看到注意到这行代码&#xff0c;不知道的还以为是注释呢&#xff0c;查了资料才知道这是typescript中的三斜线指令&#xff0c;那有什么作用呢&#xff1f; 1. 这行代码是TypeScript中的一个三斜线指令&#xff08;Triple-Slash Directive&#xff09;&#xff0c;用于…
阅读更多...
学习日记_20241110_聚类方法（K-Means）

学习日记_20241110_聚类方法（K-Means）

前言 提醒&#xff1a; 文章内容为方便作者自己后日复习与查阅而进行的书写与发布&#xff0c;其中引用内容都会使用链接表明出处&#xff08;如有侵权问题&#xff0c;请及时联系&#xff09;。 其中内容多为一次书写&#xff0c;缺少检查与订正&#xff0c;如有问题或其他拓展…
阅读更多...
SMA-BP基于黏菌算法优化BP神经网络时间序列预测

SMA-BP基于黏菌算法优化BP神经网络时间序列预测

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【基于CNN-RNN的影像报告生成】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…
阅读更多...
ssm103宠物领养系统+vue(论文+源码)_kaic

ssm103宠物领养系统+vue(论文+源码)_kaic

毕业设计&#xff08;论文&#xff09; 宠物领养系统的设计与实现 学生姓名&#xff1a; 二级学院&#xff1a; 班级名称&#xff1a; 指导教师&#xff1a; 年 月 日 录 摘 …
阅读更多...
Elasticsearch如果集群出现节点故障，我应该如何快速定位问题？

Elasticsearch如果集群出现节点故障，我应该如何快速定位问题？

当 Elasticsearch (ES) 集群发生故障时&#xff0c;快速定位问题源头非常重要。Elasticsearch 是一个分布式系统&#xff0c;故障可能由多种原因引起&#xff0c;涉及到硬件、配置、网络、集群本身的健康状况等多个层面。以下是一些定位问题的步骤和工具&#xff1a; 检查集群…
阅读更多...
k8s-service、endpoints、pod之间是怎么进行网络互通的

k8s-service、endpoints、pod之间是怎么进行网络互通的

k8s-service、endpoints、pod之间是怎么进行网络互通的 1、service2、endpoints3、service、endpoints、pod通信图4、不同服务pod内部间访问 1、service 在K8S中&#xff0c;Service是一种抽象&#xff0c;定义了一组Pod的逻辑集合和访问这些Pod的策略。首先&#xff0c;我们需…
阅读更多...
dbeaver 连接日常是数据库工具类似navicat

dbeaver 连接日常是数据库工具类似navicat

官网下载安装包 DBeaver Community | Free Universal Database Tool 登录mysql为例 字体调整 sql 美化&#xff0c;关键字大写 快捷键 执行 ctrlenter 单个语句执行 alt x 执行sql脚本 事务提交&#xff0c;默认自动&#xff0c;可以改成手动 创建数据库 新建表 添加主键 …
阅读更多...
Chromium 中chrome.webRequest扩展接口定义c++

Chromium 中chrome.webRequest扩展接口定义c++

一、chrome.webRequest 注意 &#xff1a;从 Manifest V3 开始&#xff0c;"webRequestBlocking" 权限不再适用于大多数扩展程序。以 "declarativeNetRequest" 为例&#xff0c;它允许使用 declarativeNetRequest API。除了 "webRequestBlocking&quo…
阅读更多...
【MySQL】数据库必备知识：全面整合表的约束与深度解析

【MySQL】数据库必备知识：全面整合表的约束与深度解析

前言&#xff1a;本节内容讲述表的约束的相关内容。 表的约束博主将会通过两篇文章进行讲解&#xff0c; 这是第一篇上半部分。 讲到了约束概念。 以及几种常见约束。下面友友们开始学习吧&#xff01; ps:友友们使用了mysql就可以放心观看喽&#xff01; 目录 表的约束概念 …
阅读更多...
堆排序，学习笔记

堆排序，学习笔记

目录 一、概念 二、堆排序的基本思路 三、堆排序的基本步骤 1. 构建初始堆&#xff1a; 2. 排序过程 四、示例 五、应用场景 1. 优先级队列相关场景 2. TopK 值问题 一、概念 堆排序是一种基于二叉堆数据结构的排序算法。二叉堆是一种完全二叉树&#xff0c;它分为两种…
阅读更多...
分享 pdf 转 word 的免费平台

分享 pdf 转 word 的免费平台

背景 找了很多 pdf 转 word 的平台都骗进去要会员&#xff0c;终于找到一个真正免费的&#xff0c;遂分享。 网址 PDF转Word转换器 - 100%免费市面上最优质的PDF转Word转换器 - 免费且易于使用。无附加水印 - 快速将PDF转成Word。https://smallpdf.com/cn/pdf-to-word
阅读更多...
llama-cpp模型轻量化部署与量化

llama-cpp模型轻量化部署与量化

一、定义 定义配置环境遇到的问题&#xff0c;交互模式下模型一直输出&#xff0c;不会停止模型量化Qwen1.5-7B 案例demo 二、实现 定义 主要应用与cpu 上的部署框架。由c完成。配置环境 https://github.com/ggerganov/llama.cpp https://github.com/echonoshy/cgft-llm/blo…
阅读更多...
2024最新版JavaScript逆向爬虫教程-------基础篇之Proxy与Reflect详解

2024最新版JavaScript逆向爬虫教程-------基础篇之Proxy与Reflect详解

目录 一、监听对象的操作二、Proxy基本使用2.1 创建空代理2.2 定义捕获器2.2.1 Proxy的set和get捕获器2.2.2 Proxy(handler)的13个捕获器 三、Reflect的作用3.1 Reflect的使用3.2 Reflect其余方法(9个)3.3 Proxy与Reflect中的receiver参数3.4 Reflect中的construct方法 ECMAScr…
阅读更多...
Ceph层次架构分析

Ceph层次架构分析

Ceph的层次结构可以从逻辑上自下向上分为以下几个层次&#xff1a; 一、基础存储系统RADOS层 功能&#xff1a;RADOS&#xff08;Reliable Autonomic Distributed Object Store&#xff09;是Ceph的底层存储系统&#xff0c;提供了分布式存储的核心功能。它是一个完整的对象存…
阅读更多...
webpack指南

webpack指南

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;webpack篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来webpack篇专栏内容:webpack-指南 概念 中文&#xff1a; webpack | webpack中文文档 | webpack中文网 英文&…
阅读更多...
网站架构知识之nginx第三天（day026 ）

网站架构知识之nginx第三天（day026 ）

1.状态模块 使用方法&#xff1a;location /status/{ stub_$status; } 任意一个虚拟主机添加这个&#xff0c;就可以查看nginx状态。 对应指标及其说明
阅读更多...
新的恶意软件活动通过游戏应用程序瞄准 Windows 用户

新的恶意软件活动通过游戏应用程序瞄准 Windows 用户

一种新的恶意软件 Winos4.0 被积极用于网络攻击活动。FortiGuard实验室发现&#xff0c;这种先进的恶意框架是从臭名昭著的 Gh0strat 演变而来的&#xff0c;配备了模块化组件&#xff0c;可在受感染的设备上进行一系列恶意活动。 这些攻击已在游戏相关应用程序中发现&#xf…
阅读更多...
Redis - 集群(Cluster)

Redis - 集群(Cluster)

一、基本概念 上述的哨兵模式,提⾼了系统的可⽤性.但是真正⽤来存储数据的还是master和slave节点.所有的数 据都需要存储在单个master和slave节点中. 如果数据量很⼤,接近超出了master/slave所在机器的物理内存,就可能出现严重问题了. 如何获取更⼤的空间?加机器即可!所谓&q…
阅读更多...
WebRTC项目一对一视频

WebRTC项目一对一视频

开发步骤 1.客户端显示界面 2.打开摄像头并显示到页面 3.websocket连接 4.join、new-peer、resp-join信令实现 5.leave、peer-leave信令实现 6.offer、answer、candidate信令实现 7.综合调试和完善 1.客户端显示界面 步骤&#xff1a;创建html页面 主要是input、button、vide…
阅读更多...
启动本地开发环境（自带热启动）yarn serve

启动本地开发环境（自带热启动）yarn serve

文章目录 1. 安装 Yarn使用 npm 安装 Yarn使用 Chocolatey 安装 Yarn&#xff08;Windows 用户&#xff09;使用 Homebrew 安装 Yarn&#xff08;macOS 用户&#xff09; 2. 安装项目依赖3. 启动项目开发模式启动生产模式启动 4. 构建项目开发模式构建生产模式构建 5. 其他常用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023