鸿蒙项目《查询天气》

天气查询

一、项目目标

综合运用本学期所学内容及个人自学知识，使用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组件都会切换

1. import { cityView } from '../view/cityView'
2. //.....
3.   //tarBar 自定义函数
4.   @Builder tabBuild(index: number) {
5.     Circle({ width: 10, height: 10 })
6.         .fill(this.cityIndex === index ? Color.White : Color.Gray).opacity(0.4)
7.   }
8. ​
9. //城市切换
10. Tabs({ barPosition: BarPosition.Start, controller: this.tancontroller }) {
11.   ForEach(this.cityWeatherList, (cityWeatherList: WeatherModel) => {
12.     TabContent() {
13.       cityView({ casts: cityWeatherList.forecasts[0].casts })
14.     }.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj => obj === cityWeatherList)))
15.   })
16. }
17. .barHeight(20)
18. .barWidth(40)
19. .onChange((index: number) => {
20.   this.cityIndex = index
21. })

复制代码

五、实验过程

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

在module.json5文件内加入代码

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

复制代码

创建方法

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

1. //获取数据
2. getWeather(cityCode:number){
3.   return new Promise<WeatherModel>((resolve,reject)=>{
4.     //创建
5.     let request = http.createHttp()
6.     let url= `https://restapi.amap.com/v3/weather/weatherInfo?key=<输入你申请的key值>&city=${cityCode}&extensions=all`
7. ​
8.     let options = {
9.       method:http.RequestMethod.GET,
10.       header:{'Content-Type':'application/json'},
11.     } as http.HttpRequestOptions
12.     let result = request.request(url,options)
13. ​
14.     result.then((res)=>{
15.       if (res.responseCode === 200) {
16.         console.log(res.result.toString())
17.         resolve( JSON.parse(res.result.toString()))
18.       }
19.     }).catch((err)=>{
20.       console.log(err)
21.     })
22.   })
23. }
25. 使用Promise.all方法，同时返回多条数据
26. //直接获取所有数据
27. async  getWeathers (cityCodeList:Array<number>){
28.   let WeathersDate: Array<WeatherModel> = []
29.   let promises :Array<Promise<WeatherModel>> = []
30.   for (let i = 0; i < cityCodeList.length; i++) {
31.     promises.push(this.getWeather(cityCodeList[i]))
32.   }
33.   await Promise.all(promises).then(result =>{
34.     for (const element of result) {
35.       console.log(element.forecasts[0].city);
36.     }
37.     WeathersDate = result
38.   })
39.   return WeathersDate
40. }

复制代码

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

1. casts
2. export class casts{
3.   date:string
4.   dayweather:string
5.   nightweather:string
6.   daytemp:number
7.   nighttemp:number
8.   daywind:string
9.   daypower:string
10.   daytemp_float:number
11.   nighttemp_float:number
12. }
14. forecasts
15. import {casts} from "../viewmodel/casts"
16. ​
17. export class forecasts{
18.   city:string
19.   adcode:number
20.   casts:Array<casts>
21. }
23. WeatherModel
24. import {forecasts} from "./forecasts"
25. ​
26. export class WeatherModel{
27.   status:number
28.   count:number
29.   infocode:number
30.   forecasts:Array<forecasts> = []
31. }

复制代码

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

1. 页面显示框
2.   //当前tab组件索引
3.   @State cityIndex: number = 0
4. ​
5. ​
6. //城市选择+城市标题
7. Row() {
8.   Button("添加")
9.     .fontSize(25)
10.     .fontColor(Color.Gray)
11.     .opacity(0.7)
12.     .backgroundColor("#87CEEB")
13.     .margin({ bottom: 15 })
14.   Text(this.cityNameList[this.cityIndex])
15.       .fontSize(40).fontColor(Color.Orange)
16.   Button("删除")
17.     .fontSize(25)
18.     .fontColor(Color.Gray)
19.     .opacity(0.7)
20.     .backgroundColor("#87CEEB")
21.     .margin({ bottom: 15 })
22. }.height("10%")
23. .width("100%")
24. .justifyContent(FlexAlign.SpaceBetween)

复制代码

Tabs组件都会切换

1. import { cityView } from '../view/cityView'
2. //.....
3.   //tarBar 自定义函数
4.   @Builder tabBuild(index: number) {
5.     Circle({ width: 10, height: 10 })
6.         .fill(this.cityIndex === index ? Color.White : Color.Gray).opacity(0.4)
7.   }
8. ​
9. //城市切换
10. Tabs({ barPosition: BarPosition.Start, controller: this.tancontroller }) {
11.   ForEach(this.cityWeatherList, (cityWeatherList: WeatherModel) => {
12.     TabContent() {
13.       cityView({ casts: cityWeatherList.forecasts[0].casts })
14.     }.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj => obj === cityWeatherList)))
15.   })
16. }
17. .barHeight(20)
18. .barWidth(40)
19. .onChange((index: number) => {
20.   this.cityIndex = index
21. })

复制代码

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

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

1.   casts: casts[] = []
2. ​
3. ForEach(this.casts, (cast: casts) => {
4.   if (cast === this.casts[0]) {
5.         
6.   }
7. })
10. 设置天气图片
11. //图片
12. Row() {
13.   if (cast.dayweather === "晴") {
14.     Image($r('app.media.sun')).width(260)
15.   }
16.   if (cast.dayweather === "多云") {
17.     Image($r("app.media.cloud")).width(260)
18.   }
19.   if (cast.dayweather === "阴") {
20.     Image($r("app.media.cloud")).width(260)
21.   }
22.   if (cast.dayweather.includes("雨")) {
23.     Image($r("app.media.rain")).width(260)
24.   }
25. }.height("30%")
28. 设置天气数据
29. Column() {
30.   //天气 温度
31.   Row() {
32.     Text(cast.dayweather).fontSize(30)
33.         .fontColor(Color.White).fontWeight(FontWeight.Bold)
34.     Text("  " + cast.daytemp + "°~" + cast.nighttemp + "°")
35.       .fontSize(30)
36.       .fontColor(Color.White)
37.       .fontWeight(FontWeight.Bold)
38.   }
39.   //风力 等级
40.   Row() {
41.     Text(cast.daywind + "风  ").fontSize(30)
42.         .fontColor(Color.White).fontWeight(FontWeight.Bold)
43.     Text(cast.daypower + "级").fontSize(30)
44.         .fontColor(Color.White).fontWeight(FontWeight.Bold)
45.   }
46. ​
47. }.margin({ top: 10 })

复制代码

casts聚集内全部天气数据
天气图标自定义函数

1. @Builder weatherImage(dayweather: string) {
2.   if (dayweather === "晴") {
3.     Image($r('app.media.sun')).width(30)
4.   }
5.   if (dayweather === "多云") {
6.     Image($r("app.media.cloud")).width(30)
7.   }
8.   if (dayweather === "阴") {
9.     Image($r("app.media.cloud")).width(30)
10.   }
11.   if (dayweather.includes("雨")) {
12.     Image($r("app.media.rain")).width(30)
13.   }
14. }
16. 近期天气列表
17. //近期天气列表
18. Column() {
19.   Text("查看近期天气").fontSize(26).margin({ top: 30 })
20.   //天气列表
21.   Row() {
22.     ForEach(this.casts, (cast: casts) => {
23.       Column() {
24.         Text(cast.date.substring(5))
25.         this.weatherImage(cast.dayweather)
26.         Blank()
27.         Text(cast.daytemp.toString())
28.         Line()
29.         .width(20).height(80).startPoint([10, 0])
30.         .endPoint([10, 70]).stroke(Color.Black)
31.         .strokeWidth(3).strokeDashArray([10, 3])
32.          
33.         Text(cast.nighttemp.toString())
34.         Blank()
35.         this.weatherImage(cast.dayweather)
36.       }.height("90%").width("20%")
37.     })
38.   }
39.   .width("80%")
40.   .height("60%")
41.   .backgroundColor("#ffbab8b8")
42.   .opacity(0.5)
43.   .justifyContent(FlexAlign.SpaceAround)
44. ​
45. }.height("45%").width("100%")

复制代码

四、添加都会的页面，当点击添加时，将网络获取的数据都会，可以添加到主页面，将已经添加的和未添加的做标识，实现都会的添加

添加都会页面

1. 添加城市跳转
2. //主页面按钮跳转
3. Button("添加")
4. .onClick(() => {
5.   router.pushUrl({
6.     url: "pages/AddCity",
7.     params: {
8.       Codes: this.cityCodeList,
9.       Names: this.cityNameList
10.     }
11.   })
12. })
13. ​
14. //.....
15. //添加城市页面接收数据
16.   onPageShow(){
17.     let params = router.getParams()
18.     this.cityCodeList = params["Codes"]
19.     this.cityNameList = params["Names"]
20.   }
21. ​
24. 页面数据
25. @State AllCityCodeList :Array<number> =
26. [110000,120000,130000,140000,210000,220000,310000]
27. @State AllCityNameList :Array<string> =
28. ["北京市","天津市","河北省","山西省","辽宁省","吉林省","上海市"]
29. ​
30. //当前城市代码列表 接收传入数据的载体
31. @State cityCodeList :Array<number> = []
32. @State cityNameList :Array<string> = []
35. 页面标头
36. Row(){
37.   Text("添加城市列表").fontSize(35).fontColor(Color.White)
38.   Blank()
39.   Button("完成").backgroundColor("").fontSize(26)
40. }.height("10%").width("95%")
42. 城市列表
43. List遍历
44. //城市列表
45. Column() {
46.   List() {
47.     ForEach(this.AllCityNameList, (name: string) => {
48.       ListItem() {
49.         //写入单个城市名字
50.       }
51.     })
52.   }
53. }.width("100%").height("90%")
55. 判断当前遍历的AllCityNameList元素是否包含在cityNameList集合中，并作出对应样式 ，方法调整
56. if (this.cityNameList.includes(name)) {
57.   Column() {
58.     Row() {     Text(name).fontSize(35).fontColor(Color.White).width("60%")
59.         .margin({ top: 20, left: 30 })
60.       Blank()
61.       Text("已添加").backgroundColor("").fontSize(18)
62.         .margin({ right: 5 })
63.         .opacity(0.8)
64.     }.width("100%")
65. ​
66.     Blank()
67.     Divider().strokeWidth(5)
68.   }.height(90).width("100%").margin({ top: 20 })
69.   .backgroundColor("#4682B4")
70. } else {
71.   Column() {
72.     Row() {
73.       Text(name).fontSize(35).fontColor(Color.White).width("60%")
74.         .margin({ top: 20, left: 30 })
75.       Blank()
76.       Button("添加").backgroundColor("").fontSize(18)
77.         .margin({ right: 5 })
78.         .onClick(() => {
79.           //根据name 获取所在索引
80.           let index = this.AllCityNameList.findIndex(obj => obj === name)
81.           console.log("index:"+index)
82.           //根据索引获得 城市对应的编码
83.           let cityCode: number = this.AllCityCodeList[index]
84.           console.log("cityCode= "+cityCode)
85.           //将编码加入列表
86.           this.cityCodeList.push(cityCode)
87.           this.cityNameList.push(name)
88.           console.log(this.cityCodeList.toString())
89.         })
90.     }.width("100%")
91. ​
92.     Blank()
93.     Divider().strokeWidth(5)
94.   }.height(90).width("100%").margin({ top: 20 })
95.   .backgroundColor("#87CEEB")
96. }
99. 页面返回
100. Button("完成")
101. .onClick(()=>{
102.   router.back({
103.     url:"pages/Index",
104.     params:{
105.       Codes:this.cityCodeList
106.     }
107.   })
108. })
109. ​
110. //主界面接收数据
111.   onPageShow() {
112.     let params = router.getParams()
113.     if (params) {
114.       this.cityCodeList = params["Codes"]
115.       this.cityWeatherList = []
116.       this.cityNameList = []
117.       this.initData()
118.     }
119.   }

复制代码

五、都会的删除，当点击删除按钮时，将弹出对话框，确认删除后，即可将当前的都会

1. 城市删除方法
2. Button("删除")
3. .onClick(() => {
4.   AlertDialog.show({ title: "删除",
5.     message: `你确定要删除${this.cityNameList[this.cityIndex]}消息吗？`,
6.     confirm: {
7.       value: "确定",
8.       action: () => {
9.         this.cityNameList = this.cityNameList.filter(item => item !== this.cityNameList[this.cityIndex])
10.         this.cityCodeList = this.cityCodeList.filter(item => item !== this.cityCodeList[this.cityIndex])
11.         this.cityWeatherList = this.cityWeatherList.filter(item => item !== this.cityWeatherList[this.cityIndex])
12.         
13.       }
14.     }
15.   })
16. })

复制代码

六、添加风力的卡片

1. Text("风向风力").fontSize(26).margin({ top: 30 })
2.       Row() {
3.         ForEach(this.casts, (cast: casts, index: number) => {
5.           // 风向风力内容
6.           Column() {
7.             Row() {
8.               Image($r("app.media.wind")) // 假设 'app.media.wind' 是风力的图片资源
9.                 .width(120) // 设置图片宽度
10.                 .height(100) // 设置图片高度
12.                 .margin({ right: 35 }) // 设置图片与右边距
13.               Image($r("app.media.w2")) // 假设 'app.media.wind' 是风力的图片资源
14.                 .width(120) // 设置图片宽度
15.                 .height(100) // 设置图片高度
16.                 .margin({ right: 35 })
18.             }
19.             .width("100%")
20.               Text("风向：" + cast.daywind)
21.                 .fontSize(24)
22.                 .fontColor(Color.White)
23.                 .fontWeight(FontWeight.Bold)
24.                 .margin({ right: 20 }) // 右边距，根据需要调整
27.             Text("风力：" + cast.daypower)
28.               .fontSize(24)
29.               .fontColor(Color.White)
30.               .fontWeight(FontWeight.Bold)
31.               .margin({ right: 20 })
32.           }.margin({ top: 10 })
33.           // 根据需要添加分隔线或间距
34.           if (index !== this.casts.length - 1) {
35.             Line().width("100%").height(1).stroke(Color.Black).strokeWidth(1)
36.           }
37.         })
38.       }
39.       .width("100%")
40.       .height("45%")
41.       .backgroundColor("#ffbab8b8")
42.       .opacity(0.5)
43.       .justifyContent(FlexAlign.SpaceAround)
44.     }
45.   }
46. })

复制代码

七、将两个卡片实现滑动

1. build() {
2.     //单个tabcontent 展示的所有内容
3.     Column() {
4.       ForEach(this.casts, (cast: casts) => {
5.         if (cast === this.casts[0]) {
6.           //上半部分 图片+当天天气
7.           //图片
8.           Row() {
9.             if (cast.dayweather === "晴") {
10.               Image($r('app.media.sun')).width(260)
11.             }
12.             if (cast.dayweather === "多云") {
13.               Image($r("app.media.cloud")).width(260)
14.             }
15.             if (cast.dayweather === "阴") {
16.               Image($r("app.media.cloud")).width(260)
17.             }
18.             if (cast.dayweather.includes("雨")) {
19.               Image($r("app.media.rain")).width(260)
20.             }
21.             if (cast.dayweather.includes("沙")) {
22.               Image($r("app.media.sand")).width(260)
23.             }
24.           }.height("30%")
26.           Column() {
27.             //天气 温度
28.             Row() {
29.               Text(cast.dayweather).fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bold)
30.               Text("  " + cast.daytemp + "°~" + cast.nighttemp + "°")
31.                 .fontSize(30)
32.                 .fontColor(Color.White)
33.                 .fontWeight(FontWeight.Bold)
34.             }
35.             //风力 等级
36.             Row() {
37.               Text(cast.daywind + "风  ").fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bold)
38.               Text(cast.daypower + "级").fontSize(30).fontColor(Color.White).fontWeight(FontWeight.Bold)
39.             }
41.           }.margin({ top: 10 })
42.         }
43.       })
44.       List() {
45.         ForEach(this.casts, (cast: casts, index: number) => {
46.           ListItem() {
47.             //近期天气列表
48.             Column() {
49.               Text("查看近期天气").fontSize(26).margin({ top: 30 })
50.               //天气列表
51.               Row() {
52.                 ForEach(this.casts, (cast: casts) => {
53.                   Column() {
54.                     Text(cast.date.substring(5))
55.                     this.weatherImage(cast.dayweather)
56.                     Blank()
57.                     Text(cast.daytemp.toString() + "°")
58.                     Line()
59.                       .width(20)
60.                       .height(80)
61.                       .startPoint([10, 0])
62.                       .endPoint([10, 70])
63.                       .stroke(Color.Black)
64.                       .strokeWidth(3)
65.                       .strokeDashArray([10, 3])
66.                     Text(cast.nighttemp.toString() + "°")
67.                     Blank()
68.                     this.weatherImage(cast.dayweather)
69.                   }.height("90%").width("20%")
70.                 })
71.               }
72.               .width("100%")
73.               .height("40%")
74.               .backgroundColor("#ffbab8b8")
75.               .opacity(0.5)
76.               .justifyContent(FlexAlign.SpaceAround)
77. .padding({left:15,right:15})
78. .margin({bottom:35})
79.               Text("风向风力").fontSize(26).margin({ top: 30 })
80.               Row() {
81.                 ForEach(this.casts, (cast: casts, index: number) => {
83.                   // 风向风力内容
84.                   Column() {
85.                     Row() {
86.                       Image($r("app.media.wind")) // 假设 'app.media.wind' 是风力的图片资源
87.                         .width(120) // 设置图片宽度
88.                         .height(100) // 设置图片高度
90.                         .margin({ right: 35 }) // 设置图片与右边距
91.                       Image($r("app.media.w2")) // 假设 'app.media.wind' 是风力的图片资源
92.                         .width(120) // 设置图片宽度
93.                         .height(100) // 设置图片高度
94.                         .margin({ right: 35 })
96.                     }
97.                     .width("100%")
98.                       Text("风向：" + cast.daywind)
99.                         .fontSize(24)
100.                         .fontColor(Color.White)
101.                         .fontWeight(FontWeight.Bold)
102.                         .margin({ right: 20 }) // 右边距，根据需要调整
105.                     Text("风力：" + cast.daypower)
106.                       .fontSize(24)
107.                       .fontColor(Color.White)
108.                       .fontWeight(FontWeight.Bold)
109.                       .margin({ right: 20 })
110.                   }.margin({ top: 10 })
111.                   // 根据需要添加分隔线或间距
112.                   if (index !== this.casts.length - 1) {
113.                     Line().width("100%").height(1).stroke(Color.Black).strokeWidth(1)
114.                   }
115.                 })
116.               }
117.               .width("100%")
118.               .height("45%")
119.               .backgroundColor("#ffbab8b8")
120.               .opacity(0.5)
121.               .justifyContent(FlexAlign.SpaceAround)
122.             }
123.           }
124.         })
127.       }
128.       .width("90%").height("80%")
129.     }
130.     .width("100%")
131.     .height("100%")
132.   }}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。