小知天气：HarmonyOS Next 气象应用开发实践

项目概述

小知天气是一款基于鸿蒙生态系统开发的现代化天气应用，采用ArkTS语言和鸿蒙原生组件开发。该应用实现了基本的天气查询功能，包括城市搜索、当前天气展示、温度范围、湿度、风向、空气质量以及天气预警等信息，为用户提供简洁美观的用户界面，展现了HarmonyOS应用开发的典型特性和技术架构。

成果展示

源代码：公众号 知识浅谈 回复 小知天气
视频演示：查看视频教程

1. 首页
   
2. 搜索地址
   
   

API使用

使用到的API网站：http://tianqiapi.com/
不存在推广，大家可以自行网上查找免费的api网站，我用的这个网站免费有额度。
在下方这个文件里设置

技术栈详解

1. HarmonyOS Next开发环境

该项目基于HarmonyOS Next开发框架构建，使用DevEco Studio作为集成开发环境。HarmonyOS Next是华为自主研发的分布式操作系统，专为全场景智能设备提供统一的操作系统解决方案。相比传统移动应用开发，HarmonyOS具有分布式能力、一次开发多端部署等显著优势。

2. ArkTS声明式开发范式

项目代码采用ArkTS语言开发，这是一种基于TypeScript的声明式UI开发语言，专为HarmonyOS定制。主要特点包括：

• 基于组件的UI构建：通过@Component装饰器定义可复用UI组件
• 声明式编程：使用类似HTML的结构直接描述UI界面
• 状态管理：使用@State、@Prop、@Link等装饰器管理组件状态和属性
• 生命周期钩子：提供aboutToAppear、aboutToDisappear等生命周期方法

3. 网络请求和数据处理

应用核心功能基于鸿蒙网络请求框架实现，主要使用了：

import http from '@ohos.net.http';

这个框架提供了强大的网络处理能力：

• HTTP请求客户端：创建和管理网络请求实例
• 多种请求方法：支持GET、POST等标准HTTP方法
• 响应类型设置：支持JSON、文本等多种响应格式
• 异常处理机制：提供完整的错误捕获和处理能力

4. 组件化架构设计

项目采用清晰的组件化设计思路，主要分为：

• 入口组件：Index.ets作为应用主页面
• UI组件：SearchBar.ets、WeatherInfo.ets、WeatherIcon.ets等组件封装特定UI功能
• 数据模型：WeatherData.ets定义数据结构
• 服务层：WeatherService.ets封装API调用逻辑
• 工具类：AppConstants.ets管理全局常量

这种架构设计使代码结构清晰，功能模块化，便于维护和扩展。

核心功能实现剖析

1. 天气数据模型设计

export class WeatherData {
  cityid: string = '';
  date: string = '';
  week: string = '';
  update_time: string = '';
  city: string = '';
  wea: string = '';
  wea_img: string = '';
  tem: string = '';
  tem1: string = '';
  tem2: string = '';
  win: string = '';
  win_speed: string = '';
  humidity: string = '';
  air: string = '';
  air_level: string = '';
  air_tips: string = '';
  alarm: Alarm = new Alarm();
  aqi: AQI = new AQI();
  // ...其他字段
}

模型设计遵循API返回的数据结构，完整映射天气数据各个方面，便于在UI层直接使用。

2. 网络请求服务实现

static async getWeather(city?: string): Promise<WeatherData> {
  // 创建HTTP请求客户端
  let httpRequest = http.createHttp();
  
  try {
    // 构造URL和参数
    let url = `${AppConstants.API_BASE_URL}?unescape=1&version=${AppConstants.API_VERSION}&appid=${WeatherService.APP_ID}&appsecret=${WeatherService.APP_SECRET}`;
    
    // 添加城市参数
    if (city) {
      url += `&city=${encodeURIComponent(city)}`;
    }
    
    // 发送HTTP请求
    let response = await httpRequest.request(
      url,
      {
        method: http.RequestMethod.GET,
        expectDataType: http.HttpDataType.OBJECT,
        header: { 'Content-Type': 'application/json' },
        connectTimeout: 60000,
        readTimeout: 60000
      }
    );
    
    // 处理响应
    if (response.responseCode === 200) {
      return response.result as WeatherData;
    } else {
      console.error(`Error fetching weather data: ${response.responseCode}`);
      return new WeatherData();
    }
  } catch (error) {
    console.error(`Exception when fetching weather data: ${error instanceof Error ? error.message : String(error)}`);
    return new WeatherData();
  } finally {
    // 关闭HTTP请求
    try {
      httpRequest.destroy();
    } catch (error) {
      console.error('Error closing HTTP request:', error);
    }
  }
}

该服务封装了天气API的调用逻辑，采用了ArkTS推荐的异步请求模式，并实现了完整的错误处理和资源释放。

3. 搜索组件实现

@Component
export struct SearchBar {
  @Link searchText: string;
  onSearch: (cityName: string) => void = () => {};

  build() {
    Row() {
      TextInput({
        placeholder: '输入城市名称',
        text: this.searchText
      })
        .placeholderColor('#99FFFFFF')
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.White)
        .backgroundColor('rgba(255, 255, 255, 0.2)')
        .padding({ left: 12 })
        .borderRadius(24)
        .height(48)
        .fontSize(16)
        .fontColor('#FFFFFF')
        .onChange((value: string) => {
          this.searchText = value;
        })
        .width('75%')

      Button('搜索')
        .fontColor('#FFFFFF')
        .backgroundColor('#1E88E5')
        .fontSize(14)
        .width('22%')
        .height(48)
        .margin({ left: 8 })
        .borderRadius(24)
        .onClick(() => {
          if (this.searchText.trim().length > 0) {
            this.onSearch(this.searchText.trim());
          }
        })
    }
    .width('100%')
    .padding({ left: 16, right: 16, top: 16, bottom: 8 })
  }
}

搜索组件提供了友好的输入界面，实现了城市名称的输入和搜索功能，采用了ArkTS的事件处理机制。

4. 天气信息展示组件

天气信息组件是应用的核心UI部分，根据获取的天气数据展示各类天气信息，包括：

• 城市名称和日期
• 当前温度和天气状况
• 温度范围
• 湿度、风向和风力
• 空气质量指数和等级
• 天气预警信息（如有）

组件针对不同数据状态（加载中、有数据、无数据）展示不同UI效果，提供了完整的用户体验。

开发中遇到的技术挑战与解决方案

在开发过程中，我遇到了一些ArkTS特有的技术挑战，这里记录两个典型问题及其解决方案。

1. 渐变背景实现问题

问题描述：
在实现应用背景渐变效果时，最初尝试使用常规方法设置LinearGradient，但遇到了多个类型错误。

错误代码：

// 尝试方式1：使用create方法（不存在）
.backgroundImage(
  LinearGradient.create({
    direction: GradientDirection.Bottom,
    colors: [[AppConstants.PRIMARY_COLOR, 0], ['#0D47A1', 1]]
  }), 
  ImageRepeat.NoRepeat
)

// 尝试方式2：使用构造函数（类型不匹配）
.backgroundImage(
  new LinearGradient({
    direction: GradientDirection.Bottom,
    colors: [[AppConstants.PRIMARY_COLOR, 0], ['#0D47A1', 1]]
  }), 
  ImageRepeat.NoRepeat
)

解决方案：
在ArkTS中，渐变背景需要使用专门的linearGradient方法，而不是尝试组合backgroundImage或backgroundColor：

.linearGradient({
  angle: 180,
  colors: [[AppConstants.PRIMARY_COLOR, 0], ['#0D47A1', 1]]
})

技术启示：
ArkTS的UI组件系统与传统前端框架有明显差异，需要熟悉其特有的属性和方法。在背景处理上，ArkTS提供了更直观的专用方法，而不是通过通用属性组合实现。

2. 异常处理限制

问题描述：
在网络请求处理中，尝试使用传统的JavaScript异常处理方式抛出自定义错误，但ArkTS对throw语句有严格限制。

错误代码：

if (response.responseCode !== 200) {
  console.error(`Error fetching weather data: ${response.responseCode}`);
  throw new Error(`Failed to fetch weather data: ${response.responseCode}`);
}

解决方案：
采用返回空数据对象而非抛出异常的方式处理错误，并完善日志记录：

if (response.responseCode === 200) {
  return response.result as WeatherData;
} else {
  console.error(`Error fetching weather data: ${response.responseCode}`);
  return new WeatherData(); // 返回空对象而非抛出异常
}

技术启示：
ArkTS对异常处理有更严格的规范，推荐使用返回值而非异常传递错误信息。这种方式实际上与现代JavaScript中的Result模式类似，可以避免异常处理的性能开销，并使代码流程更加清晰。

性能优化策略

为提升应用性能和用户体验，采取了以下优化策略：

1. 资源释放管理：在网络请求完成后主动释放HTTP客户端资源
2. 错误处理优化：采用优雅降级策略，即使请求失败也能展示基本UI而非崩溃
3. 延迟加载：在组件生命周期适当阶段初始化资源和发起请求
4. UI渲染优化：避免不必要的重绘和状态更新

总结

小知天气项目展示了鸿蒙应用开发的典型流程和技术特点。通过ArkTS声明式编程、组件化架构设计、网络请求框架和现代UI设计，实现了功能完善、用户体验良好的天气应用。项目虽然结构简单，但包含了鸿蒙应用开发的核心要素，为开发者提供了很好的学习参考。

在实践过程中，我深刻体会到ArkTS相比传统Web前端框架有着更严格的类型系统和规范，这在初期可能增加学习曲线，但长期来看有助于构建更可靠、可维护的应用。特别是在组件属性定义、样式处理和异常管理等方面，ArkTS提供了独特的解决方案，开发者需要调整思维模式以适应这一新范式。

随着HarmonyOS生态的不断发展，我们可以期待这类应用将有更多拓展空间，如支持位置服务、多日天气预报、天气提醒等功能，充分发挥鸿蒙系统的独特优势。

参考文献

HarmonyOS Next音乐播放器组件开发实践