【HarmonyOS】天气预报 UI 的基本实现

一、和风天气数据

1、数据请求

本项目使用HTTP请求实现数据请求。和风天气API

例如：对于获取每日天气预报，使用 WebAPI 的 API key。

每日天气预报API，提供全球城市未来3-30天天气预报，包括：日出日落、月升月落、最高最低温度、天气白天和夜间状况、风力、风速、风向、相对湿度、大气压强、降水量、露点温度、紫外线强度、能见度等。

1. 请求路径

/v7/weather/{days}

      request1.request(`https://devapi.qweather.com/v7/weather/10d?location=101010100&key=xxxx&gzip=n`,{method: http.RequestMethod.GET})// xxxx：即你的 API key
// location：后面是城市 id，需要根据输入城市查询，可以参考和风里面的城市搜索

2、数据获取

对于上例，根据和风天气的返回值自己定义需要的数据和数据类型。

{"code": "200","updateTime": "2021-11-15T16:35+08:00","fxLink": "http://hfx.link/2ax1","daily": [{"fxDate": "2021-11-15","sunrise": "06:58","sunset": "16:59","moonrise": "15:16","moonset": "03:40","moonPhase": "盈凸月",···},···}

在下面是一些数据的基本信息：

code 请参考状态码
updateTime 当前API的最近更新时间
fxLink 当前数据的响应式页面，便于嵌入网站或应用
daily.fxDate 预报日期
daily.sunrise 日出时间，在高纬度地区可能为空
daily.sunset 日落时间，在高纬度地区可能为空
daily.moonrise 当天月升时间，可能为空
daily.moonset 当天月落时间，可能为空

根据需要获取数据存储：

export class DailyViewModel {public Date: string = ''public fxDate: string = '' public sunrise: string = '' //日出public sunset: string = '' //日落public tempMax: string = '' //最高public tempMin: string = '' //最低public uvIndex: string = '' //紫外线public text: string = ''
}

之后的使用即根据要显示的 UI 界面对应带入即可。

二、UI 界面实现

1、24小时内温度

使用 List 组件实现，设置.listDirection(Axis.Horizontal)实现组件的横向滑动。ForEach实现每个ListItem的循环渲染。

之后根据如"text": "晴",所显示的天气更换天气图标即可，即用条件渲染实现。

2、多日预报温度

与24小时内温度同理：由从API获取到的数据进行UI 渲染，可以根据自身喜好更改显示的内容，使用 List 组件实现。

3、空气质量 & 日升日落

使用 Gauge 组件画图：

          Gauge({value:this.AqiViewModel.aqi,min:0,max:500})
// this.AqiViewModel.aqi是指向的内容.startAngle(210).endAngle(150)
// 以上是环形的起始和终止.colors([[0X00FF00, 0.1],[0xFFFF00,0.1],[0xFF6100,0.1],[0xFF0000,0.1],[0xA020F0,0.2],[0x8B0000,0.4]])
// 颜色区间.strokeWidth(5).description(null).trackShadow(null)

同时可以改变箭头内容，根据华为 API 进行修改。

本图即根据内容修改指向标，通过该属性进行修改

 .indicator({ space: 10, icon: $r('app.media.Timely_sun') })

4、本地内容

这个即使用Text组件即可实现，搭配基本的容器组件。

5、菜单

依据绑定的内容实现。

                .bindMenu([{value: '添加城市',action: () => {···}},{value: '管理城市',action: () => {···}},])

其余界面即根据组件导航和路由实现，同时注意一些蚕食的传递实现。