第12章：构建一个天气应用

数据获取与展示

1. 数据获取方式

1.1 网络API请求

  • 使用ArkTS内置的http模块发起网络请求
  • 示例代码：获取天气API数据
import http from '@ohos.net.http';

let httpRequest = http.createHttp();
httpRequest.request(
  "https://api.weather.com/v3/...",
  {
    method: 'GET',
    header: {
      'Content-Type': 'application/json'
    }
  }, (err, data) => {
    if (!err) {
      let weatherData = JSON.parse(data.result);
      // 处理数据...
    }
  }
);

1.2 数据缓存策略

  • 实现本地缓存减少API调用
  • 使用@ohos.data.storage进行数据持久化
  • 设置合理的缓存过期时间（如30分钟）

2. 数据结构设计

2.1 天气数据模型

class WeatherData {
  city: string = '';
  temperature: number = 0;
  humidity: number = 0;
  windSpeed: number = 0;
  weatherCondition: string = '';
  forecast: Array<DailyForecast> = [];
}

class DailyForecast {
  date: string = '';
  highTemp: number = 0;
  lowTemp: number = 0;
  condition: string = '';
}

2.2 状态管理

  • 使用@State和@Prop装饰器管理应用状态
  • 全局状态管理方案（可选）

3. 数据展示实现

3.1 主界面数据绑定

@Component
struct WeatherMainPage {
  @State weatherData: WeatherData = new WeatherData();

  build() {
    Column() {
      Text(this.weatherData.city)
        .fontSize(24)
      Text(`当前温度: ${this.weatherData.temperature}°C`)
        .fontSize(20)
      // 更多天气信息...
    }
  }
}

3.2 天气预报列表

@Component
struct ForecastList {
  @Prop forecastData: Array<DailyForecast>;

  build() {
    List() {
      ForEach(this.forecastData, (item: DailyForecast) => {
        ListItem() {
          ForecastItem({dailyData: item})
        }
      })
    }
  }
}

4. 错误处理与用户体验

4.1 网络错误处理

  • 显示友好的错误提示
  • 自动重试机制
  • 离线模式支持

4.2 加载状态管理

  • 显示加载动画
  • 骨架屏实现
if (this.isLoading) {
  LoadingIndicator()
} else {
  WeatherContent()
}

5. 性能优化

5.1 数据分页加载

  • 对于多日预报实现分页加载
  • 滚动到底部自动加载更多

5.2 图片懒加载

  • 天气图标按需加载
  • 使用占位图提升体验

6. 完整示例代码结构

weather-app/
├── model/
│   └── WeatherData.ts    # 数据模型定义
├── service/
│   └── WeatherService.ts # 数据获取服务
└── pages/
    ├── MainPage.ets      # 主界面
    └── components/       # 可复用组件
        ├── ForecastItem.ets
        └── WeatherCard.ets

7. 测试与验证

  • 编写单元测试验证数据解析逻辑
  • 模拟不同网络条件测试应用表现
  • 多设备适配测试

最佳实践提示：

  1. 对API返回的数据进行严格校验
  2. 使用TypeScript接口定义确保类型安全
  3. 考虑添加数据自动刷新功能（如每15分钟）
  4. 实现主题切换以适应不同天气状况的UI表现
Last Updated::