首页/资讯中心/详情

HarmonyOS 5开发从入门到精通（十五）：天气应用实战（上）

HarmonyOS 5开发从入门到精通（十五）：天气应用实战（上）
📅 发布时间：2026/6/18 5:25:40

HarmonyOS 5开发从入门到精通（十五）：天气应用实战（上）

本章将带领大家开发一个完整的天气应用，涵盖网络请求、JSON解析、UI展示等核心功能。通过本案例，你将掌握HarmonyOS应用开发的关键技能。

一、核心概念

1. 网络请求与数据模型

天气应用的核心是获取远程API数据并转换为本地数据模型。HarmonyOS提供了@ohos.net.http模块进行网络请求，配合JSON解析将服务器返回的数据转换为TypeScript对象，实现数据驱动UI。

2. 城市搜索与数据筛选

城市搜索功能通过监听输入框变化，实时过滤城市列表。结合ArkUI的响应式特性，当搜索关键词变化时，界面自动更新显示匹配结果。

二、关键API详解

1. 网络请求模块

import http from '@ohos.net.http'// 创建HTTP请求实例
const httpRequest = http.createHttp()// 发起GET请求
httpRequest.request(url, {method: http.RequestMethod.GET,connectTimeout: 10000,readTimeout: 10000
})

2. JSON解析

// 解析JSON字符串
const weatherData = JSON.parse(response.result)// 转换为JSON字符串
const jsonStr = JSON.stringify(weatherData)

3. 天气数据模型

class WeatherModel {city: string = ''temperature: number = 0condition: string = ''humidity: number = 0windSpeed: number = 0
}

4. 城市搜索过滤

// 过滤城市列表
const filteredCities = cityList.filter(city => city.name.includes(searchText)
)

5. 列表组件渲染

List() {ForEach(this.cityList, (city: CityInfo) => {ListItem() {Text(city.name)}})
}

6. 输入框组件

TextInput().placeholder('搜索城市').onChange((value: string) => {this.searchText = value})

7. 异步数据获取

async getWeatherData(city: string): Promise<WeatherModel> {try {const response = await httpRequest.request(url)return JSON.parse(response.result)} catch (error) {console.error('获取天气数据失败')}
}

8. 权限配置

{"requestPermissions": [{"name": "ohos.permission.INTERNET"}]
}

9. 状态管理

@State weatherData: WeatherModel = new WeatherModel()
@State cityList: CityInfo[] = []
@State searchText: string = ''

10. 页面生命周期

aboutToAppear() {this.loadWeatherData()
}onPageShow() {this.refreshData()
}

11. 错误处理

try {// 网络请求
} catch (error) {console.error('请求失败:', error)
}

12. 数据绑定

Text(this.weatherData.temperature + '°C').fontSize(48).fontColor(Color.White)

三、实战案例

完整代码实现

import http from '@ohos.net.http'
import { WeatherModel } from '../model/WeatherModel'@Entry
@Component
struct WeatherApp {@State weatherData: WeatherModel = new WeatherModel()@State cityList: CityInfo[] = []@State searchText: string = ''@State filteredCities: CityInfo[] = []private httpRequest = http.createHttp()aboutToAppear() {this.loadCities()this.loadWeatherData('北京')}// 加载城市列表private loadCities() {this.cityList = [{ name: '北京', code: '101010100' },{ name: '上海', code: '101020100' },{ name: '广州', code: '101280101' },{ name: '深圳', code: '101280601' },{ name: '杭州', code: '101210101' }]this.filteredCities = this.cityList}// 获取天气数据private async loadWeatherData(city: string) {try {const url = `https://api.example.com/weather?city=${city}`const response = await this.httpRequest.request(url, {method: http.RequestMethod.GET})if (response.responseCode === 200) {const data = JSON.parse(response.result)this.weatherData = {city: data.city,temperature: data.temp,condition: data.condition,humidity: data.humidity,windSpeed: data.windSpeed}}} catch (error) {console.error('获取天气数据失败:', error)}}// 搜索城市private searchCities() {if (this.searchText === '') {this.filteredCities = this.cityList} else {this.filteredCities = this.cityList.filter(city =>city.name.includes(this.searchText))}}build() {Column() {// 搜索框TextInput().placeholder('搜索城市').width('90%').height(40).backgroundColor(Color.White).margin({ top: 20 }).onChange((value: string) => {this.searchText = valuethis.searchCities()})// 城市列表List() {ForEach(this.filteredCities, (city: CityInfo) => {ListItem() {Text(city.name).fontSize(18).margin({ left: 20 })}.onClick(() => {this.loadWeatherData(city.name)})})}.width('100%').height('60%')// 天气信息展示Column() {Text(this.weatherData.city).fontSize(24).fontColor(Color.White)Text(this.weatherData.temperature + '°C').fontSize(48).fontColor(Color.White).margin({ top: 10 })Text(this.weatherData.condition).fontSize(16).fontColor(Color.White).margin({ top: 5 })Row() {Text('湿度: ' + this.weatherData.humidity + '%').fontSize(14).fontColor(Color.White)Text('风速: ' + this.weatherData.windSpeed + 'm/s').fontSize(14).fontColor(Color.White).margin({ left: 20 })}.margin({ top: 10 })}.width('100%').height('30%').backgroundColor('#4A90E2').padding(20)}.width('100%').height('100%').backgroundColor('#F5F5F5')}
}// 城市信息模型
interface CityInfo {name: stringcode: string
}

四、总结

✅ 关键知识点

  • 网络请求的异步处理与错误捕获
  • JSON数据的解析与模型转换
  • 城市搜索功能的实时过滤实现
  • 数据驱动UI的响应式更新机制

🔧 核心API列表

  • http.createHttp()- 创建HTTP请求实例
  • http.RequestMethod.GET- GET请求方法
  • JSON.parse()- JSON字符串解析
  • JSON.stringify()- 对象转JSON字符串
  • TextInput().onChange()- 输入框变化监听
  • ForEach()- 列表数据循环渲染
  • @State- 状态管理装饰器
  • async/await- 异步编程语法糖

💡 应用建议

  1. 网络请求建议使用try-catch包裹，处理网络异常
  2. 城市搜索可添加防抖优化，避免频繁触发过滤
  3. 天气数据可添加本地缓存，提升用户体验
  4. 建议使用真实的天气API（如和风天气、高德天气）替换示例中的模拟接口

通过本章学习，你已经掌握了天气应用的核心开发技能。下一章我们将继续完善应用，添加更多实用功能。