> 技术文档 > Harmony鸿蒙实战开发项目-天气预报App【源码在文末】_鸿蒙天气预报

Harmony鸿蒙实战开发项目-天气预报App【源码在文末】_鸿蒙天气预报


Harmony鸿蒙实战开发项目-天气预报App【源码在文末】

一、简介

运行截图

4121733901211_.pic

4131733901220_.pic

4141733901228_.pic

4151733901236_.pic

4161733901242_.pic

4171733901250_.pic

简述(人工智能生成)

根据上述截图,这是一款天气预报应用,功能简述如下:

​ 1. 城市选择功能

​ • 用户可以通过“添加城市”列表选择需要查看天气的城市。

​ • 支持多个城市的天气信息管理,已添加的城市会显示状态为“已添加”。

​ 2. 天气信息展示

​ • 展示当前所选城市的天气状况,包括:

​ • 天气类型(如晴、多云)。

​ • 温度范围。

​ • 风力等级(如南风、东风,1-3级)。

​ • 提供未来几天的天气预报,包括每天的最高气温和最低气温。

​ 3. 删除功能

​ • 用户可以删除已添加城市的天气信息,删除前会弹出确认对话框,避免误删。

​ 4. 界面特点

​ • 界面设计简洁,使用了卡通风格的天气图标(如太阳、云朵)。

​ • 蓝色背景提供清新的视觉效果。

​ • 操作按钮明确,如“添加”“删除”“完成”等。

总体来看,这款应用适合用户日常查看多个城市的天气信息,同时提供了简单的城市管理功能,便于操作。

部分源码

import getWeatherUtil from \"../viewmodel/WeatherUtilModel\"import { WeatherModel } from \"../viewmodel/WeatherModel\"import { cityView } from \'../view/cityView\'import router from \'@ohos.router\'@Entry@Componentstruct Index { //城市信息集合 @State cityWeatherList: Array = [] //城市名字集合 @State cityNameList: Array = [] //当前城市代码列表 @State cityCodeList: Array = [110000,120000] //当前tab组件索引 @State cityIndex: number = 0 //tab控制器 tabcontroller: TabsController = new TabsController() onPageShow() { let params = router.getParams() if (params) { this.cityCodeList = params[\"Codes\"] this.cityWeatherList = [] this.cityNameList = [] this.initData() } } //tarBar 自定义函数 @Builder tabBuild(index: number) { Circle({ width: 10, height: 10 }).fill(this.cityIndex === index ? Color.White : Color.Gray).opacity(0.4) } aboutToAppear() { this.initData() } async initData() { //所有数据的集合 let result :Array = await getWeatherUtil.getWeathers(this.cityCodeList) for (let i = 0; i  { router.pushUrl({  url: \"pages/AddCity\",  params: { Codes: this.cityCodeList, Names: this.cityNameList  } }) }) Text(this.cityNameList[this.cityIndex]).fontSize(40).fontColor(Color.Orange) Button(\"删除\") .fontSize(25) .fontColor(Color.Gray) .opacity(0.7) .backgroundColor(\"#87CEEB\") .margin({ bottom: 15 }) .onClick(() => { AlertDialog.show({ title: \"删除\",  message: `你确定要删除${this.cityNameList[this.cityIndex]}消息吗?`,  confirm: { value: \"确定\", action: () => {  this.cityNameList = this.cityNameList.filter(item => item !== this.cityNameList[this.cityIndex])  this.cityCodeList = this.cityCodeList.filter(item => item !== this.cityCodeList[this.cityIndex])  this.cityWeatherList = this.cityWeatherList.filter(item => item !== this.cityWeatherList[this.cityIndex]) }  } }) }) }.height(\"10%\") .width(\"100%\") .justifyContent(FlexAlign.SpaceBetween) //城市切换 Tabs({ barPosition: BarPosition.Start, controller: this.tabcontroller }) { ForEach(this.cityWeatherList, (cityWeatherList: WeatherModel) => { TabContent() { cityView({ casts: cityWeatherList.forecasts[0].casts }) }.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj => obj === cityWeatherList))) }) } .barHeight(20) .barWidth(40) .onChange((index: number) => { this.cityIndex = index }) }.backgroundColor(\"#87CEEB\") .width(\"100%\").height(\"100%\") }}

二、源码

相关鸿蒙项目点此专栏

部分内容来源于网络🛜,若有侵权及时联系我,收到后会及时删除

Harmony鸿蒙实战开发项目-天气预报App【源码在文末】_鸿蒙天气预报

通过百度网盘分享的文件:…zip 链接:百度网盘 请输入提取码

文件已经加密,请点击下方名片获取源码

或:Lvnvn0508