[中工开发者]鸿蒙项目开发——幸运气候app的实现

“本学期学习了鸿蒙开发课程，想通过一个小项目检验一下自己所学，下面把该项目总结一下，希望对学习鸿蒙开发的小伙伴提供一些参考。”
如：“学习鸿蒙正其时，作为中工的一名学生，现在总结一下希望为同砚们后续学习提供参考。”

一.功能实现总结

这个鸿蒙气候应用通过直观的界面设计，整合多种功能，为用户提供全面的气候服务。以下是具体实现的功能细节：
1. 及时气候信息展示

• 当前位置：应用通过定位功能，表现用户所在位置（如“河南省·临颍”），提供本地化的气候预报。
  
• 当前气候状态：
  
  
  
  • 及时温度（如 5°C），以夺目标大字体表现。
    
  • 当前气候状态（如“雾”）及当天的最高温度和最低温度（如 8°C / 1°C）。
    
  
  
• 氛围质量指数：例如表现氛围状态为“轻度污染”，提示用户氛围质量状态。
  
• 降水环境：如“暂无降水”，表现短时间内无雨雪气候。
  

2. 短期气候预报

• 提供将来几天（如3天）的气候信息，包括：
  
  
  
  • 天天的气候状态（如晴、雾）。
    
  • 温度范围（最高温度/最低温度，如8°C / 1°C）。
    
  • 氛围质量等级（如“优”）。
    
  
  
• 配合简便的气候图标，让用户快速把握将来气候厘革趋势。
  

3. 24小时气候猜测

• 针对当日气候，提供逐小时的温度、湿度、风速、降水概率等数据，帮助用户更精准地规划活动。
  

4. 高级景象信息

• 湿度：及时湿度值（如96%）。
  
• 体感温度：表现比实际温度更靠近人体感知的温度。
  
• 紫外线强度：如“1级”，提示日晒强度适中。
  
• 气压：提供及时气压值（如1017 hPa），供需要更精细景象信息的用户参考。
  
• 风速与风向：如“南风1级”，通过图形化展示风的方向与强度。
  

5. 长期气候预报

• 提供一个“查看近7天气候”的按钮，支持更具体的长期气候查询，便于用户提前做好预备。
  

---

界面设计与用户体验

• 简便高效：
  
  
  
  • 使用极简风格，重点信息（如温度、气候状态）以大字体和夺目标结构突出，信息分类清晰。
    
  • 图标搭配文字，便于快速理解气候状态。
    
  
  
• 高交互性：
  
  
  
  • 通过按钮设计（如“查看近7天气候”），引导用户探索更多功能。
    
  • 多屏信息整合，及时数据与短期预报联合，满足多样化需求。
    
  
  
• 贴心功能：
  
  
  
  • 氛围质量、湿度、紫外线等指标提供全面的数据参考，覆盖多种使用场景，如穿衣、出行等。
    
  
  

---

适用场景

• 一样平常出行：查看及时气候、氛围质量和降水信息，便于出行安排。
  
• 活动计划：通过短期或长期气候预报规划外出活动。
  
• 康健防护：参考湿度、紫外线强度和氛围质量，及时做好防护措施。
  

二. 告急代码实现

 1. 告急页面项目代码展示

实现代码项目截图

1. import log from '../../common/log'
2. import { promptAction } from '@kit.ArkUI'
3. import {
4.     ForecastWeatherDayResult,
5.     ForecastWeatherHourResult,
6.     NowAirResult,
7.     RealWeatherResult
8. } from '../../network/type'
9. import { distributedKVStore } from '@kit.ArkData'
10. import {
11.     checkDataValidate,
12.     fetchAndCachedForecast24HourWeather,
13.     fetchAndCachedForecast7DayWeather,
14.     fetchAndCachedNowAirData,
15.     fetchAndCachedRealWeatherData,
16.     getWeatherKvStore
17. } from '../../utils/WeatherKvStore'
18. import * as constants from '../../common/constants'
19. import { RealTemperature } from './RealTemperature'
20. import { Fetch3dayWeather } from './Fetch3dayWeather'
21. import { DayTrendPageNavParam } from '../DayTrend/DayTrendPage'
22. import { Forecast24HourWetherComponent } from './Forecast24Hour/Forecast24HourWeather'
23. import { RealTimeWeather } from './RealTimeWeather'
24. import { BusinessError } from '@kit.BasicServicesKit'
26. export interface CityWeatherOptions {
27.     location: string,
28. }
30. interface RealTemperatureVO {
31.     curTemp: number
32.     weatherDesc: string
33.     airQualityIndex: number
34.     airQualityDesc: string,
35.     rain: number,
36.     highestTemp: number,
37.     lowestTemp: number,
38. }
40. function transformRealTemperatureVO(
41.     realWeatherData: RealWeatherResult,
42.     airData: NowAirResult,
43.     forecastData: ForecastWeatherDayResult
44. ) {
45.     const vo: RealTemperatureVO = {
46.         curTemp: parseInt(realWeatherData.now.temp),
47.         weatherDesc: realWeatherData.now.text,
48.         airQualityIndex: parseInt(airData.now.aqi),
49.         airQualityDesc: airData.now.category,
50.         rain: parseFloat(realWeatherData.now.precip),
51.         highestTemp: parseInt(forecastData.daily[0].tempMax),
52.         lowestTemp: parseInt(forecastData.daily[0].tempMin),
54.     }
55.     return vo
56. }
59. /**
60. * 城市天气的主要组件
61. * 主要逻辑：
62. * 1. 从本地缓存中获取历史数据，使用该数据，如果超过过期时间，进行更新~
63. * 2. 下拉刷新操作
64. * */
65. @Component
66. export struct CityWeather {
67.     @Consume("pageStack") pathStack: NavPathStack
68.     @Prop options: CityWeatherOptions
69.     /** 刷新状态 */
70.     @State
71.     private refreshing: boolean = false
72.     /** 当前刷新完成数 */
73.     @State
74.     private refreshingCounter: number = 0
75.     @State
76.     private refreshingText: string = '刷新中...'
78.     private kvStore?: distributedKVStore.DeviceKVStore = undefined
79.     /** 实时天气数据 */
80.     @State
81.     @Watch('updateRealTemperatureVOData')
82.     private realWeatherData?: RealWeatherResult = undefined
83.     /** 7天预测数据 */
84.     @State
85.     @Watch('updateRealTemperatureVOData')
86.     private forecastDayWeatherData?: ForecastWeatherDayResult = undefined
87.     /** 24小时预测数据 */
88.     @State
89.     private forecastHourWeatherData?: ForecastWeatherHourResult = undefined
90.     /** 空气数据 */
91.     @State
92.     @Watch('updateRealTemperatureVOData')
93.     private airQualityData?: NowAirResult = undefined
94.     /** 实时天气数据VO */
95.     @State
96.     private realTemperatureVOData?: RealTemperatureVO = undefined
99.     private updateRealTemperatureVOData(pro: string) {
100.         if (pro === 'realWeatherData' || pro === 'forecastDayWeatherData' || pro === 'airQualityData') {
101.             if (this.realWeatherData && this.forecastDayWeatherData && this.airQualityData) {
102.                 this.realTemperatureVOData = transformRealTemperatureVO(this.realWeatherData, this.airQualityData, this.forecastDayWeatherData)
103.             }
104.         }
105.     }
106.     /**
107.      * 开始刷新操作
108.      * */
109.     private startRefreshing() {
110.         this.refreshing = true
111.         this.refreshingCounter++
112.         this.refreshingText = "刷新中..."
113.     }
115.     /**
116.      * 刷新完毕操作
117.      * */
118.     private completedRefreshing() {
119.         this.refreshingCounter--;
120.         if (this.refreshingCounter === 0) {
121.             this.refreshingText = "刷新成功！"
122.             setTimeout(() => {
123.                 this.refreshing = false
124.             }, 500)
125.         }
126.     }
128.     /**
129.      * 刷新实时天气数据(实时温度、空气数据、7天数据)
130.      * */
131.     private async fetchAndCachedRealWeatherData() {
132.         this.startRefreshing()
133.         try {
134.             this.realWeatherData = await fetchAndCachedRealWeatherData(this.options.location, this.kvStore!)
135.             this.airQualityData = await fetchAndCachedNowAirData(this.options.location, this.kvStore!)
136.             this.forecastDayWeatherData = await fetchAndCachedForecast7DayWeather(this.options.location, this.kvStore!)
138.             // 更新状态变量
139.             this.realTemperatureVOData =
140.                 transformRealTemperatureVO(this.realWeatherData, this.airQualityData, this.forecastDayWeatherData)
142.         } catch (error) {
143.             promptAction.showToast({
144.                 message: '网络错误！请重新刷新！'
145.             })
146.             log.error('fetchRealWeatherData', error)
147.         } finally {
148.             this.completedRefreshing()
149.         }
150.     }
152.     private fetchAndCachedRealAirData() {
153.         console.log('fetchAndCachedRealAirData kv store', this.kvStore)
155.         this.startRefreshing()
156.         fetchAndCachedNowAirData(this.options!.location, this.kvStore!)
157.             .then((res) => {
158.                 this.airQualityData = res
159.             })
160.             .catch((err: Error) => {
161.                 log.error('fetchAndCachedAirData Failed!', JSON.stringify(err))
162.                 promptAction.showToast({
163.                     message: '获取数据失败，请检查网络！'
164.                 })
165.             })
166.             .finally(() => {
167.                 this.completedRefreshing()
168.             })
169.     }
171.     /**
172.      * 获取未来7天的数据
173.      * */
174.     private fetchAndCachedForecastDayWeatherData() {
175.         this.startRefreshing()
176.         fetchAndCachedForecast7DayWeather(this.options!.location, this.kvStore!)
177.             .then((res) => {
178.                 this.forecastDayWeatherData = res
179.             })
180.             .catch((err: Error) => {
181.                 log.error("fetchForecastWeatherDayData failed", err)
182.                 promptAction.showToast({
183.                     message: '获取数据失败，请检查网络！'
184.                 })
185.             })
186.             .finally(() => {
187.                 this.completedRefreshing()
188.             })
189.     }
191.     /**
192.      * 获取未来24小时的数据
193.      * */
194.     private fetchAndCachedForecastHourWeatherData() {
195.         this.startRefreshing()
196.         console.log('fetchForecastHourWeatherData kv store', this.kvStore)
197.         fetchAndCachedForecast24HourWeather(this.options!.location, this.kvStore!)
198.             .then((res) => {
199.                 this.forecastHourWeatherData = res
200.             })
201.             .catch((err: Error) => {
202.                 log.error("fetchForecastHourWeatherData failed", err)
203.                 promptAction.showToast({
204.                     message: '获取数据失败，请检查网络！'
205.                 })
206.             })
207.             .finally(() => {
208.                 this.completedRefreshing()
209.             })
210.     }
212.     /** 刷新所有天气数据 */
213.     private refreshAllWeatherData() {
214.         this.loadDataFromKvStore()
215.     }
217.     /**
218.      * 从本地读取缓存的数据，如果没有或者过期，则执行刷新操作
219.      * */
220.     private async loadDataFromKvStore() {
221.         // 当前实时天气
222.         this.startRefreshing()
223.         checkDataValidate<RealWeatherResult>(
224.             this.kvStore!,
225.             constants.getRealWeatherDataKey(this.options.location),
226.             5 * 60 * 1000,
227.         )
228.             .then((res) => {
229.                 console.log(`checkDataValidate<RealWeatherResult> need refresh: ${res === undefined}`)
230.                 if (res) {
231.                     this.realWeatherData = res
232.                 } else {
233.                     this.fetchAndCachedRealWeatherData()
234.                 }
235.             })
236.             .catch((err: BusinessError) => {
237.                 console.error(`checkDataValidate<RealWeatherResult> failed: (${err.code}) ${err.message}`)
238.             })
239.             .finally(() => {
240.                 this.completedRefreshing()
241.             })
243.         // 当前空气质量数据
244.         this.startRefreshing()
245.         checkDataValidate<NowAirResult>(
246.             this.kvStore!,
247.             constants.getRealWeatherAirDataKey(this.options.location),
248.             5 * 60 * 1000,
249.         )
250.             .then((res) => {
251.                 console.log(`checkDataValidate<NowAirResult> need refresh: ${res === undefined}`)
252.                 if (res) {
253.                     this.airQualityData = res
254.                 } else {
255.                     this.fetchAndCachedRealAirData()
256.                 }
257.             })
258.             .catch((err: BusinessError) => {
259.                 console.error(`checkDataValidate<NowAirResult> failed: (${err.code}) ${err.message}`)
260.             })
261.             .finally(() => {
262.                 this.completedRefreshing()
263.             })
265.         // 当前7天天气数据
266.         this.startRefreshing()
267.         checkDataValidate<ForecastWeatherDayResult>(
268.             this.kvStore!,
269.             constants.getForecastWeatherDayDataKey(this.options.location),
270.             10 * 60 * 1000,
271.         )
272.             .then((res) => {
274.                 console.log(`checkDataValidate<ForecastWeatherDayResult> need refresh: ${res === undefined}`)
275.                 if (res) {
276.                     this.forecastDayWeatherData = res
277.                 } else {
278.                     this.fetchAndCachedForecastDayWeatherData()
279.                 }
280.             })
282.             .catch((err: BusinessError) => {
283.                 console.error(`checkDataValidate<ForecastWeatherDayResult> failed: (${err.code}) ${err.message}`)
284.             })
285.             .finally(() => {
286.                 this.completedRefreshing()
287.             })
289.         this.startRefreshing()
290.         checkDataValidate<ForecastWeatherHourResult>(
291.             this.kvStore!,
292.             constants.getForecastWeatherHourDataKey(this.options.location),
293.             10 * 60 * 1000,
294.         )
295.             .then((res) => {
296.                 console.log(`checkDataValidate<ForecastWeatherHourResult> need refresh: ${res === undefined}`)
297.                 if (res) {
298.                     this.forecastHourWeatherData = res
299.                 } else {
300.                     this.fetchAndCachedForecastHourWeatherData()
301.                 }
302.             })
303.             .catch((err: BusinessError) => {
304.                 console.error(`checkDataValidate<ForecastWeatherHourResult> failed: (${err.code}) ${err.message}`)
305.             })
306.             .finally(() => {
307.                 this.completedRefreshing()
308.             })
309.     }
311.     private navigateToTrendPage() {
312.         const data: DayTrendPageNavParam = {
313.             shouldShowNavigation: false,
314.             added: true,
315.             locationID: this.options.location,
316.             cityName: '',
317.             data: this.forecastDayWeatherData!
318.         }
319.         this.pathStack.pushDestinationByName("day_trend", data, true)
320.     }
322.     aboutToAppear(): void {
323.         // 获取本地数据库
324.         getWeatherKvStore(getContext(this))
325.             .then((store) => {
326.                 this.kvStore = store
327.                 this.loadDataFromKvStore()
328.             })
329.     }
331.     build() {
332.         Refresh({ refreshing: $$this.refreshing, promptText: this.refreshingText }) {
333.             Scroll() {
335.                 Column({ space: 24 }) {
336.                     if (this.realTemperatureVOData) {
337.                         Column({ space: 24 }) {
338.                             RealTemperature({
339.                                 options: {
340.                                     curTemp: this.realTemperatureVOData!.curTemp,
341.                                     weatherText: this.realTemperatureVOData!.weatherDesc,
342.                                     highTemp: this.realTemperatureVOData!.highestTemp,
343.                                     lowTemp: this.realTemperatureVOData!.lowestTemp,
344.                                     rain: this.realTemperatureVOData!.rain,
345.                                     airQualityIndex: this.realTemperatureVOData!.airQualityIndex,
346.                                     airQualityDesc: this.realTemperatureVOData!.airQualityDesc,
347.                                 }
348.                             })
350.                             Fetch3dayWeather({
351.                                 options: {
352.                                     dataList: this.forecastDayWeatherData!.daily,
353.                                     onNavigate: () => {
354.                                         this.navigateToTrendPage()
355.                                     }
356.                                 }
357.                             })
358.                         }
359.                         .alignItems(HorizontalAlign.Center)
360.                         .justifyContent(FlexAlign.SpaceBetween) // 保证分开两部分
361.                         .width('100%')
362.                         .height('100%')
365.                         Column({ space: 24 }) {
366.                             Forecast24HourWetherComponent({
367.                                 dataList: this.forecastHourWeatherData?.hourly
368.                             })
369.                                 .height(300)
371.                             RealTimeWeather({
372.                                 options: {
373.                                     sunset: this.forecastDayWeatherData!.daily[0].sunset ?? '',
374.                                     sunrise: this.forecastDayWeatherData!.daily[0].sunrise ?? '',
375.                                     moonrise: this.forecastDayWeatherData!.daily[0].moonrise ?? '',
376.                                     moonset: this.forecastDayWeatherData!.daily[0].moonset ?? '',
377.                                     uvIndex: this.forecastDayWeatherData!.daily[0].uvIndex,
378.                                     realData: this.realWeatherData!
379.                                 }
380.                             })
381.                         }
382.                     }
383.                 }
384.                 .width("100%")
385.                 .padding({ left: 16, right: 16 })
386.             }
387.             .height('100%')
388.             .width('100%')
389.             .scrollable(ScrollDirection.Vertical)
390.             .scrollBar(BarState.Off)
391.         }
392.         .height('100%')
393.         .width('100%')
394.         .onRefreshing(() => {
395.             this.refreshAllWeatherData()
396.         })
397.     }
398. }

复制代码

这段代码实现了城市气候数据展示与交互功能的组件。通过与气候相干的 API 集成，组件能及时表现城市气候信息并支持革新操作，同时通过缓存优化了性能。
2. 告急对象创建与模块代码展示

1. import { RealWeatherResult } from '../network/type'
3. export const RealWeatherResultList: RealWeatherResult[] = [
4.     {
5.         code: '300',
7.         /**
8.          * 最近更新时间
9.          * */
10.         updateTime: new Date(),
12.         /** 当前数据的响应式页面 */
13.         fxLink: 'string',
14.         now: {
15.             /** 数据观测时间 */
16.             obsTime: "string",
17.             /** 温度，默认单位摄氏度 */
18.             temp: '30',
19.             /** 体感温度 */
20.             feelsLike: "string",
21.             /** 图标代码 */
22.             icon: 'string',
23.             /** 天气描述 */
24.             text: 'string',
25.             /** 风向360角 */
26.             wind360: 'string',
27.             /** 风向 */
28.             windDir: 'string',
29.             /** 风力等级 */
30.             windScale: 'string',
31.             /** 风速 km/h */
32.             windSpeed: 'string',
33.             /** 湿度 % */
34.             humidity: 'string',
35.             /** 当前小时累计降水量，mm */
36.             precip: 'string',
37.             /** 大气压强，百帕 */
38.             pressure: 'string',
39.             /** 能见度， km */
40.             vis: 'string',
41.         },
42.         refer: {
43.             sources: [],
44.             license: []
45.         }
46.     }

复制代码

1. export class LocationBean {
2.     /** 城市名称 */
3.     name: string;
4.     /** 城市id， location要用的 */
5.     id: string;
6.     /** 城市经度 */
7.     lat: string;
8.     /** 城市纬度 */
9.     lon: string;
10.     /** 上级行政区划名称 */
11.     adm2: string;
12.     /** 所属一级形成区域 */
13.     adm1: string;
14.     /** 所属国家名称 */
15.     country: string;
16.     /** 所处时区 */
17.     tz: string;
18.     /** UTC事件偏移的小时数 */
19.     utcOffset: string;
20.     /** 是否处于夏令时，1是0否 */
21.     isDst: string;
22.     /** 城市属性 */
23.     type: string;
24.     /** 地区评分 */
25.     rank: string;
26.     /** 该城市的天气预报网页链接 */
27.     fxLink: string;
29.     constructor(
30.         name: string,
31.         id: string,
32.         lat: string,
33.         lon: string,
34.         adm2: string,
35.         adm1: string,
36.         country: string,
37.         tz: string,
38.         utcOffset: string,
39.         isDst: string,
40.         type: string,
41.         rank: string,
42.         fxLink: string
43.     ) {
44.         this.name = name;
45.         this.id = id;
46.         this.lat = lat;
47.         this.lon = lon;
48.         this.adm2 = adm2;
49.         this.adm1 = adm1;
50.         this.country = country;
51.         this.tz = tz;
52.         this.utcOffset = utcOffset;
53.         this.isDst = isDst;
54.         this.type = type;
55.         this.rank = rank;
56.         this.fxLink = fxLink;
57.     }
58. }

复制代码

1. export interface CityModel {
2.     /** 城市名字 */
3.     cityName: string,
5.     /** id */
6.     locationID: string,
8.     /** 所属省份 */
9.     provinceName: string,
11.     /** 经度 */
12.     longitude: number,
14.     /** 纬度 */
15.     latitude: number,
17.     /** 定位城市 */
18.     isLocationCity: boolean,
20.     /**
21.      * 创建时间
22.      * */
23.     createTimestamp: number,
24. }
27. export interface RealWeatherData {
28.     /** 数据观测时间 */
29.     obsTime: string,
31.     /** 温度，默认单位摄氏度 */
32.     temp: string,
34.     /** 体感温度 */
35.     feelsLike: string,
37.     /** 图标代码 */
38.     icon: string,
40.     /** 天气描述 */
41.     text: string,
43.     /** 风向360角 */
44.     wind360: string,
46.     /** 风向 */
47.     windDir: string,
49.     /** 风力等级 */
50.     windScale: string,
52.     /** 风速 km/h */
53.     windSpeed: string,
55.     /** 湿度 % */
56.     humidity: string,
58.     /** 当前小时累计降水量，mm */
59.     precip: string,
61.     /** 大气压强，百帕 */
62.     pressure: string,
64.     /** 能见度， km */
65.     vis: string,
67.     /** 云量，百分比，可能为空 */
68.     cloud?: string,
70.     /** 露点温度，可能为空 */
71.     dew?: string,
72. }

复制代码

3. 气候数据的获取功能告急代码展示

1. import { API_KEY } from '../common/config'
2. import { request } from '../common/request'
3. import {
4.     ForecastWeatherDayResult,
5.     ForecastWeatherHourResult,
6.     LocationParam,
7.     LocationResult,
8.     NowAirResult,
9.     RealWeatherResult,
10.     WeatherIndexResult,
11.     WeatherParam
12. } from './type'
14. /**
15. * 通过经纬度查询当前城市信息
16. * @param {string} lon 经度，十进制最多两位小数
17. * @param {string} lat 纬度，十进制最多两位小数
18. * */
19. export function fetchCityByLatitudeAndLongitude(lon: number, lat: number): Promise<LocationResult> {
20.     return request<LocationParam, LocationResult>('https://geoapi.qweather.com/v2/city/lookup', {
21.         useBaseUrl: false,
22.         param: {
23.             key: API_KEY,
24.             location: `${lon.toFixed(2)},${lat.toFixed(2)}`,
25.             range: 'cn',
26.             number: 20,
27.         }
28.     })
29. }
32. /**
33. * 获取到实时天气
34. * */
35. export function     fetchRealWeather(
36.     location: string,
37. ): Promise<RealWeatherResult> {
38.     return request<WeatherParam, RealWeatherResult>('/v7/weather/now', {
39.         param: {
40.             key: API_KEY,
41.             location: location
42.         }
43.     })
44. }
46. /**
47. * 获取未来3天天气预报
48. * */
49. export function fetchForecast3DayWeather(
50.     location: string
51. ): Promise<ForecastWeatherDayResult> {
52.     return request<WeatherParam, ForecastWeatherDayResult>('/v7/weather/3d', {
53.         param: {
54.             key: API_KEY,
55.             location: location
56.         }
57.     })
58. }
60. /**
61. * 获取未来7天天气预报
62. * */
63. export function fetchForecast7DayWeather(
64.     location: string
65. ): Promise<ForecastWeatherDayResult> {
66.     return request<WeatherParam, ForecastWeatherDayResult>('/v7/weather/7d', {
67.         param: {
68.             key: API_KEY,
69.             location: location
70.         }
71.     })
72. }
75. /**
76. * 获取未来24小时天气预报
77. * */
78. export function fetchForecast24HourWeather(
79.     location: string
80. ): Promise<ForecastWeatherHourResult> {
81.     return request<WeatherParam, ForecastWeatherHourResult>('/v7/weather/24h', {
82.         useBaseUrl: false,
83.         param: {
84.             key: API_KEY,
85.             location: location
86.         },
88.     })
89. }
91. /*
92. * 根据关键字获取城市信息
93. * */
94. export function fetchCityInfoByKeyWord(
95.     keyword: string
96. ): Promise<LocationResult> {
97.     return request<LocationParam, LocationResult>('https://geoapi.qweather.com/v2/city/lookup', {
98.         param: {
99.             key: API_KEY,
100.             location: keyword
101.         }
102.     })
103. }
105. /**
106. * 获取空气质量数据
107. * */
108. export function fetchNowAir(
109.     location: string,
110. ): Promise<NowAirResult> {
111.     return request<WeatherParam, NowAirResult>('/v7/air/now', {
112.         param: {
113.             key: API_KEY,
114.             location: location
115.         }
116.     })
117. }
119. /**
120. * 获取天气指数
121. * */
122. export function fetchWeatherIndices(
123.     location: string,
124. ): Promise<WeatherIndexResult> {
125.     return request<WeatherParam, WeatherIndexResult>('/v7/indices/1d', {
126.         param: {
127.             key: API_KEY,
128.             location: location
129.         }
130.     })
132. }

复制代码

该代码文件是项目标核心数据交互模块，完成了：

• 及时气候与猜测数据的获取：涵盖从当前到将来 7 天的气候数据。
  
• 氛围质量与生活指数的查询：提供额外的环境和生活信息。
  
• 城市定位与查询：支持自动定位和关键字搜索。
  

通过 API 的分层封装，代码清晰易扩展，便于后续功能升级和维护。
4. 搜索功能组件代码实现告急展示

1. import { CityMangerModel2, CityWeatherVO } from '../../model/CityManagerModel2'
2. import { CityModel } from '../../model/CityModel'
3. import { fetchCityInfoByKeyWord } from '../../network/api'
4. import { Location, LocationResult } from '../../network/type'
5. import { SearchResult } from './SearchResult'
6. import { CityManager } from './CityManager'
8. /*
9. * 搜索
10. * */
11. @Component
12. export struct SearchLink {
13.     result?: LocationResult
14.     @State locations: Location[] = []
15.     @State
16.     isShow: boolean = false
17.     @Link
18.     dataList: CityMangerModel2[]
19.     @Link
20.     tureDataList: CityWeatherVO[]
21.     @Link citiesInfo: CityModel[]
22.     private searchDebounceId = -1
26.     /**
27.      * 搜索结果变化触发api搜索
28.      * */
29.     private searchValueChange(value: string) {
30.         if (value) {
31.             if (this.searchDebounceId != -1) {
32.                 clearTimeout(this.searchDebounceId)
33.             }
34.             this.searchDebounceId = setTimeout(() => {
35.                 fetchCityInfoByKeyWord(value).then(value1 => {
36.                     this.result = value1
37.                     this.locations = value1.location
38.                     this.isShow = true
39.                 })
40.             }, 300)
42.         } else {
43.             clearTimeout(this.searchDebounceId)
44.             this.searchDebounceId = -1
45.             this.isShow = false
46.         }
47.     }
49.     build() {
50.         Column() {
51.             //搜索框
52.             Row() {
53.                 Search({ placeholder: '搜索位置' })
54.                     .width('100%')
55.                     .onChange(value => {
56.                         this.searchValueChange(value)
57.                     })
58.             }
60.             //搜索结果列表
61.             Stack() {
62.                 CityManager({ dataList: this.dataList, trueDataList: this.tureDataList, citiesInfo: this.citiesInfo })
63.                 if (this.isShow) {
64.                     SearchResult({
65.                         locations: this.locations,
66.                         dataList: this.dataList,
67.                         tureDataList: this.tureDataList,
68.                         citiesInfo: this.citiesInfo
69.                     })
70.                 }
71.             }
72.         }
73.         .height('100%')
74.         .padding({ left: 20, right: 20, top: 20 })
75.         .alignItems(HorizontalAlign.Center)
77.     }
78. }

复制代码

这段代码实现了一个位置搜索功能的组件，用于根据用户输入的关键字搜索城市信息，并将结果展示出来。用户可以通过搜索框输入关键字，触发搜索 API 获取城市列表，并在界面中动态表现搜索结果。
5. 气候和城市相干的 API 请求功能实现告急代码展示

1. import { API_KEY } from '../common/config'
2. import { request } from '../common/request'
3. import {
4.     ForecastWeatherDayResult,
5.     ForecastWeatherHourResult,
6.     LocationParam,
7.     LocationResult,
8.     NowAirResult,
9.     RealWeatherResult,
10.     WeatherIndexResult,
11.     WeatherParam
12. } from './type'
14. /**
15. * 通过经纬度查询当前城市信息
16. * @param {string} lon 经度，十进制最多两位小数
17. * @param {string} lat 纬度，十进制最多两位小数
18. * */
19. export function fetchCityByLatitudeAndLongitude(lon: number, lat: number): Promise<LocationResult> {
20.     return request<LocationParam, LocationResult>('https://geoapi.qweather.com/v2/city/lookup', {
21.         useBaseUrl: false,
22.         param: {
23.             key: API_KEY,
24.             location: ${lon.toFixed(2)},${lat.toFixed(2)},
25.             range: 'cn',
26.             number: 20,
27.         }
28.     })
29. }
32. /**
33. * 获取到实时天气
34. * */
35. export function     fetchRealWeather(
36.     location: string,
37. ): Promise<RealWeatherResult> {
38.     return request<WeatherParam, RealWeatherResult>('/v7/weather/now', {
39.         param: {
40.             key: API_KEY,
41.             location: location
42.         }
43.     })
44. }
46. /**
47. * 获取未来3天天气预报
48. * */
49. export function fetchForecast3DayWeather(
50.     location: string
51. ): Promise<ForecastWeatherDayResult> {
52.     return request<WeatherParam, ForecastWeatherDayResult>('/v7/weather/3d', {
53.         param: {
54.             key: API_KEY,
55.             location: location
56.         }
57.     })
58. }
60. /**
61. * 获取未来7天天气预报
62. * */
63. export function fetchForecast7DayWeather(
64.     location: string
65. ): Promise<ForecastWeatherDayResult> {
66.     return request<WeatherParam, ForecastWeatherDayResult>('/v7/weather/7d', {
67.         param: {
68.             key: API_KEY,
69.             location: location
70.         }
71.     })
72. }
75. /**
76. * 获取未来24小时天气预报
77. * */
78. export function fetchForecast24HourWeather(
79.     location: string
80. ): Promise<ForecastWeatherHourResult> {
81.     return request<WeatherParam, ForecastWeatherHourResult>('/v7/weather/24h', {
82.         useBaseUrl: false,
83.         param: {
84.             key: API_KEY,
85.             location: location
86.         },
88.     })
89. }
91. /*
92. * 根据关键字获取城市信息
93. * */
94. export function fetchCityInfoByKeyWord(
95.     keyword: string
96. ): Promise<LocationResult> {
97.     return request<LocationParam, LocationResult>('https://geoapi.qweather.com/v2/city/lookup', {
98.         param: {
99.             key: API_KEY,
100.             location: keyword
101.         }
102.     })
103. }
105. /**
106. * 获取空气质量数据
107. * */
108. export function fetchNowAir(
109.     location: string,
110. ): Promise<NowAirResult> {
111.     return request<WeatherParam, NowAirResult>('/v7/air/now', {
112.         param: {
113.             key: API_KEY,
114.             location: location
115.         }
116.     })
117. }
119. /**
120. * 获取天气指数
121. * */
122. export function fetchWeatherIndices(
123.     location: string,
124. ): Promise<WeatherIndexResult> {
125.     return request<WeatherParam, WeatherIndexResult>('/v7/indices/1d', {
126.         param: {
127.             key: API_KEY,
128.             location: location
129.         }
130.     })
132. }

复制代码

这段代码实现了与气候和城市相干的 API 请求功能，告急用于获取及时气候、气候预报、城市信息、氛围质量等数据。每个函数都是基于 fetch 函数封装的，用于向景象 API 发送请求并获取相应数据
三.项目实现截图展示

四.项目不足与经验总结

项目设计不足

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

经验总结

• 模块化设计：功能模块化提高代码可维护性和可扩展性。
  
• 合理利用数据缓存：优化缓存机制，淘汰网络请求，提高用户体验。
  
• UI 交互优化：通过动态结果和反馈提升用户体验。
  
• 提前规划错误处置惩罚：同一的错误处置惩罚机制提升代码可靠性。
  
• 第三方 API 备选方案：避免过度依赖单一 API，增长容错机制。
  
• 清晰的数据结构界说：明确数据格式和结构，保证一致性。
  
• 可扩展性：设计时考虑将来功能扩展，保持机动性。
  

参考与告急鉴戒网址：GitHub - YeMengLiChou/LuckWeather-HarmonyApp: 鸿蒙课设开发——晴气候App

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