鸿蒙实战开发：【7日天气预报】

先来看一下效果

image-20220720175843998

本项目界面搭建基于ArkUI中TS扩展的声明式开发范式，

数据接口是[和风（天气预报）]，

使用ArkUI自带的网络请求调用接口。

我想要实现的一个功能是，查询当前城市的实时天气，

目前已实现的功能有：

  • 默认查询北京的天气预报
  • 查看当前的天气
  • 查看未来七天的天气

通过本项目，你能学到的知识有：

  • 网络请求
  • 条件渲染
  • 状态管理

先来看一下

接下来开始正文，

我们先分析一下结构：

image-20220720212654686

我们可以分为三块

第一部分为实时天气信息栏

image-20220720213659159

代码如下

// @ts-nocheck/*** 该组件为实时天气预报组件** powered by 坚果* 2022/7/20*/@Entry
@Componentexport struct RealtimeWeather{@State temp: string = "9"@State text: string = "坚果"@State isRequestSucceed: boolean = truebuild(){Column() {Text($r("app.string.city")).fontSize(30)Row() {Text(this.temp).fontSize(100)Text('℃').fontSize(30).margin({ top: 10 })}.alignItems(VerticalAlign.Top).margin({ top: 5 })Text(this.text).fontSize(36).margin({ top: 5 })}.margin({ top: 50 })}}

第二部分为

 this.WeatherText("日期")this.WeatherText("天气")this.WeatherText("日出")this.WeatherText("日落")

第三部分为：

Scroll(){Column(){ForEach(this.future, (item: WeatherWeekData) => {Row() {this.WeatherText(item.fxDate)this.WeatherText(item.textDay)this.WeatherText(item.sunrise)this.WeatherText(item.sunset)}.margin({left:10})}, item => item.fxDate)}
}

最后用Column包裹

完整的代码如下：

Main.ets

// @ts-nocheck/** Copyright (c) 2021 JianGuo Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**    http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/
import { WeatherModel, WeatherData, WeatherWeekData, } from '../model/weatherModel';import { RealtimeWeather } from '../common/RealtimeWeather'
import { getWeekTest } from '../data/get_week_test'
import { getTest } from '../data/get_test'import prompt from '@system.prompt';
import http from '@ohos.net.http';@Entry
@Component
struct Main {aboutToAppear() {this.getRequest()this.getWeekRequest()}@State realtime: WeatherData = getTest()@State future: Array<WeatherWeekData> = getWeekTest()@State isRequestSucceed: boolean = true@Builder WeatherText(text: string) {Text(text).fontSize(14).layoutWeight(1).textAlign(TextAlign.Center).margin({ top: 10, bottom: 10 })}build() {Column() {if (this.isRequestSucceed) {// 当前天气RealtimeWeather({ temp: this.realtime.temp, text: this.realtime.text })Row() {this.WeatherText("日期")this.WeatherText("天气")this.WeatherText("日出")this.WeatherText("日落")}.margin({top:20})Scroll(){Column(){ForEach(this.future, (item: WeatherWeekData) => {Row() {this.WeatherText(item.fxDate)this.WeatherText(item.textDay)this.WeatherText(item.sunrise)this.WeatherText(item.sunset)}.margin({left:10})}, item => item.fxDate)}}Text("数据来自和风天气").fontSize(14).margin({ bottom: 30 })}}.width("100%").height("100%")}// 请求方式：GET 获取一周天气预报getWeekRequest() {// 每一个httpRequest对应一个http请求任务，不可复用let httpRequest = http.createHttp()let url = 'https://devapi.qweather.com/v7/weather/7d?location=101010100&key=48fbadf80bbc43ce853ab9a92408373e'httpRequest.request(url, (err, data) => {if (!err) {if (data.responseCode == 200) {console.info('=====data.result=====' + data.result)// 解析数据var weatherModel: WeatherModel = JSON.parse(data.result.toString())// 判断接口返回码，0成功if (weatherModel.code == 200) {// 设置数据this.future = weatherModel.dailythis.isRequestSucceed = true;ForEach(weatherModel.daily, (item: WeatherWeekData) => {console.log(console.info('=====data.result+item.fxDate=====' + item.fxDate))}, item => item.date)console.info('=====data.result===' + weatherModel.daily)} else {// 接口异常，弹出提示prompt.showToast({ message: "数据请求失败" })}} else {// 请求失败，弹出提示prompt.showToast({ message: '网络异常' })}} else {// 请求失败，弹出提示prompt.showToast({ message: err.message })}})}// 请求方式：GETgetRequest() {// 每一个httpRequest对应一个http请求任务，不可复用let httpRequest = http.createHttp()let url = 'https://devapi.qweather.com/v7/weather/now?location=101010100&key=48fbadf80bbc43ce853ab9a92408373e'httpRequest.request(url, (err, data) => {if (!err) {if (data.responseCode == 200) {console.info('=====data.result=====' + data.result)// 解析数据//this.content= data.result;// 解析数据var weatherModel: WeatherModel = JSON.parse(data.result.toString())// 判断接口返回码，0成功if (weatherModel.code == 200) {// 设置数据this.realtime = weatherModel.nowthis.isRequestSucceed = true;console.info('=====data.result===this.content==' + weatherModel.now)} else {// 接口异常，弹出提示prompt.showToast({ message: "数据请求失败" })}} else {// 请求失败，弹出提示prompt.showToast({ message: '网络异常' })}} else {// 请求失败，弹出提示prompt.showToast({ message: err.message })}})}
}

里面用到了网络请求

网络请求的步骤

1、声明网络请求权限

在entry下的config.json中module字段下配置权限

"reqPermissions": [{"name": "ohos.permission.INTERNET"}
]

2、支持http明文请求

默认支持https，如果要支持http，在entry下的config.json中deviceConfig字段下配置

"default": {"network": {"cleartextTraffic": true}
}

3、创建HttpRequest

// 导入模块
import http from '@ohos.net.http';
// 创建HttpRequest对象
let httpRequest = http.createHttp();

4、发起请求

GET请求（默认为GET请求）

// 请求方式：GETgetRequest() {// 每一个httpRequest对应一个http请求任务，不可复用let httpRequest = http.createHttp()let url = 'https://devapi.qweather.com/v7/weather/now?location=101010100&key=48fbadf80bbc43ce853ab9a92408373e'httpRequest.request(url, (err, data) => {if (!err) {if (data.responseCode == 200) {console.info('=====data.result=====' + data.result)// 解析数据//this.content= data.result;// 解析数据var weatherModel: WeatherModel = JSON.parse(data.result.toString())// 判断接口返回码，0成功if (weatherModel.code == 200) {// 设置数据this.realtime = weatherModel.nowthis.isRequestSucceed = true;console.info('=====data.result===this.content==' + weatherModel.now)} else {// 接口异常，弹出提示prompt.showToast({ message: "数据请求失败" })}} else {// 请求失败，弹出提示prompt.showToast({ message: '网络异常' })}} else {// 请求失败，弹出提示prompt.showToast({ message: err.message })}})}

5、解析数据（简单示例）

1.网络请求到的json字符串


export function getTest() {return [{"obsTime": "2022-07-20T09:24+08:00","temp": "28","feelsLike": "29","icon": "101","text": "多云","wind360": "225","windDir": "西南风","windScale": "3","windSpeed": "17","humidity": "71","precip": "0.0","pressure": "1000","vis": "8","cloud": "91","dew": "21"},]
}

2.创建相应的对象

export class WeatherWeekData {fxDate: string //sunrise: string //sunset: string //moonrise: string //moonset: string //moonPhase: string //moonPhaseIcon: string //tempMax: string //tempMin: string //iconDay: string //textDay: stringtextNight: string //wind360Day: string //windDirDay: string //windScaleDay: string //windSpeedDay: string //wind360Night: string //windDirNight: string //dew: string //windScaleNight: string // ，windSpeedNight: string //humidity: string //precip: string //pressure: string //vis: string //cloud: string //uvIndex: string //}

实况天气

目前支持全国4000+个市县区和海外15万个城市实时天气数据，包括实时温度、体感温度、风力风向、相对湿度、大气压强、降水量、能见度、露点温度、云量等数据。

)请求URL

// 北京实况天气 https://devapi.qweather.com/v7/weather/now?location=101010100&key=你的KEY

请求参数

请求参数包括必选和可选参数，如不填写可选参数将使用其默认值，参数之间使用&进行分隔。

key

用户认证key。如何获取KRY可前往我之前的文章。例如 key=123456789ABC

location

需要查询地区的LocationID或以英文逗号分隔的经度,纬度坐标十进制，最多支持小数点后两位），LocationID可通过城市搜索服务获取。例如 location=101010100 或 location=116.41,39.92

返回数据格式

// 北京实况天气 //  https://devapi.qweather.com/v7/weather/now?location=101010100&key=你的KEY{"code": "200","updateTime": "2020-06-30T22:00+08:00","fxLink": "http://hfx.link/2ax1","now": {"obsTime": "2020-06-30T21:40+08:00","temp": "24","feelsLike": "26","icon": "101","text": "多云","wind360": "123","windDir": "东南风","windScale": "1","windSpeed": "3","humidity": "72","precip": "0.0","pressure": "1003","vis": "16","cloud": "10","dew": "21"},"refer": {"sources": ["QWeather","NMC","ECMWF"],"license": ["commercial license"]}
}

// 请求方式：GETgetRequest() {// 每一个httpRequest对应一个http请求任务，不可复用let httpRequest = http.createHttp()let url = 'https://devapi.qweather.com/v7/weather/now?location=101010100&key=48fbadf80bbc43ce853ab9a92408373e'httpRequest.request(url, (err, data) => {if (!err) {if (data.responseCode == 200) {console.info('=====data.result=====' + data.result)// 解析数据//this.content= data.result;// 解析数据var weatherModel: WeatherModel = JSON.parse(data.result.toString())// 判断接口返回码，0成功if (weatherModel.code == 200) {// 设置数据this.realtime = weatherModel.nowthis.isRequestSucceed = true;console.info('=====data.result===this.content==' + weatherModel.now)} else {// 接口异常，弹出提示prompt.showToast({ message: "数据请求失败" })}} else {// 请求失败，弹出提示prompt.showToast({ message: '网络异常' })}} else {// 请求失败，弹出提示prompt.showToast({ message: err.message })}})}

七天天气预报

接口

// 北京7天预报 //  https://devapi.qweather.com/v7/weather/7d?location=101010100&key=你的KEY

返回数据

// 北京3天预报 
// 商业版 https://api.qweather.com/v7/weather/3d?location=101010100&key=你的KEY
// 开发版 https://devapi.qweather.com/v7/weather/3d?location=101010100&key=你的KEY{"code": "200","updateTime": "2021-11-15T16:35+08:00","fxLink": "http://hfx.link/2ax1","daily": [{"fxDate": "2021-11-15","sunrise": "06:58","sunset": "16:59","moonrise": "15:16","moonset": "03:40","moonPhase": "盈凸月","moonPhaseIcon": "803","tempMax": "12","tempMin": "-1","iconDay": "101","textDay": "多云","iconNight": "150","textNight": "晴","wind360Day": "45","windDirDay": "东北风","windScaleDay": "1-2","windSpeedDay": "3","wind360Night": "0","windDirNight": "北风","windScaleNight": "1-2","windSpeedNight": "3","humidity": "65","precip": "0.0","pressure": "1020","vis": "25","cloud": "4","uvIndex": "3"},{"fxDate": "2021-11-16","sunrise": "07:00","sunset": "16:58","moonrise": "15:38","moonset": "04:40","moonPhase": "盈凸月","moonPhaseIcon": "803","tempMax": "13","tempMin": "0","iconDay": "100","textDay": "晴","iconNight": "101","textNight": "多云","wind360Day": "225","windDirDay": "西南风","windScaleDay": "1-2","windSpeedDay": "3","wind360Night": "225","windDirNight": "西南风","windScaleNight": "1-2","windSpeedNight": "3","humidity": "74","precip": "0.0","pressure": "1016","vis": "25","cloud": "1","uvIndex": "3"},{"fxDate": "2021-11-17","sunrise": "07:01","sunset": "16:57","moonrise": "16:01","moonset": "05:41","moonPhase": "盈凸月","moonPhaseIcon": "803","tempMax": "13","tempMin": "0","iconDay": "100","textDay": "晴","iconNight": "150","textNight": "晴","wind360Day": "225","windDirDay": "西南风","windScaleDay": "1-2","windSpeedDay": "3","wind360Night": "225","windDirNight": "西南风","windScaleNight": "1-2","windSpeedNight": "3","humidity": "56","precip": "0.0","pressure": "1009","vis": "25","cloud": "0","uvIndex": "3"}],"refer": {"sources": ["QWeather","NMC","ECMWF"],"license": ["commercial license"]}
}

代码

// 请求方式：GET 获取一周天气预报getWeekRequest() {// 每一个httpRequest对应一个http请求任务，不可复用let httpRequest = http.createHttp()let url = 'https://devapi.qweather.com/v7/weather/7d?location=101010100&key=48fbadf80bbc43ce853ab9a92408373e'httpRequest.request(url, (err, data) => {if (!err) {if (data.responseCode == 200) {console.info('=====data.result=====' + data.result)// 解析数据var weatherModel: WeatherModel = JSON.parse(data.result.toString())// 判断接口返回码，0成功if (weatherModel.code == 200) {// 设置数据this.future = weatherModel.dailythis.isRequestSucceed = true;ForEach(weatherModel.daily, (item: WeatherWeekData) => {console.log(console.info('=====data.result+item.fxDate=====' + item.fxDate))}, item => item.date)console.info('=====data.result===' + weatherModel.daily)} else {// 接口异常，弹出提示prompt.showToast({ message: "数据请求失败" })}} else {// 请求失败，弹出提示prompt.showToast({ message: '网络异常' })}} else {// 请求失败，弹出提示prompt.showToast({ message: err.message })}})}

更多鸿蒙开发知识更新在gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md参考学习。

鸿蒙OpenHarmony-ArkUI声明式UI开发.png

城市搜索

调用接口（Get方式）

请求URL

# 搜索关键字beij 
// https://geoapi.qweather.com/v2/city/lookup?location=beij&key=你的KEY
location

需要查询地区的名称，支持文字、以英文逗号分隔的经度,纬度坐标（十进制，最多支持小数点后两位）、LocationID或Adcode（仅限中国城市）。例如 location=北京 或 location=116.41,39.92

模糊搜索，当location传递的为文字时，支持模糊搜索，即用户可以只输入城市名称一部分进行搜索，最少一个汉字或2个字符，结果将按照相关性和Rank值进行排列，便于开发或用户进行选择他们需要查看哪个城市的天气。例如location=bei，将返回与bei相关性最强的若干结果，包括黎巴嫩的贝鲁特和中国的北京市

重名，当location传递的为文字时，可能会出现重名的城市，例如陕西省西安市、吉林省辽源市下辖的西安区和黑龙江省牡丹江市下辖的西安区，此时会根据Rank值排序返回所有结果。在这种情况下，可以通过adm参数的方式进一步确定需要查询的城市或地区，例如location=西安&adm=黑龙江

名词解释

Rank值

Rank值是表明一个城市或地区排名的数字，基于多种因素综合计算而来，例如：人口、面积、GDP、搜索热度等。取值范围为1-10，在定位搜索服务中，返回的结果除了关键字的相关性以外，也会参考该城市的Rank值。数值越大代表该城市或地区的人口越多、面积更大或更加热门。例如陕西省西安市的Rank值就要比黑龙江省牡丹江市西安区更高，当使用“西安”作为关键字定位的时候，西安市的排名要高于西安区。

LocationID

LocationID或locid，是城市、地区或POI点的ID，一般由数字或字母+数字组成，是一个地点的唯一标识。LocationID可以通过定位搜索服务获取，中国地区、热门海外城市、一些POI点的LocationID还可以通过[城市列表]下载。

持续更新中，关注我不迷路~

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/564560.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于VS code 实现Java前后端打通—基础—使用Springboot+postgreSql+mybatis+Navicat

基于VS code 实现Java前后端打通—基础—使用Springboot+postgreSql+mybatis+Navicat

前言&#xff1a; 作者学习webjava后的而总结&#xff0c;总的流程概括就是先使用springboot创建项目&#xff0c;在application.properties中完成相应的postgreSql和mybaits的环境配置和.xml文件中dependecy依赖配置&#xff0c;entities实现数据表的类型模板&#xff0c;分别…
阅读更多...
大创项目推荐 图像识别-人脸识别与疲劳检测 - python opencv

大创项目推荐 图像识别-人脸识别与疲劳检测 - python opencv

文章目录 0 前言1 课题背景2 Dlib人脸识别2.1 简介2.2 Dlib优点2.3 相关代码2.4 人脸数据库2.5 人脸录入加识别效果 3 疲劳检测算法3.1 眼睛检测算法3.3 点头检测算法 4 PyQt54.1 简介4.2相关界面代码 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是…
阅读更多...
今天终于弄出swmm模型了

今天终于弄出swmm模型了

终于 终于 算解脱了
阅读更多...
Windows Server 2016 配置NTP客户端

Windows Server 2016 配置NTP客户端

目录 1. 前提条件1.1 进入服务管理界面1.2 开启Windows Time服务 2. 情况1&#xff1a;可以直接设置NTP时钟2.1 Internet时间设置 3. 情况2&#xff1a;有的版本服务器上没有“Internet时间”3.1 运行gpedit.msc 打开本地策略组3.2 Windows 时间服务3.3 配置Windows NTP客户端3…
阅读更多...
主干网络篇 | YOLOv8改进之在主干网络中引入密集连接卷积网络DenseNet

主干网络篇 | YOLOv8改进之在主干网络中引入密集连接卷积网络DenseNet

前言：Hello大家好，我是小哥谈。DenseNet（密集连接卷积网络）是一种深度学习神经网络架构，它在2017年由Gao Huang等人提出。DenseNet的核心思想是通过密集连接（dense connection）来促进信息的流动和共享。在传统的卷积神经网络中，每个层的输入只来自于前一层的输出。而在…
阅读更多...
SpringAOP+自定义注解实现限制接口访问频率，利用滑动窗口思想Redis的ZSet（附带整个Demo）

SpringAOP+自定义注解实现限制接口访问频率，利用滑动窗口思想Redis的ZSet（附带整个Demo）

目录 1.创建切面 2.创建自定义注解 3.自定义异常类 4.全局异常捕获 5.Controller层 demo的地址&#xff0c;自行获取《《—————————————————————————— Spring Boot整合Aop面向切面编程实现权限校验&#xff0c;SpringAop自定义注解自定义异常全局…
阅读更多...
C语言动态内存的管理

C语言动态内存的管理

前言 本篇博客就来探讨一下动态内存&#xff0c;说到内存&#xff0c;我们以前开辟空间大小都是固定的&#xff0c;不能调整这个空间大小&#xff0c;于是就有动态内存&#xff0c;可以让我们自己选择开辟多少空间&#xff0c;更加方便&#xff0c;让我们一起来看看动态内存的有…
阅读更多...
使用python实现布丰投针法

使用python实现布丰投针法

对于π的值，直到1946年的时候，人类才能将π的值精确计算到小数点后2037位，而现在的超级计算机的能力可以精确的计算到小数点后几十亿位，然而在计算机发明之前，还是使用这里的布丰投针法来计算π值，是最实用的方法。 使用代码来模拟这个过程，首先是程序设计思路的基本路…
阅读更多...
反序列化漏洞简单知识

反序列化漏洞简单知识

目录&#xff1a; 一、概念&#xff1a; 二、反序列化漏洞原因 三、序列化漏洞的魔术方法&#xff1a; 四、反序列化漏洞防御&#xff1a; 一、概念&#xff1a; 序列化&#xff1a; Web服务器将HttpSession对象保存到文件系统或数据库中&#xff0c;需要采用序列化的…
阅读更多...
python写爬虫爬取京东商品信息

python写爬虫爬取京东商品信息

工具库 爬虫有两种方案&#xff1a; 第一种方式是使用request模拟请求&#xff0c;并使用bs4解析respond得到数据。第二种是使用selenium和无头浏览器&#xff0c;selenium自动化操作无头浏览器&#xff0c;由无头浏览器实现请求&#xff0c;对得到的数据进行解析。 第一种方…
阅读更多...
算法---动态规划

算法---动态规划

动态规划 1.前言2. 示例 - 第N个泰波那契数2.1 算法原理&#xff08;重点&#xff09;2.2 代码 3. 总结解题思路 1.前言 哪些情况下会用到动态规划&#xff1a; 1.最优化问题&#xff1a;当需要求解最大值或最小值的问题时&#xff0c;可以考虑使用动态规划。例如&#xff0c…
阅读更多...
JS操作元素的内容

JS操作元素的内容

对象.innerText 属性 对象.innerHTML 属性 <body><div classbox>文字</div><script>//首先获取元素const box document.querySelector(.box)console.log(box.innerText)</script> </body> 1.元素innerText属性 将文本内容添加到标签任…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023