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

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

一.功能实现总结

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

1. 实时天气信息展示

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

2. 短期天气预报

• 提供未来几天（如3天）的天气信息，包括：
  • 每天的天气状况（如晴、雾）。
  • 温度范围（最高温度/最低温度，如8°C / 1°C）。
  • 空气质量等级（如“优”）。
• 配合简洁的天气图标，让用户快速掌握未来天气变化趋势。

3. 24小时天气预测

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

4. 高级气象信息

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

5. 长期天气预报

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

---

界面设计与用户体验

1. 简洁高效：

   • 使用极简风格，重点信息（如温度、天气状况）以大字体和醒目的布局突出，信息分类清晰。
   • 图标搭配文字，便于快速理解天气状况。

2. 高交互性：

   • 通过按钮设计（如“查看近7天天气”），引导用户探索更多功能。
   • 多屏信息整合，实时数据与短期预报结合，满足多样化需求。

3. 贴心功能：

   • 空气质量、湿度、紫外线等指标提供全面的数据参考，覆盖多种使用场景，如穿衣、出行等。

---

适用场景

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

二. 主要代码实现

 1. 主要页面项目代码展示

实现代码项目截图

import log from '../../common/log'
import { promptAction } from '@kit.ArkUI'
import {
    ForecastWeatherDayResult,
    ForecastWeatherHourResult,
    NowAirResult,
    RealWeatherResult
} from '../../network/type'
import { distributedKVStore } from '@kit.ArkData'
import {
    checkDataValidate,
    fetchAndCachedForecast24HourWeather,
    fetchAndCachedForecast7DayWeather,
    fetchAndCachedNowAirData,
    fetchAndCachedRealWeatherData,
    getWeatherKvStore
} from '../../utils/WeatherKvStore'
import * as constants from '../../common/constants'
import { RealTemperature } from './RealTemperature'
import { Fetch3dayWeather } from './Fetch3dayWeather'
import { DayTrendPageNavParam } from '../DayTrend/DayTrendPage'
import { Forecast24HourWetherComponent } from './Forecast24Hour/Forecast24HourWeather'
import { RealTimeWeather } from './RealTimeWeather'
import { BusinessError } from '@kit.BasicServicesKit'

export interface CityWeatherOptions {
    location: string,
}

interface RealTemperatureVO {
    curTemp: number
    weatherDesc: string
    airQualityIndex: number
    airQualityDesc: string,
    rain: number,
    highestTemp: number,
    lowestTemp: number,
}

function transformRealTemperatureVO(
    realWeatherData: RealWeatherResult,
    airData: NowAirResult,
    forecastData: ForecastWeatherDayResult
) {
    const vo: RealTemperatureVO = {
        curTemp: parseInt(realWeatherData.now.temp),
        weatherDesc: realWeatherData.now.text,
        airQualityIndex: parseInt(airData.now.aqi),
        airQualityDesc: airData.now.category,
        rain: parseFloat(realWeatherData.now.precip),
        highestTemp: parseInt(forecastData.daily[0].tempMax),
        lowestTemp: parseInt(forecastData.daily[0].tempMin),

    }
    return vo
}


/**
 * 城市天气的主要组件
 * 主要逻辑：
 * 1. 从本地缓存中获取历史数据，使用该数据，如果超过过期时间，进行更新~
 * 2. 下拉刷新操作
 * */
@Component
export struct CityWeather {
    @Consume("pageStack") pathStack: NavPathStack
    @Prop options: CityWeatherOptions
    /** 刷新状态 */
    @State
    private refreshing: boolean = false
    /** 当前刷新完成数 */
    @State
    private refreshingCounter: number = 0
    @State
    private refreshingText: string = '刷新中...'

    private kvStore?: distributedKVStore.DeviceKVStore = undefined
    /** 实时天气数据 */
    @State
    @Watch('updateRealTemperatureVOData')
    private realWeatherData?: RealWeatherResult = undefined
    /** 7天预测数据 */
    @State
    @Watch('updateRealTemperatureVOData')
    private forecastDayWeatherData?: ForecastWeatherDayResult = undefined
    /** 24小时预测数据 */
    @State
    private forecastHourWeatherData?: ForecastWeatherHourResult = undefined
    /** 空气数据 */
    @State
    @Watch('updateRealTemperatureVOData')
    private airQualityData?: NowAirResult = undefined
    /** 实时天气数据VO */
    @State
    private realTemperatureVOData?: RealTemperatureVO = undefined


    private updateRealTemperatureVOData(pro: string) {
        if (pro === 'realWeatherData' || pro === 'forecastDayWeatherData' || pro === 'airQualityData') {
            if (this.realWeatherData && this.forecastDayWeatherData && this.airQualityData) {