[中工开发者]鸿蒙---天气添加、查询、删除 原创

今天，我为大家带来了一个自己学习，然后编译的项目—天气的添加、查询和删除。下面我详细给介绍一下它的开发和实现过程，希望对初学者有所帮助。
介绍
本项目是使用开发工具DevEco Studio来实现的，该项目可以查询到不同地区的天气，还可以通过添加不同地区的位置，来获取不同地区的天气信息。还可以通过删除来实现对于不需要的地区的天气信息的删除，以便观察天气信息。
环境搭建
首先要完成HarmonyOS开发环境搭建，可参照如下步骤进行。

软件要求
• DevEco Studio​​版本：DevEco Studio 5.00 Release

资源获取
获取不同地区的天气信息

环境搭建
安装DevEco Studio，详情请参考​​下载和安装软件​​。
设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境。

项目结构

添加演示

点击添加按钮，选择要添加的地区，再点击完成，即可完成添加操作，在首页面就可以看见添加的地区的天气信息。
删除演示

点击删除按钮，就可以删除首页面显示的地区的天气信息。
项目解析
首先，根据获取资源中的天气信息来创建相关参数。天气参数相关代码如下图：

在图中，data为日期，dayweather为早晨的天气情况，nightweather为夜晚的天气情况，daytemp为早晨的天气温度，nighttemp为夜晚的天气温度，daywind为当天的风向，daypower为当天的风的级别，daytemp_float为当天的最高气温，nighttemp_flaot为当天的最低气温。

获取城市天气信息的方法
方法代码如下：
class WeatherSelect{
//发送一个url，返回对应的数据
getWeather(cityCode: number){
return new Promise<WeatherModel>((resolve,reject)=>{
let request = http.createHttp()
let url= https://restapi.amap.com/v3/weather/weatherInfo?city=${cityCode}&key=934da30e42f29df0e6ae90aad22a7756&extensions=all

  let result= request.request(url)

  result.then((res)=>{
    if (res.responseCode === 200) {
      console.log(res.result.toString());
      resolve(JSON.parse(res.result.toString()))
    }
  }).catch((e:string)=>{
    console.log(e)
  })

})

}

//直接发送多个url，结果一并返回
async getWeathers(cityCodes:Array<number>){
let promises :Array<Promise<WeatherModel>> = []
let weatherModels : Array<WeatherModel> = []
for(let i = 0;i< cityCodes.length;i++){
promises.push(this.getWeather(cityCodes[i]))
}
await Promise.all(promises).then(result=>{
for(const element of result){
console.log(element.forecasts[0].city)
}
weatherModels = result
})
return weatherModels
}
}
在let一个url中，使用了相应的资源代码：
https://restapi.amap.com/v3/weather/weatherInfo?city=110101&key=<用户key>
在代码中，为了实现多个不同地区的天气的查询，将city的编号由固定的格式换成了可以用模板字符串或者表达式插值来表示地区，这样就可以实现不同地区的查询，增强了项目查询功能。

根据当天的天气情况给出不同的图片的代码如下：
@Builder weartherTmage(weather:string){

if(weather === "晴"){
  Image($r('app.media.xiao')).width(30)
}
if(weather === "阴"){
  Image($r('app.media.xiao')).width(30)
}
if(weather === "多云"){
  Image($r('app.media.xiao')).width(30)
}
if(weather.includes("雨")){
  Image($r('app.media.xiao')).width(30)
}

}
//展示数据

build() {

Column(){
  //当天的天气数据
  ForEach(this.casts,(cast:casts)=>{
    if (this.casts[0]===cast) {
       //图片渲染
      Row(){
        if(cast.dayweather === "晴"){
          Image($r('app.media.xiao')).width(260)
        }
        if(cast.dayweather === "阴"){
          Image($r('app.media.xiao')).width(260)
        }
        if(cast.dayweather === "多云"){
          Image($r('app.media.xiao')).width(260)
        }
        if(cast.dayweather.includes("雨")){
          Image($r('app.media.xiao')).width(260)
        }
      }.height("40%")
      Column(){
        //温度 天气
        Row(){
          Text(cast.dayweather).fontSize(30)
            .fontColor(Color.White).fontWeight(FontWeight.Bold)
          Text("  "+cast.daytemp+"度~"+cast.nighttemp+"度")
            .fontSize(30)
            .fontColor(Color.White).fontWeight(FontWeight.Bold)
        }
        Row(){
          Text(cast.daywind+"风").fontSize(30)
            .fontColor(Color.White).fontWeight(FontWeight.Bold)
          Text(cast.daypower+"级别").fontSize(30)
            .fontColor(Color.White).fontWeight(FontWeight.Bold)
        }
      }.margin({top:10})
    }

  })

在代码中，一共给出了4种不同的天气情况：晴、阴、多云、雨。4种天气情况对应着4种图片(为了方便，我的4种图片全为中工校徽），以便使用者观察当天的天气情况。

添加城市页面
代码如下：
build() {
Column(){
Row(){
Text(“添加城市列表”).fontSize(35).fontColor(Color.White)
Blank()
Button(“完成”).fontSize(26).backgroundColor(“”)
.onClick(()=>{
router.back({
url:“pages/Index”,
params:{
codes:this.cityCodeList,
names:this.cityNameLIst
}
})
})
}.height(“10%”).width(“95%”)
Column(){
Row(){
Text(name).fontSize(35).fontColor(Color.White).width(“60%”)
.margin({top:20,left:30})
Blank()
Text(“已添加”).backgroundColor(“”).fontSize(18)
.margin({top:5}).opacity(0.8)
}.width(“100%”)
Blank()
Divider().strokeWidth(5)
}.height(90).width(“100%”).margin({top:20})
.backgroundColor(“$4682b4”)
}else {
Column(){
Row(){
Text(name).fontSize(35).fontColor(Color.White).width(“60%”)
.margin({top:20,left:30})
Blank()
Button(“添加”).backgroundColor(“”).fontSize(18)
页面的跳转
从添加城市页面跳回首页面，通过点击完成按钮来实现。点击完成按钮，页面跳转到对应的url：pages/Index。
在添加页面中，如果this.cityNameLIst.includes(name)，则显示已添加，则无需再次点击。否则，显示添加，使用者可以通过点击添加按钮来完成需要的地区的添加。这时，添加按钮就会转换成已添加按钮。最后点击完成按钮，则会跳转到首页面。
具体效果看第一个添加演示gif。

首页面
首页面代码如下：
Button(“添加”)
.fontSize(25)
.fontColor(Color.Gray)
.opacity(0.7)
.backgroundColor(“#87CEEB”)
.margin({bottom: 15 })
.onClick(()=>{
router.pushUrl({
url:“pages/AddCity”,
params:{
codes:this.cityCodeList,
names:this.cityNameList
}
页面跳转
通过点击添加按钮就可以跳转到对应的页面。这里是跳转到统计地区页面。
Button(“删除”)
.fontSize(25)
.fontColor(Color.Gray)
.opacity(0.7)
.backgroundColor(“#87CEEB”)
.margin({bottom: 15 })
.onClick(()=>{

        AlertDialog.show({
          title:"删除",
          message:`你确定要删除${this.cityNameList[this.cityIndex]}`,
          confirm:{
            value:"确定",
          action:()=>{...}

删除提示
当使用者点击删除按钮，就会弹出提示框“你确定要删除+城市名称”，点击确定，即可实现删除对应城市的天气信息。