鸿蒙项目《查询天气》

天气查询

一、项目目标

综合运用本学期所学内容及个人自学知识，使用HarmonyOS 4.0及以上版本开发一款具有实用性和创新
性的移动应用软件。

二、项目介绍

根据高德地图获取城市天气数据，将今日天气状况和最近几天的天气状况可视化，即数据的内容转化为图标的形式，展现出来。可以选择所在的一个城市也可以选择多个城市或者删除之前所选的城市。

三、代码结构解读

├──entry/src/main/ets // 代码区
│ ├──pages
│ │ ├──index.ets // 启动页
│ │ ├──AddCity.ets // 添加城市页
│ ├──cityView
│ │ ├──cityView.ets // 今日和最近天气
│ ├──viewmodel
│ │ ├──casts.ets // 天气状况类
│ │ ├──forecasts.ets // 城市类
│ │ ├──WeatherModel.ets // 城市编号类
│ ├──resources/base/media //图片夹
│ │ ├──cloud.png //多云图标
│ │ ├──icon.png //软件图标
│ │ ├──rain.png //下雨图标
│ │ ├──sun.png //太阳图标
└──entry/src/main/resources // 资源文件夹

四、关键技术

Tabs组件城市切换

import {
    cityView } from '../view/cityView'
//.....
  //tarBar 自定义函数
  @Builder tabBuild(index: number) {
   
    Circle({
    width: 10, height: 10 })
        .fill(this.cityIndex === index ? Color.White : Color.Gray).opacity(0.4)
  }
​
//城市切换
Tabs({
    barPosition: BarPosition.Start, controller: this.tancontroller }) {
   
  ForEach(this.cityWeatherList, (cityWeatherList: WeatherModel) => {
   
    TabContent() {
   
      cityView({
    casts: cityWeatherList.forecasts[0].casts })
    }.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj => obj === cityWeatherList)))
  })
}
.barHeight(20)
.barWidth(40)
.onChange((index: number) => {
   
  this.cityIndex = index
})

五、实验过程

1.通过获取的数据，进行类的构建

在module.json5文件内加入代码

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

创建方法

通过异步获取，将数据以对象的形式返回

//获取数据
getWeather(cityCode:number){
  return new Promise<WeatherModel>((resolve,reject)=>{
    //创建
    let request = http.createHttp()
    let url= `https://restapi.amap.com/v3/weather/weatherInfo?key=<输入你申请的key值>&city=${cityCode}&extensions=all`
​
    let options = {
      method:http.RequestMethod.GET,
      header:{'Content-Type':'application/json'},
    } as http.HttpRequestOptions
    let result = request.request(url,options)
​
    result.then((res)=>{
      if (res.responseCode === 200) {
        console.log(res.result.toString())
        resolve( JSON.parse(res.result.toString()))
      }
    }).catch((err)=>{
      console.log(err)
    })
  })
}

使用Promise.all方法，同时返回多条数据
//直接获取所有数据
async  getWeathers (cityCodeList:Array<number>){
  let WeathersDate: Array<WeatherModel> = []
  let promises :Array<Promise<WeatherModel>> = []
  for (let i = 0; i < cityCodeList.length; i++) {
    promises.push(this.getWeather(cityCodeList[i]))
  }
  await Promise.all(promises).then(result =>{
    for (const element of result) {
      console.log(element.forecasts[0].city);
    }
    WeathersDate = result
  })
  return WeathersDate
}

根据返回的json数据，创建相应的对象

casts
export class casts{
  date:string
  dayweather:string
  nightweather:string
  daytemp:number
  nighttemp:number
  daywind:string
  daypower:string
  daytemp_float:number
  nighttemp_float:number
}

forecasts
import {casts} from "../viewmodel/casts"
​
export class forecasts{
  city:string
  adcode:number
  casts:Array<casts>
}

WeatherModel
import {forecasts} from "./forecasts"
​
export class WeatherModel{
  status:number
  count:number
  infocode:number
  forecasts:Array<forecasts> = []
}

2.主页面进行构建，将添加按钮，删除按钮，以及多个城市名称滑动时对应起来，也就是显示的天气状况和城市名称保持一致

页面显示框
  //当前tab组件索引
  @State cityIndex: number = 0
​
​
//城市选择+城市标题
Row() {
   
  Button("添加")
    .fontSize(25)
    .fontColor(Color.Gray)
    .opacity(0.7)
    .backgroundColor("#87CEEB")
    .margin({
    bottom: 15 })
  Text(this.cityNameList[this.cityIndex])
      .fontSize(40).fontColor(Color.Orange)
  Button("删除")
    .fontSize(25)
    .fontColor(Color.Gray)
    .opacity(0.7)
    .backgroundColor("#87CEEB")
    .margin({
    bottom: 15 })
}.height("10%")
.width("100%")
.justifyContent(FlexAlign.SpaceBetween)

Tabs组件城市切换

import {
    cityView } from '../view/cityView'
//.....
  //tarBar 自定义函数
  @Builder tabBuild(index: number) {
   
    Circle({
    width: 10, height: 10 })
        .fill(this.cityIndex === index ? Color.White : Color.Gray).opacity(0.4)
  }
​
//城市切换
Tabs({
    barPosition: BarPosition.Start, controller: this.tancontroller }) {
   
  ForEach(this.cityWeatherList, (cityWeatherList: WeatherModel) => {
   
    TabContent() {
   
      cityView({
    casts: cityWeatherList.forecasts[0].casts })
    }.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj => obj === cityWeatherList)))
  })
}
.barHeight(20)
.barWidth(40)
.onChange((index: number) => {
   
  this.cityIndex = index
})

3.将主页面的今日天气和近期天气状况显示出来，将数据转化为图标

今日天气显示
遍历列表，索引为0的对象为今日天气数据
//当前城市天气

  casts: casts[] = []
​
ForEach(this.casts, (cast: casts) => {
   
  if (cast === this.casts[0]) {
   
        
  }
})


设置天气图片
//图片
Row() {
   
  if (cast.dayweather === "晴") {
   
    Image($r('app.media.sun')).width(260)
  }
  if (cast.dayweather === "多云") {
   
    Image($r("app.media.cloud")).width(260)
  }
  if (cast.dayweather ===