通过axios方法请求高德天气查询api,实现获取实时天气数据,接下来是实现步骤:
模块导入与数据准备:
通过以下语句导入了必要的模块和数据:
import axios , { AxiosResponse,AxiosError }from '@ohos/axios'//导入axios
import { cities } from './tools/citys'; //调用事先存好的城市中英文名
接口与数据结构定义:
定义了关键的接口和数据结构:
City
接口用于描述城市的中英文名。WeatherData
接口用于定义天气相关的数据字段。
export interface City {
enName: string;
cnName: string;
}
//定义接口
interface WeatherData{
province:string//省份
city:string//城市
adcode:number//地区编码
weather:string//天气
temperature:number//温度
winddirection:string//风向
windpower:string//风力
humidity:number//湿度
reporttime:string//时间
temperature_float:number//温度的浮点形式
humidity_float:number//湿度的浮点形式
}
WeatherPage
结构体与状态管理:
在 WeatherPage
结构体中:
@State
变量weatherData
用于存储天气数据,初始为空数组,@State
变量city
用于存储当前查询的城市,初始值为“北京”,@State
变量city_data
用于暂存输入的城市数据,@State
变量loading
用于控制页面的加载状态:
@State weatherData:WeatherData[]=[]//用来接受传回来的数据
@State city:string='北京'//用来修改请求城市,初始值为北京
@State city_data:string=''
@State loading:boolean=false//用来确认是否渲染
网络请求与数据获取:
request
方法承担了发送网络请求并处理响应的重要职责:
它使用 axios
发送一个 get
类型的网络请求到特定的 URL ,然后,根据请求的响应状态进行相应的处理,如果响应状态码为 200 ,意味着查询成功,否则,表示查询失败,并打印相应的错误信息:
request(){
axios<string, AxiosResponse<string>, null>(
{
method:"get",//请求方法
url:`https://restapi.amap.com/v3/weather/weatherInfo`,//请求路径
//参数
params:{
'key':'your_key',//密钥
'city':this.city,//城市
'extensions':'base'//返回实况天气
}
}
)
.then((resp:AxiosResponse) => {
if (resp.status === 200) {
// 查询成功
console.log('请求成功!', JSON.stringify(resp.data))
this.weatherData.splice(0,1)//先删除前面数据
this.weatherData=this.weatherData.concat(resp.data.lives)//把请求过来的数据赋值
this.loading=true
} else {
//查询失败
console.log('请求失败!error:', JSON.stringify(resp))
}
})
.catch((error:AxiosError) => {
console.log('请求失败!error1:', JSON.stringify(error))
})
}
aboutToAppear
方法在页面即将显示时被调用,其主要任务是执行 request
方法,以提前获取天气数据:
async aboutToAppear(): Promise<void> {
await this.request()
}
城市名称转换方法:
getChineseCityName
方法用于将用户输入的城市英文名转换为对应的中文名:
它通过遍历事先准备好的城市数据数组 cities
,将输入的城市英文名转换为小写后进行匹配,如果找到匹配项则返回对应的中文名,否则返回空字符串:
//把输入城市的英文转换为中文
getChineseCityName(key:string){
let lowerCityName=key.toLowerCase()
for(const data_city of cities){
if (lowerCityName==data_city.enName) {
return data_city.cnName
}
}
return ''
}
页面构建与渲染:
根据 loading
的状态来决定是否进行页面的渲染。
当 loading
为 true
时,即数据已成功加载,页面会进行如下展示,提供一个文本输入框,用户可以在此输入要查询的城市,并且输入内容的变化会触发相应的事件,随后,以行和列的形式展示天气的详细信息,包括城市名称、更新时间、天气状况、温度、湿度、风向和风速等:
build() {
//判断是否要渲染
if (this.loading){
Column(){
TextInput({placeholder:'请输入城市'})
.onChange((text:string)=>{
//获取TextInput里的文本
this.city_data=text
})
Button('查询实时天气')
.alignSelf(ItemAlign.Center)
.onClick(()=>{
//先判断是否查询到该城市
if (this.getChineseCityName(this.city_data)) {
this.city=this.getChineseCityName(this.city_data)
}else {
//没有该城市后弹窗
AlertDialog.show({message:'暂无该城市'})
}
this.request()
})
Row({space:20}){
Text('城市:').fontSize(20)
Text(this.weatherData[0].city).fontSize(20)
}
.margin(5)
//使用flex布局
Flex({wrap:FlexWrap.Wrap}){
Text(){
Span('更新时间:')
Span(this.weatherData[0].reporttime)
}
.fontSize(20)
.margin(5)
Text(){
Span('天气:')
Span(this.weatherData[0].weather)
}
.fontSize(20)
.margin(5)
Text(){
Span('温度:')
Span(this.weatherData[0].temperature_float.toString())
Span('°C')
}
.fontSize(20)
.margin(5)
Text(){
Span('湿度:')
Span(this.weatherData[0].humidity.toString())
Span('%')
}
.fontSize(20)
.margin(5)
Text(){
Span('风向:')
Span(this.weatherData[0].winddirection)
Span('风')
}
.fontSize(20)
.margin(5)
Text(){
Span('风速:')
Span(this.weatherData[0].windpower.toString())
Span('级')
}
.fontSize(20)
.margin(5)
}
}
.alignItems(HorizontalAlign.Start)
.width('100%')
}
}
注意在实际开发中,需要注意网络请求的稳定性和错误处理,以及根据不同的设备和屏幕尺寸进行页面布局的优化,以提供更好的用户体验。
标签:city,axios,Span,string,weatherData,NEXT,HarmonyOS,20,data From: https://blog.csdn.net/m0_63913945/article/details/141223356