【中工开发者】——气候查询，鸿蒙OS

引言

伴随智能手机的大规模普及，气候查询已然成为人们一样平常生存里不可或缺的关键构成部分。而鸿蒙操作体系（HarmonyOS）作为华为精心打造并推出的新一代智能终端操作体系，凭借其独特的技术架构与创新特性，为广大开发者们开启了一扇全新的开发大门，带来前所未有的开发体验。本文将会全方位、细致入微地先容基于鸿蒙 OS 开发一款气候查询应用的详细步骤与方法，其内容将完整覆盖从与数据接口进行对接获取景象信息，到实现都会信息管理中都会删除功能的一整套流畅流程，旨在为开发者们提供全面且极具价值的开发指引与参考范例
1. 数据接口获取

在开发气候查询应用之前，我们需要一个可靠的气候数据接口。这里我们可以选择公开的气候API，如高德地图、和风气候等。以高德地图为例，我们需要注册账号并获取一个API密钥（API Key），用于后续的数据请求。
1.1 获取API Key
访问OpenWeatherMap官网气候查询-基础 API 文档-开发指南-Web服务 API | 高德地图API气候查询-基础 API 文档-开发指南-Web服务 API | 高德地图API气候查询-基础 API 文档-开发指南-Web服务 API | 高德地图APIOpenWeatherMap官网，注册账号并订阅相应的服务，获取API Key。

2. 对象创建

在鸿蒙OS中，我们需要创建几个关键的对象来管理气候数据和用户界面。
2.1 气候数据模型

创建一个Casts类来存储气候数据，包罗白天 温度、夜晚温度、湿度、风向、等数据信息。

1. export class casts{
3.   date:string=''
4.   dayweather:string=''
5.   nightweather:string=''
6.   daytemp:number=0
7.   nighttemp:number=0
8.   daywind:string=''
9.   daypower:string=''
10.   daytemp_float:number=0
11.   nighttemp_float:number=0
13. }

复制代码

2.2 都会管理类

创建一个forecasts类来存储都会名称，代码，气候信息：

1. export class forecasts{
2.   city:string=''
3.   adcode:number=0
4.   casts:Array<casts>=[]
5. }
6. 2.3 城市管理类

复制代码

2.3 都会管理类

创建一个WeatherModel类来存储访问状态信息，都会信息等

1. export class WeatherModel{
2.   status:number=0
3.   count:number=0
4.   infocode:number=0
5.   forecasts:Array<forecasts> = []
6. }

复制代码

3. 获取数据

通过高德地图API获取指定都会的气候数据，并提供了并发请求多个都会气候的功能。代码中界说了一个getWeatherUtil类，其中包罗两个主要方法：
getWeather(cityCode)：这个方法继承一个都会代码作为参数，使用高德地图API的URL模板构建请求URL，并发送HTTP GET请求。假如请求乐成（响应码200），它将解析响应结果并使用Promise的resolve函数返回解析后的气候数据对象WeatherModel。
getWeathers(cityCodes)：这是一个异步方法，继承一个都会代码数组，使用getWeather方法为每个都会代码创建一个Promise，并使用Promise.all来并发实行这些Promise。当全部请求都完成后，它会遍历结果，打印每个都会的名字，并返回包罗全部气候数据的WeatherModel数组。

1. import {casts} from "../viewmodel/casts"
4. @Component
5. export struct cityView{
8.   @Builder weatherImage(dayweather: string) {
9.     if (dayweather === "晴") {
10.       Image($r('app.media.sun')).width(30)
11.     }
12.     if (dayweather === "多云") {
13.       Image($r("app.media.cloud")).width(30)
14.     }
15.     if (dayweather === "阴") {
16.       Image($r("app.media.cloud")).width(30)
17.     }
18.     if (dayweather.includes("雨")) {
19.       Image($r("app.media.rain")).width(30)
20.     }
21.   }
22.   //天气数据
23.   casts:Array<casts>=[]
26.   build() {
27.     Column(){
28.       ForEach(this.casts,(cast:casts)=>{
29.         if (this.casts[0]===cast){
30.           //上半部分 图片+当天天气
31.           //图片
32.           Row() {
33.             if (cast.dayweather === "晴") {
34.               Image($r('app.media.sun')).width(260)
35.             }
36.             if (cast.dayweather === "多云") {
37.               Image($r("app.media.cloud")).width(260)
38.             }
39.             if (cast.dayweather === "阴") {
40.               Image($r("app.media.cloud")).width(260)
41.             }
42.             if (cast.dayweather.includes("雨")) {
43.               Image($r("app.media.rain")).width(260)
44.             }
45.           }.height("30%")
46.           Column(){
47.             //温度天气
48.             Row() {
49.               Text(cast.dayweather).fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bold)
50.               Text("  " + cast.daytemp + "°~" + cast.nighttemp + "°")
51.                 .fontSize(30)
52.                 .fontColor(Color.White)
53.                 .fontWeight(FontWeight.Bold)
54.             }
55.             //风力
56.             Row() {
57.               Text(cast.daywind + "风  ").fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bold)
58.               Text(cast.daypower + "级").fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bold)
59.             }
61.           }.margin({ top: 10 })
63.         }
64.       })
65.       //近期天气列表
66.       Column() {
67.         Text("查看近期天气").fontSize(26).margin({ top: 30 })
68.         //天气列表
69.         Row() {
70.           ForEach(this.casts, (cast: casts) => {
71.             Column() {
72.               Text(cast.date.substring(5))
73.               this.weatherImage(cast.dayweather)
74.               Blank()
75.               Text(cast.daytemp.toString())
76.               Line()
77.                 .width(20).height(80).startPoint([10, 0])
78.                 .endPoint([10, 70]).stroke(Color.Black)
79.                 .strokeWidth(3).strokeDashArray([10, 3])
80.               Text(cast.nighttemp.toString())
81.               Blank()
82.               this.weatherImage(cast.dayweather)
83.             }.height("90%").width("20%")
84.           })
85.         }
86.         .width("80%")
87.         .height("60%")
88.         .backgroundColor("#ffbab8b8")
89.         .opacity(0.5)
90.         .justifyContent(FlexAlign.SpaceAround)
92.       }.height("45%").width("100%")
94.     }.width("100%").height("100%")
100.   }
102. }

复制代码

4. 主页气候数据展示 

4.1 主页结构

该项目主页用于展示一个都会气候信息的界面。界面答应用户在差别都会的气候信息之间切换。组件在即将表现时会异步获取气候数据，并更新界面上表现的都会列表和气候信息。用户可以通过点击添加按钮跳转到添加都会的页面，并通过Tab组件检察各个都会的气候详情。以下是主页的结构代码：

1. import { cityView } from '../view/cityView'
2. import getWeatherUtil from "../viewmodel/getWeatherUtil"
3. import {WeatherModel} from "../viewmodel/WeatherModel"
4. import { router } from '@kit.ArkUI'
6. @Entry
7. @Component
8. struct Index {
9.   //城市代码集合
10.   @State cityCodeList :number[]=[110000,120000,130000]
11.   //城市名字集合
12.   @State cityNameList :string[]=[]
13.   //城市信息集合
14.   @State cityWeatherList :Array<WeatherModel>=[]
15.   //当前tab组件索引
16.   @State cityIndex: number = 0
17.   //tab控制器
18.   tabcontroller: TabsController = new TabsController()
20.   //tarBar 自定义函数
21.   @Builder tabBuild(index: number) {
22.     Circle({ width: 10, height: 10 }).fill(this.cityIndex === index ? Color.White : Color.Gray).opacity(0.2)
23.   }
27.   aboutToAppear(){
28.     this.initDate()
30.   }
31. async  initDate(){
32.     // let result :Array<WeatherModel> = getWeatherUtil.getWeathers(this.cityCodeList)
33.   let result :Array<WeatherModel>=await getWeatherUtil.getWeathers(this.cityCodeList)
34.    for (let i = 0; i < result.length; i++) {
35.      let ACityWeather = new WeatherModel()
36.      ACityWeather = result[i]
37.      this.cityWeatherList.push(ACityWeather)
38.      let cityName = result[i].forecasts[0].city
39.      this.cityNameList.push(cityName)
40.    }
41.   }
45.   build() {
46.     Column(){
47.       Row(){
48.       Button("添加")
49.         .fontSize(25)
50.         .fontColor(Color.Gray)
51.         .opacity(0.7)
52.         .backgroundColor("#87CEEB")
53.         .margin({ bottom: 15 })
54.         .onClick(() => {
55.           router.pushUrl({
56.             url: "pages/AddCity",
57.             params: {
58.               Codes : this.cityCodeList,
59.               Names : this.cityNameList
60.             }
61.           })
62.         })
66.       Text(this.cityNameList[this.cityIndex]).fontSize(40).fontColor(Color.Orange)
70.       Button("删除")
71.         .fontSize(25)
72.         .fontColor(Color.Gray)
73.         .opacity(0.7)
74.         .backgroundColor("#87CEEB")
75.         .margin({ bottom: 15 })
79.       }.height("10%")
80.       .width("100%")
81.       .justifyContent(FlexAlign.SpaceBetween)
86.       //信息布局
88.       Tabs({ barPosition: BarPosition.Start, controller: this.tabcontroller }) {
89.         ForEach(this.cityWeatherList,(cityWeather:WeatherModel)=>{
90.           TabContent(){
91.             cityView({casts:cityWeather.forecasts[0].casts})
92.           }.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj=>obj===cityWeather)))
93.         })
94.       }.barWidth(20)
95.        .barHeight(40)
96.       .onChange((index:number)=>{
97.         this.cityIndex = index
98.       })
103.     }.backgroundColor("#87CEEB")
104.     .width("100%").height("100%")
105.   }
106. }

复制代码

• 4.2 气候信息展示
  

在差别的气候信息的展示中用ForEach循环来遍历气候数据数组casts，并为每条气候数据生成对应的视图。界面中包罗了气候图标、温度表现、风力描述以及日期标记，使用差别的结构和样式来优化信息的展示。

1. import {casts} from "../viewmodel/casts"
4. @Component
5. export struct cityView{
8.   @Builder weatherImage(dayweather: string) {
9.     if (dayweather === "晴") {
10.       Image($r('app.media.sun')).width(30)
11.     }
12.     if (dayweather === "多云") {
13.       Image($r("app.media.cloud")).width(30)
14.     }
15.     if (dayweather === "阴") {
16.       Image($r("app.media.cloud")).width(30)
17.     }
18.     if (dayweather.includes("雨")) {
19.       Image($r("app.media.rain")).width(30)
20.     }
21.   }
22.   //天气数据
23.   casts:Array<casts>=[]
26.   build() {
27.     Column(){
28.       ForEach(this.casts,(cast:casts)=>{
29.         if (this.casts[0]===cast){
30.           //上半部分 图片+当天天气
31.           //图片
32.           Row() {
33.             if (cast.dayweather === "晴") {
34.               Image($r('app.media.sun')).width(260)
35.             }
36.             if (cast.dayweather === "多云") {
37.               Image($r("app.media.cloud")).width(260)
38.             }
39.             if (cast.dayweather === "阴") {
40.               Image($r("app.media.cloud")).width(260)
41.             }
42.             if (cast.dayweather.includes("雨")) {
43.               Image($r("app.media.rain")).width(260)
44.             }
45.           }.height("30%")
46.           Column(){
47.             //温度天气
48.             Row() {
49.               Text(cast.dayweather).fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bold)
50.               Text("  " + cast.daytemp + "°~" + cast.nighttemp + "°")
51.                 .fontSize(30)
52.                 .fontColor(Color.White)
53.                 .fontWeight(FontWeight.Bold)
54.             }
55.             //风力
56.             Row() {
57.               Text(cast.daywind + "风  ").fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bold)
58.               Text(cast.daypower + "级").fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bold)
59.             }
61.           }.margin({ top: 10 })
63.         }
64.       })
65.       //近期天气列表
66.       Column() {
67.         Text("查看近期天气").fontSize(26).margin({ top: 30 })
68.         //天气列表
69.         Row() {
70.           ForEach(this.casts, (cast: casts) => {
71.             Column() {
72.               Text(cast.date.substring(5))
73.               this.weatherImage(cast.dayweather)
74.               Blank()
75.               Text(cast.daytemp.toString())
76.               Line()
77.                 .width(20).height(80).startPoint([10, 0])
78.                 .endPoint([10, 70]).stroke(Color.Black)
79.                 .strokeWidth(3).strokeDashArray([10, 3])
80.               Text(cast.nighttemp.toString())
81.               Blank()
82.               this.weatherImage(cast.dayweather)
83.             }.height("90%").width("20%")
84.           })
85.         }
86.         .width("80%")
87.         .height("60%")
88.         .backgroundColor("#ffbab8b8")
89.         .opacity(0.5)
90.         .justifyContent(FlexAlign.SpaceAround)
92.       }.height("45%").width("100%")
94.     }.width("100%").height("100%")
100.   }
102. }

复制代码

5. 都会添加与删除

提供用户界面让用户可以或许添加新的都会到都会列表,同样，提供用户界面让用户可以或许从都会列表中删除都会。

1. import router from '@ohos.router'
3. interface GeneratedTypeLiteralInterface_1 {
4.   Codes: number[];
5. }
7. interface GeneratedTypeLiteralInterface_2 {
8.   Names: string[];
9. }
11. @Entry
12. @Component
13. struct AddCity {
15.   @State AllCityCodeList :Array<number> = [110000,120000,130000,140000,210000,220000,310000]
16.   @State AllCityNameList :Array<string> = ["北京市","天津市","河北省","山西省","辽宁省","吉林省","上海市"]
18.   //当前城市代码列表 接收传入数据的载体
19.   @State cityCodeList :Array<number> = []
20.   @State cityNameList :Array<string> = []
23.   onPageShow(){
24.     let params = router.getParams()
25.     //(user as { name: string }).name
26.     this.cityCodeList = (params as GeneratedTypeLiteralInterface_1).Codes
27.     this.cityNameList = (params as GeneratedTypeLiteralInterface_2).Names
28.   }
32.   build() {
33.     //加入
34.     Column(){
35.       Row(){
36.         Text("添加城市列表").fontSize(35).fontColor(Color.White)
37.         Blank()
38.         Button("完成").backgroundColor("").fontSize(26)
39.           .onClick(()=>{
40.             router.back({
41.               url:"pages/Index",
42.               params:{
43.                 Codes:this.cityCodeList
44.               }
45.             })
46.           })
47.       }.height("10%").width("95%")
48.       //城市列表
49.       Column() {
50.         List() {
51.           ForEach(this.AllCityNameList, (name: string) => {
52.             ListItem() {
53.               if (this.cityNameList.includes(name)) {
54.                 Column() {
55.                   Row() {
56.                     Text(name).fontSize(35).fontColor(Color.White).width("60%")
57.                       .margin({ top: 20, left: 30 })
58.                     Blank()
59.                     Text("已添加").backgroundColor("").fontSize(18)
60.                       .margin({ right: 5 })
61.                       .opacity(0.8)
62.                   }.width("100%")
64.                   Blank()
65.                   Divider().strokeWidth(5)
66.                 }.height(90).width("100%").margin({ top: 20 })
67.                 .backgroundColor("#4682B4")
68.               } else {
69.                 Column() {
70.                   Row() {
71.                     Text(name).fontSize(35).fontColor(Color.White).width("60%")
72.                       .margin({ top: 20, left: 30 })
73.                     Blank()
74.                     Button("添加").backgroundColor("").fontSize(18)
75.                       .margin({ right: 5 })
76.                       .onClick(() => {
77.                         //根据name 获取所在索引
78.                         let index = this.AllCityNameList.findIndex(obj => obj === name)
79.                         console.log("index:"+index)
80.                         //根据索引获得 城市对应的编码
81.                         let cityCode: number = this.AllCityCodeList[index]
82.                         console.log("cityCode= "+cityCode)
83.                         //将编码加入列表
84.                         this.cityCodeList.push(cityCode)
85.                         this.cityNameList.push(name)
86.                         console.log(this.cityCodeList.toString())
87.                       })
88.                   }.width("100%")
90.                   Blank()
91.                   Divider().strokeWidth(5)
92.                 }.height(90).width("100%").margin({ top: 20 })
93.                 .backgroundColor("#87CEEB")
94.               }
97.             }
98.           })
99.         }
100.       }.width("100%").height("90%")
101.     }.width("100%").height("100%").backgroundColor("#87CEFA")
102.   }
103. }

复制代码

6.功能展示


 

7.项目不足与经验总结
 

7.1项目计划不足

错误处理机制不统一：差别的请求有差别的错误处理方式，缺少统一的管理。
数据缓存策略不美满：缓存过期时间与革新机制不敷灵活，可能导致数据滞后。
网络请求与组件耦合：网络请求和 UI 组件耦合过深，应该解耦。
过度依赖外部 API：对第三方 API 依赖过高，缺少容错机制和备用方案。
UI 计划与用户体验欠缺：UI 交互和细节优化不足，加载提示和数据展示有待改进。
气候数据展示条理不清晰：展示的气候数据缺乏优先级和条理感。
缺少单元测试与主动化测试：缺少美满的单元测试和主动化测试，难以及时发现问题。
7.2经验总结

模块化计划：功能模块化进步代码可维护性和可扩展性。
公道使用数据缓存：优化缓存机制，减少网络请求，进步用户体验。
UI 交互优化：通过动态效果和反馈提拔用户体验。
提前规划错误处理：统一的错误处理机制提拔代码可靠性。
第三方 API 备选方案：避免过度依赖单一 API，增长容错机制。
清晰的数据结构界说：明确数据格式和结构，包管一致性。
可扩展性：计划时考虑将来功能扩展，保持灵活性。
参考与主要借鉴网址：GitHub - YeMengLiChou/LuckWeather-HarmonyApp: 鸿蒙课设开发——好气候App

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。