【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.mzph.cn/web/59474.shtml

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

相关文章

react17安装html-react-parser运行报错记录

背景 react17 安装 html-react-parser npm install html-react-parser运行终端报错信息 ERROR in ./node_modules/html-react-parser/esm/index.mjs 2:0-122 Cant reexport the named export htmlToDOM from non EcmaScript module (only default export is available)原因…

websocket初始化

websocket初始化 前言 上一集我们HTTP的ping操作就可以跑通了&#xff0c;那么我们还有一个协议---websocket&#xff0c;我们在这一集就要去完成我们websocket的初始化。 分析 我们在初始化websocket的之前&#xff0c;我们考虑一下&#xff0c;我们什么时候就要初始化我们…

JavaEE 重要的API阅读

JavaEE API阅读 目的是为了应对学校考试&#xff0c;主要关注的是类的继承关系、抛出错误的类型、包名、包结构等等知识。此帖用于记录。 PageContext抽象类 包名及继承关系 继承自JspContext类。PageContext 实例提供对与某个 JSP 页⾯关联的所有名称空间的访问&#xff0…

Yocto项目 - VIRTUAL-RUNTIME,它有什么用?

Yocto 项目是一个完整的 Linux 分布构建工具集&#xff0c;提供了构建完全自定义小型核心或完整应用的能力。在这样一个构建系统中&#xff0c;VIRTUAL-RUNTIME这个概念是应用构建和选择处理中的重要部分。这篇文章将从概念、优势、应用场景和实战案例几个方面&#xff0c;全面…

基于微信小程序的乡村研学游平台设计与实现,LW+源码+讲解

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自…

【Qt】在 Qt Creator 中使用图片资源方法(含素材网站推荐)

先准备图片资源 推荐一个好用的图标素材网站&#xff0c;有很多免费资源。 Ic, fluent, animal, dog, filled icon - Free download 其他辅助工具&#xff0c;类似 AI 抠图去背景&#xff0c;实测效果还行&#xff0c;但是非免费。 美图秀秀-在线一键抠图&#xff0c;无需P…

CTFhub靶场RCE学习

靶场 eval执行 <?php if (isset($_REQUEST[cmd])) {eval($_REQUEST["cmd"]); } else {highlight_file(__FILE__); } ?> PHP代码显示&#xff0c;要求将命令赋值给cmd然后执行 先查看一下根目录文件 ?cmdsystem("ls");&#xff01;切记最后的分…

云计算研究实训室建设方案

一、引言 随着云计算技术的迅速发展和广泛应用&#xff0c;职业院校面临着培养云计算领域专业人才的迫切需求。本方案旨在构建一个先进的云计算研究实训室&#xff0c;为学生提供一个集理论学习、实践操作、技术研发与创新于一体的综合性学习平台&#xff0c;以促进云计算技术…

MQ集群

目录 MQ集群 集群分类 普通集群 集群结构和特征 集群的部署 获取cookie 准备集群配置 启动集群 镜像模式 镜像模式的特征 镜像模式的配置 exactly模式 仲裁队列 集群特征仲裁队列&#xff1a;仲裁队列是3.8版本以后才有的新功能&#xff0c;用来替代镜像队列&#…

spi 回环

///tx 极性0 &#xff08;sclk信号线空闲时为低电平&#xff09; /// 相位0 (在sclk信号线第一个跳变沿进行采样) timescale 1ns / 1ps//两个从机 8d01 8d02 module top(input clk ,input rst_n,input [7:0] addr ,input …

基于物联网的温室大棚控制系统

本设计采用物联网方案&#xff0c;用STM32f103c8t6作为主控芯片&#xff0c;采用DHT11作为温湿度传感器&#xff0c;采集CO2使用JW01-CO2-V2.2传感器模块&#xff0c;并且通过BH1750传感器模块采集光照&#xff0c;通过土壤湿度传感器来获取大棚内部土壤湿度&#xff0c;ESP-01…

初级数据结构——栈

目录 前言一、栈的基本概念二、栈的实现方式三、栈的性能分析四、栈的应用场景五、栈的变体六、出栈入栈的动态图解七、代码模版八、总结结语 前言 数据结构栈&#xff08;Stack&#xff09;是一种线性的数据结构&#xff0c;它只允许在序列的一端&#xff08;称为栈顶&#x…

信号-3-信号处理

main 信号捕捉的操作 sigaction struct sigaction OS不允许信号处理方法进行嵌套&#xff1a;某一个信号正在被处理时&#xff0c;OS会自动block改信号&#xff0c;之后会自动恢复 同理&#xff0c;sigaction.sa_mask 为捕捉指定信号后临时屏蔽的表 pending什么时候清零&…

OpenSSL 自签名

参考文档&#xff1a;unigui开发人员工作手册2021 参考文章&#xff1a;保姆级OpenSSL下载及安装教程-CSDN博客 下载 Win32/Win64 OpenSSL Installer for Windows - Shining Light Productions 进入后向下拉找到下载位置&#xff0c;建议下载二进制版本的精简版&#xff0c…

Facebook 广告不展示的原因以及解决方法

很多小伙伴在进行Facebook广告投放时会遇到广告不展示的情况&#xff0c;那么遇到这种情况该怎么分析问题并解决呢&#xff1f;本文将为大家揭晓答案。 1. 主页错误或未发布 问题&#xff1a;主页可能存在错误或未正式发布。 解决方案&#xff1a;停用并重新激活主页。 访…

前端vue 列表中回显并下拉选择修改标签

1&#xff0c;vue数据列表中进行回显状态并可以在下拉框中选择修改&#xff0c;效果如下 2&#xff0c;vue 页面关键代码 <el-table-column label"审核" align"center" class-name"small-padding fixed-width" prop"status" >&…

Python | Leetcode Python题解之第559题N叉树的最大深度

题目&#xff1a; 题解&#xff1a; class Solution:def maxDepth(self, root: Node) -> int:if root is None:return 0ans 0queue [root]while queue:queue [child for node in queue for child in node.children]ans 1return ans

Python 中.title()函数和.lower()函数

一.title()函数 1.title()函数的功能 将字符串中的每一单词的首字母大写 2.举例 S1"i love you" S2S1.title() print(S2)3.输出 二.lower()函数 1.lower()函数的功能 将字符串中的每一大写字母都变成的小写字母 2.举例 S1"I LOVE YOU" S2S1.lower()…

STM32问题集

这里写目录标题 一、烧录1、 Can not connect to target!【ST-LINK烧录】 一、烧录 1、 Can not connect to target!【ST-LINK烧录】 烧录突然 If the target is in low power mode, please enable “Debug in Low Power mode” option from Target->settings menu 然后就&…

MySQL数据库:SQL语言入门 【2】(学习笔记)

目录 2&#xff0c;DML —— 数据操作语言&#xff08;Data Manipulation Language&#xff09; &#xff08;1&#xff09;insert 增加 数据 &#xff08;2&#xff09;delete 删除 数据 truncate 删除表和数据&#xff0c;再创建一个新表 &#xff08;3&#xf…