鸿蒙Harmony OS Next原生开发天气预报项目添加地区获取天气信息

已于 2025-03-20 23:43:37 修改
阅读量178 收藏
点赞数 2
分类专栏： # Harmony鸿蒙 移动端原生开发 文章标签： harmonyos 华为 微服务 mybatis spring boot struts jvm
于 2025-03-20 23:35:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2201_75960169/article/details/146407658
版权

鸿蒙初开,开天辟地

鸿蒙Harmony OS Next原生开发天气预报项目添加地区获取天气信息

import { cityView } from '../view/cityView';
import getWeatherUtil from "../viewmodel/getWeatherUtil";
import { weatherModel } from '../viewmodel/weatherModel';
import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  // 城市代码集合
  @State cityCodeList:number[] = [440300,440100];
  // 城市名字集合
  @State cityNameList:string[] = ["深圳市","广州市"];
  // 城市信息集合
  @State cityWeatherList:Array = [];
  // 当前城市索引
  @State cityIndex:number = 0;
  tabController:TabsController = new TabsController();
  // 按钮样式
  @Builder tabBuild(index:number){
    Circle({width:10,height:10}).fill(this.cityIndex === index?Color.White:Color.Gray).opacity(0.4);
  }
  onPageShow(): void {
    let params:object = router.getParams();
    if(params!=null){
      this.cityCodeList = params["codes"];
      this.cityWeatherList = [];
      this.cityNameList = [];
      this.initDate();
    }
  }
  // 获取数据
  aboutToAppear(): void {
    this.initDate();
  }
  // 初始化方法
  async initDate(){
    let result:Array = await getWeatherUtil.getWeathers(this.cityCodeList);
    for (let i = 0; i < result.length i let weather:weathermodel='result[i];' this.cityweatherlist.pushweather this.citynamelist.pushweather.forecasts0.city build column row button .fontsize25 .fontcolorcolor.white .opacity1 .backgroundcolor006400 .margin bottom: 10left: 10>{
            router.pushUrl({
              url: "pages/AddCity",
              params: {
                codes: this.cityCodeList,
                names: this.cityNameList
              }
            });
          });
        Text(this.cityNameList[this.cityIndex])
          .fontSize(40)
          .fontColor("#333333"); // 深灰色字体
        Button("删除")
          .fontSize(25)
          .fontColor(Color.White) // 白色字体，确保对比度足够高
          .opacity(1) // 完全不透明
          .backgroundColor("#FF0000") // 红色背景
          .margin({ bottom: 10,right: 10 });
      }.width("100%").height("10%").justifyContent(FlexAlign.SpaceBetween);
      Tabs({barPosition:BarPosition.Start,controller:this.tabController}){
        ForEach(this.cityWeatherList,(cityWeather:weatherModel)=>{
          TabContent(){
            cityView({casts:cityWeather.forecasts[0].casts});
          }.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj=>obj===cityWeather)));
        });
      }.barWidth(40).barHeight(30).onChange((index:number)=>{
        this.cityIndex = index;
      });
    }.width("100%").height("100%").backgroundColor("#87CEEB");
  }
}

import { cityView } from '../view/cityView';
import getWeatherUtil from "../viewmodel/getWeatherUtil";
import { weatherModel } from '../viewmodel/weatherModel';
import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  // 城市代码集合
  @State cityCodeList:number[] = [440300,440100];
  // 城市名字集合
  @State cityNameList:string[] = ["深圳市","广州市"];
  // 城市信息集合
  @State cityWeatherList:Array = [];
  // 当前城市索引
  @State cityIndex:number = 0;
  tabController:TabsController = new TabsController();
  // 按钮样式
  @Builder tabBuild(index:number){
    Circle({width:10,height:10}).fill(this.cityIndex === index?Color.White:Color.Gray).opacity(0.4);
  }
  onPageShow(): void {
    let params:object = router.getParams();
    if(params!=null){
      this.cityCodeList = params["codes"];
      this.cityWeatherList = [];
      this.cityNameList = [];
      this.initDate();
    }
  }
  // 获取数据
  aboutToAppear(): void {
    this.initDate();
  }
  // 初始化方法
  async initDate(){
    let result:Array = await getWeatherUtil.getWeathers(this.cityCodeList);
    for (let i = 0; i < result.length i let weather:weathermodel='result[i];' this.cityweatherlist.pushweather this.citynamelist.pushweather.forecasts0.city build column row button .fontsize25 .fontcolorcolor.white .opacity1 .backgroundcolor006400 .margin bottom: 10left: 10>{
            router.pushUrl({
              url: "pages/AddCity",
              params: {
                codes: this.cityCodeList,
                names: this.cityNameList
              }
            });
          });
        Text(this.cityNameList[this.cityIndex])
          .fontSize(40)
          .fontColor("#333333"); // 深灰色字体
        Button("删除")
          .fontSize(25)
          .fontColor(Color.White) // 白色字体，确保对比度足够高
          .opacity(1) // 完全不透明
          .backgroundColor("#FF0000") // 红色背景
          .margin({ bottom: 10,right: 10 });
      }.width("100%").height("10%").justifyContent(FlexAlign.SpaceBetween);
      Tabs({barPosition:BarPosition.Start,controller:this.tabController}){
        ForEach(this.cityWeatherList,(cityWeather:weatherModel)=>{
          TabContent(){
            cityView({casts:cityWeather.forecasts[0].casts});
          }.tabBar(this.tabBuild(this.cityWeatherList.findIndex(obj=>obj===cityWeather)));
        });
      }.barWidth(40).barHeight(30).onChange((index:number)=>{
        this.cityIndex = index;
      });
    }.width("100%").height("100%").backgroundColor("#87CEEB");
  }
}

import router from '@ohos.router';

@Entry
@Component
struct AddCity {
  @State allCityCodeList:number[] =
    [440300,440100,310000,110000,320100,420100,510100,500000,610100,410100];
  @State allCityNameList:string[] =
    ["深圳市","广州市","上海市","北京市","南京市","武汉市","成都市","重庆市","西安市","郑州市"];
  @State cityCodeList:number[] = [];
  @State cityNameList:string[] = [];
  onPageShow(): void {
    let params:object = router.getParams();
    this.cityCodeList = params["codes"];
    this.cityNameList = params["names"];
    console.log(this.cityCodeList.toString());
    console.log(this.cityNameList.toString());
  }
  build() {
    Column(){
      Row(){
        Text("添加城市列表").fontSize(35).fontColor(Color.White);
        Blank();
        Button("完成").fontSize(26).onClick(()=>{
          router.back({
            url: "pages/Index",
            params: {
              codes: this.cityCodeList,
              names: this.cityNameList
            }
          });
        });
      }.height("10%").width("95%");
      Column(){
        List(){
          ForEach(this.allCityNameList,(name:string)=>{
            ListItem(){
              if(this.cityNameList.includes(name)){
                Column(){
                  Row(){
                    Text(name).fontSize(35).fontColor(Color.White)
                      .width("60%").margin({top:20,left:30});
                    Blank()
                    Text("已添加").fontSize(18).backgroundColor("")
                      .opacity(0.8).margin({top:5,right: 20});
                  }.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).margin({right:10})
                      .onClick(()=>{
                        // 根据name获取所在索引
                        let index = this.allCityNameList.findIndex(obj=>obj===name);
                        // 根据获得的索引获取cityCode
                        let cityCode:number = this.allCityCodeList[index];
                        this.cityCodeList.push(cityCode);
                        this.cityNameList.push(name);
                      });
                  }.width("100%")
                  Blank();
                  Divider().strokeWidth(5);
                }.height(90).width("100%").margin({top:20});
              }
            }
          });
        }
      }.width("100%").height("90%");
    }.width("100%").height("100%").backgroundColor("#87CEEB");
  }
}

 

import router from '@ohos.router';

@Entry
@Component
struct AddCity {
  @State allCityCodeList:number[] =
    [440300,440100,310000,110000,320100,420100,510100,500000,610100,410100];
  @State allCityNameList:string[] =
    ["深圳市","广州市","上海市","北京市","南京市","武汉市","成都市","重庆市","西安市","郑州市"];
  @State cityCodeList:number[] = [];
  @State cityNameList:string[] = [];
  onPageShow(): void {
    let params:object = router.getParams();
    this.cityCodeList = params["codes"];
    this.cityNameList = params["names"];
    console.log(this.cityCodeList.toString());
    console.log(this.cityNameList.toString());
  }
  build() {
    Column(){
      Row(){
        Text("添加城市列表").fontSize(35).fontColor(Color.White);
        Blank();
        Button("完成").fontSize(26).onClick(()=>{
          router.back({
            url: "pages/Index",
            params: {
              codes: this.cityCodeList,
              names: this.cityNameList
            }
          });
        });
      }.height("10%").width("95%");
      Column(){
        List(){
          ForEach(this.allCityNameList,(name:string)=>{
            ListItem(){
              if(this.cityNameList.includes(name)){
                Column(){
                  Row(){
                    Text(name).fontSize(35).fontColor(Color.White)
                      .width("60%").margin({top:20,left:30});
                    Blank()
                    Text("已添加").fontSize(18).backgroundColor("")
                      .opacity(0.8).margin({top:5,right: 20});
                  }.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).margin({right:10})
                      .onClick(()=>{
                        // 根据name获取所在索引
                        let index = this.allCityNameList.findIndex(obj=>obj===name);
                        // 根据获得的索引获取cityCode
                        let cityCode:number = this.allCityCodeList[index];
                        this.cityCodeList.push(cityCode);
                        this.cityNameList.push(name);
                      });
                  }.width("100%")
                  Blank();
                  Divider().strokeWidth(5);
                }.height(90).width("100%").margin({top:20});
              }
            }
          });
        }
      }.width("100%").height("90%");
    }.width("100%").height("100%").backgroundColor("#87CEEB");
  }
}

完整效果实现

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值