OpenHarmony开发者论坛

标题: OpenHarmony制作简易天气预报小程序 [打印本页]

作者: 俺也不知道叫啥名字好听 时间: 2024-12-29 20:25
标题: OpenHarmony制作简易天气预报小程序
[md]# OpenHarmony制作简易天气预报小程序

---

## 简介

---

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

## 页面内容

---

##### 城市名称

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

##### 城市天气

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

##### 城市温度

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

## 项目效果图

![微信图片_20241229202502.png](https://forums-obs.openharmony.c ... 95m7txd2z8jm21m.png "微信图片_20241229202502.png")

![](file:///S:/%E5%BC%80%E6%BA%90%E6%8A%80%E6%9C%AF%E5%88%9B%E6%96%B0/%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2.png?lastModify=1735474882)

## 代码实现

---

```
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")
   }
   }
   }
  }
}
```
[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)