更新七天JSON信息
调用API :
专业七日天气v9:/ /同前文需要先 易客云天气API免费天气API接口|天气预报接口|全球天气API接口|气象预警|空气质量 (tianqiapi.com)注册生成自己的api
http://v1.yiketianqi.com/api?unescape=1&version=v9&appid=65521391&appsecret=Dv2eKMLL
解析到的json数据如下:
对应json数据的键值对匹配不一样，需要重新解析
更新今天信息
Day day[7];
=================================
重写解析函数 - parseWeatherJsonDataNew
//七天json的数据解析
void Widget::parseWeatherJsonDataNew(QByteArray rawData)
{
QJsonDocument jsonDoc = QJsonDocument::fromJson(rawData);
if(!jsonDoc.isNull() && jsonDoc.isObject()){
QJsonObject jsonRoot = jsonDoc.object();
//解析城市
day[0].mCity = jsonRoot["city"].toString();
day[0].mPm25 = jsonRoot["aqi"].toObject()["pm25"].toString();
if(jsonRoot.contains("data") && jsonRoot["data"].isArray()){
QJsonArray weaArray =jsonRoot["data"].toArray();
for(int i=0;i<weaArray.size();++i){ //输出七天情况
QJsonObject obj = weaArray[i].toObject();
qDebug()<<obj["date"].toString()<<obj["wea"].toString();
// 将解析到这七年每天的数据解析到我们的数组中
day[i].mDate = obj["date"].toString();
day[i].mWeek = obj["week"].toString();
day[i].mWeathType = obj["wea"].toString();
day[i].mTemp = obj["tem"].toString();
day[i].mTempLow = obj["tem2"].toString();
day[i].mTempHigh = obj["tem1"].toString();
day[i].mFx = obj["win"].toArray()[0].toString();
day[i].mFl = obj["win_speed"].toString();
day[i].mAirq = obj["air_level"].toString();
day[i].mTips = obj["air_tips"].toString();
day[i].mHu = obj["humidity"].toString();
}
}
}
// 定义一个函数去给 ui更新数据
updateUI();
}更新解析到的ui信息 - updateUI
// 更新ui界面上的信息
void Widget::updateUI()
{
//解析我们获得的json数据, 填入到相关 控件中
//解析日期
ui->labelCurrentData->setText(day[0].mDate + " " + day[0].mWeek); // 把读取到的日期和星期加入到右上角的控件 labelCurrentData 中
//解析城市名称
ui->labelCity->setText(day[0].mCity+"市");
//解析当前温度
ui->labelTemp->setText(day[0].mTemp+"℃"); // 显示当前温度
ui->labelTempRange->setText(day[0].mTempLow + "～" +day[0].mTempHigh +"℃"); // 显示温度范围
//解析天气类型
ui->labelWeatherType->setText(day[0].mWeathType);
ui->labelWeatherIcon->setPixmap(mTypeMap[day[0].mWeathType]); // 根据键值对匹配对应图片
//解析感冒指数
ui->labelGanMao->setText(day[0].mTips);
//解析风向
ui->labelFengXiang->setText(day[0].mFx); //风向
ui->labelFengXiangData->setText(day[0].mFl);//风力
//解析PM2.5
ui->labelPM25Data ->setText(day[0].mPm25);
//湿度
ui->labelShiDuData->setText(day[0].mHu);
//空气质量
ui->labelAriData->setText(day[0].mAirq);
}
=====================================================
七个数据存放:
自定义Day类来存放每天信息
day.h
#ifndef DAY_H
#define DAY_H
#include <QString>
class Day
{
public:
Day();
QString mDate;
QString mWeek;
QString mCity;
QString mTemp;
QString mWeathType;
QString mTempLow;
QString mTempHigh;
QString mTips;
QString mFx;
QString mFl;
QString mPm25;
QString mHu;
QString mAirq;
};
#endif // DAY_H
// 没有实现什么方法，day.cpp没有额外内容就不展示
七个列表存放七个控件的信息
Day day[7];
// 定义7个列表去存放我们的label控件内容
QList<QLabel *> mWeekList;
QList<QLabel *> mDateList;
QList<QLabel *> mIconList;
QList<QLabel *> mWeatypeList;
QList<QLabel *> mAirqList;
QList<QLabel *> mFxList;
QList<QLabel *> mFlList;
上方列表依次对应下图中的七个控件
构造函数中初始化七天数据列表
mWeekList<<ui->labelday1<<ui->labelday2
<<ui->labelday3<<ui->labelday4
<<ui->labelday5<<ui->labelday6;mDateList<<ui->labelDate1<<ui->labelDate2
<<ui->labelDate3<<ui->labelDate4
<<ui->labelDate5<<ui->labelDate6;mIconList<<ui->labelWeahterIcon0<<ui->labelWeahterIcon1
<<ui->labelWeahterIcon2<<ui->labelWeahterIcon3
<<ui->labelWeahterIcon4<<ui->labelWeahterIcon5;mWeatypeList<<ui->labelWeatherTypeDate0<<ui->labelWeatherTypeDate1
<<ui->labelWeatherTypeDate2<<ui->labelWeatherTypeDate3
<<ui->labelWeatherTypeDate4<<ui->labelWeatherTypeDate5;mAirqList<<ui->labelairq0<<ui->labelairq1
<<ui->labelairq2<<ui->labelairq3
<<ui->labelairq4<<ui->labelairq5;mFxList<<ui->labelFX0<<ui->labelFX1
<<ui->labelFX2<<ui->labelFX3
<<ui->labelFX4<<ui->labelFX5;mFlList<<ui->labelFL0<<ui->labelFL1
<<ui->labelFL2<<ui->labelFL3
<<ui->labelFL4<<ui->labelFL5;
调优
调优包括:
优化pixmap显示
指定 控件大小使其不能因为插入图片而改变
// 缩放图标的大小让他能够匹配上
int index =day[i].mWeathType.indexOf("转"); //包含'转'的天气
if(index != -1){//包含'转'
pixmap = mTypeMap[day[i].mWeathType.left(index)]; // 拿到'转'左边的天气图片，例:晴转多云，拿到晴
}
else{
pixmap = mTypeMap[day[i].mWeathType];
}
pixmap = pixmap.scaled(mIconList[i]->size(),Qt::KeepAspectRatio); //缩放图标的大小为图片大小，并用KeepAspectRatio 参数，不让图片被拉伸
mIconList[i]->setPixmap(pixmap);根据空气质量设置样式表
// 根据空气质量情况设置对应的颜色
QString airQ = day[i].mAirq;
mAirqList[i]->setText(airQ);
//设置对应样式表
if(airQ == "优"){
mAirqList[i]->setStyleSheet(
"color: rgb(230, 230, 230); background-color: rgb(130, 213, 32); border-radius: 7px");
}
if(airQ == "良"){
mAirqList[i]->setStyleSheet(
"color: rgb(230, 230, 230); background-color: rgb(255, 187, 69); border-radius: 7px");
}
if(airQ == "轻度污染"){
mAirqList[i]->setStyleSheet(
"color: rgb(230, 230, 230);background-color: rgb(239, 121, 24);border-radius: 7px");
}
if(airQ == "中度污染"){
mAirqList[i]->setStyleSheet(
"color: rgb(230, 230, 230); background-color: rgb(255, 17, 17); border-radius: 7px");
}
if(airQ == "重度污染"){
mAirqList[i]->setStyleSheet(
"color: rgb(230, 230, 230); background-color: rgb(153, 0, 0); border-radius: 7px");
}
含'转'无法解析的优化
// 以下案例中都涉及 "转"导致无法解析，我们可以调用indexof - 把内容用“转”分开
在匹配上 left(index),将“转”之前的内容解析
int index =day[i].mWeathType.indexOf("转"); //包含'转'的天气
if(index != -1){//包含'转'
pixmap = mTypeMap[day[i].mWeathType.left(index)]; // 拿到'转'左边的天气图片，例:晴转多云，拿到晴
}
else{
pixmap = mTypeMap[day[i].mWeathType];
} // 风力也会涉及"转"，我们设置为左边的即可
index = day[i].mFl.indexOf("转");
if(index != -1){
mFlList[i]->setText(day[i].mFl.left(index));
}
else{
mFlList[i]->setText(day[i].mFl);
}更新updateUI
// 更新ui界面上的信息
void Widget::updateUI()
{
//解析我们获得的json数据, 填入到相关 控件中
QPixmap pixmap;
//解析日期
ui->labelCurrentData->setText(day[0].mDate + " " + day[0].mWeek); // 把读取到的日期和星期加入到右上角的控件 labelCurrentData 中
//解析城市名称
ui->labelCity->setText(day[0].mCity+"市");
//解析当前温度
ui->labelTemp->setText(day[0].mTemp+"℃"); // 显示当前温度
ui->labelTempRange->setText(day[0].mTempLow + "～" +day[0].mTempHigh +"℃"); // 显示温度范围
//解析天气类型
ui->labelWeatherType->setText(day[0].mWeathType);
ui->labelWeatherIcon->setPixmap(mTypeMap[day[0].mWeathType]); // 根据键值对匹配对应图片
//解析感冒指数
ui->labelGanMao->setText(day[0].mTips);
//解析风向
ui->labelFengXiang->setText(day[0].mFx); //风向
ui->labelFengXiangData->setText(day[0].mFl);//风力
//解析PM2.5
ui->labelPM25Data ->setText(day[0].mPm25);
//湿度
ui->labelShiDuData->setText(day[0].mHu);
//空气质量
ui->labelAriData->setText(day[0].mAirq);
// 更新七个QList的数据
for(int i=0;i<6;++i){
mWeekList[i]->setText(day[i].mWeek);
QStringList daylist = day[i].mDate.split('-'); //分割字符串 -
mDateList[i]->setText(daylist.at(1) + "-" + daylist.at(2)); // 原本是2024-6-24 ，我们只要后两位
// 缩放图标的大小让他能够匹配上
int index =day[i].mWeathType.indexOf("转"); //包含'转'的天气
if(index != -1){//包含'转'
pixmap = mTypeMap[day[i].mWeathType.left(index)]; // 拿到'转'左边的天气图片，例:晴转多云，拿到晴
}
else{
pixmap = mTypeMap[day[i].mWeathType];
}
pixmap = pixmap.scaled(mIconList[i]->size(),Qt::KeepAspectRatio); //缩放图标的大小为图片大小，并用KeepAspectRatio 参数，不让图片被拉伸
mIconList[i]->setPixmap(pixmap);
mWeatypeList[i]->setText(day[i].mWeathType);
// 根据空气质量情况设置对应的颜色
QString airQ = day[i].mAirq;
mAirqList[i]->setText(airQ);
//设置对应样式表
if(airQ == "优"){
mAirqList[i]->setStyleSheet(
"color: rgb(230, 230, 230); background-color: rgb(130, 213, 32); border-radius: 7px");
}
if(airQ == "良"){
mAirqList[i]->setStyleSheet(
"color: rgb(230, 230, 230); background-color: rgb(255, 187, 69); border-radius: 7px");
}
if(airQ == "轻度污染"){
mAirqList[i]->setStyleSheet(
"color: rgb(230, 230, 230);background-color: rgb(239, 121, 24);border-radius: 7px");
}
if(airQ == "中度污染"){
mAirqList[i]->setStyleSheet(
"color: rgb(230, 230, 230); background-color: rgb(255, 17, 17); border-radius: 7px");
}
if(airQ == "重度污染"){
mAirqList[i]->setStyleSheet(
"color: rgb(230, 230, 230); background-color: rgb(153, 0, 0); border-radius: 7px");
}
mFxList[i]->setText(day[i].mFx);
// 风力也会涉及"转"，我们设置为左边的即可
index = day[i].mFl.indexOf("转");
if(index != -1){
mFlList[i]->setText(day[i].mFl.left(index));
}
else{
mFlList[i]->setText(day[i].mFl);
}
}
mWeekList[0]->setText("今天");
mWeekList[1]->setText("明天");
mWeekList[2]->setText("后天");
}
效果演示
如上三图，我们对七天的json数据进行了相应解析，然后将可用内容添加到了我们的七组控件中
329
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
