OpenHarmony制作简易天气预报小程序

OpenHarmony制作简易天气预报小程序

---

简介

---

天气预报是对未来一定时期内天气状况的预测和报告。通过调用一些简单的API可以使我们的小程序实现此功能。

页面内容

---

城市名称

明确显示所查询或定位的城市名称，方便用户快速确认天气信息对应的地区。

城市天气

以文字或图标形式展示城市当前及未来的天气状况，如晴天、多云、阴天、雨天、雪天等。

城市温度

包括当前温度的温度预测，让用户快速知晓当下的冷暖程度。

项目效果图

代码实现

---

import http from '@ohos.net.http';
@Entry
@Component
struct UserPage {
  @State message: string = 'Hello World'
  @State cityname: string = ''
  @State citytianqi: string = ''
  @State cityqiwen: string = ''


  get_weather(){
    let httpRequest=http.createHttp();
    httpRequest.request(
    "http://api.yytianqi.com/observe",
      {
        method:http.RequestMethod.GET,
          extraData:{
            "city":"CH020100",
            "key":"4amj0gpv26uw3dcg"
          },
        connectTimeout:60000,
        readTimeout:60000,
        header:{
          "Content-Type":"applicationn/json",
          "charset":"utf-8"
        }
      },
        (err,data)=>{
        var weatherString=JSON.parse(data.result.toString());
        this.cityname=weatherString.data.cityName;
        this.citytianqi=weatherString.data.tq;
        this.cityqiwen=weatherString.data.qw;

      }
    )
      }

  aboutToAppear(){
    this.get_weather();
}

  build() {
    Row(){
      Column(){
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Column(){
          Row(){
            Text("城市名称：")
              .width("50%")
              .height("100%")
              .fontColor(Color.Black)
              .margin({left:"0vp"})
              .textAlign(TextAlign.Center)
              .fontSize("20fp")
            Text(this.cityname)
              .width("50%")
              .height("100%")
              .fontColor(Color.Black)
              .fontSize("20fp")
        }
          .width("360vp")
          .height("50.1vp")
          Row(){
            Text("城市天气：")
              .width("50%")
              .height("100%")
              .fontColor(Color.Black)
              .margin({left:"0vp"})
              .textAlign(TextAlign.Center)
              .fontSize("20fp")
            Text(this.citytianqi)
              .width("50%")
              .height("100%")
              .fontColor(Color.Black)
              .fontSize("20fp")
          }
          .width("360vp")
          .height("50.1vp")
          Row(){
            Text("城市温度：")
              .width("50%")
              .height("100%")
              .fontColor(Color.Black)
              .margin({left:"0vp"})
              .textAlign(TextAlign.Center)
              .fontSize("20fp")
            Text(this.cityqiwen)
              .width("50%")
              .height("100%")
              .fontColor(Color.Black)
              .fontSize("20fp")
          }
          .width("360vp")
          .height("50.1vp")
        }
      }
    }
  }
}