开发一个微信小程序(6)：查询天气-添加最近3日天气

在原有基础上添加未来3日天气，效果如下

这里需要调一下和风天气未来3日天气接口，然后再调整下前端样式

 

1、后端代码

编辑 pages/weather/weather.js，添加调用接口的js代码

               // 获取locationid后，查询未来3天气，在success中发起请求
                  wx.request({
                    url: 'https://devapi.qweather.com/v7/weather/3d', 
                    method: 'GET',
                    data: {
                      key: this.data.key,
                      location: location_id
                    },
                    success: (res) => {
                      console.log(res);
                      this.setData({
                        future: res.data.daily,
                        flag: true
                      })
                    },
         
                  });

2、前端代码

编辑 pages/weather/weather.wxml，添加最近3日天气相关代码

<view class="title"><text>最近3日天气</text></view>
  <view class="future-3d-father">
    <view class="future-3d-son1">
        <view><text>{{future[0].fxDate}}</text></view>
        <view><image wx:if="{{future[0].iconDay}}" src="../../QWeather-Icons-1.1.1/icons/{{future[0].iconDay}}.svg"></image></view>
        <view><text space="nbsp">{{future[0].tempMin}}/{{future[0].tempMax}} ℃</text></view>
        <view style="margin-top: 15rpx;"><text space="nbsp">{{future[0].textDay}}</text></view>
    </view>
    <view class="future-3d-son2">
      <view><text>{{future[1].fxDate}}</text></view>
      <view><image wx:if="{{future[1].iconDay}}" src="../../QWeather-Icons-1.1.1/icons/{{future[1].iconDay}}.svg"></image></view>
      <view><text space="nbsp">{{future[0].tempMin}}/{{future[1].tempMax}} ℃</text></view>
      <view style="margin-top: 15rpx;"><text space="nbsp">{{future[1].textDay}}</text></view>
    </view>
    <view class="future-3d-son3">
      <view><text>{{future[2].fxDate}}</text></view>
      <view><image wx:if="{{future[2].iconDay}}" src="../../QWeather-Icons-1.1.1/icons/{{future[2].iconDay}}.svg"></image></view>
      <view><text space="nbsp">{{future[0].tempMin}}/{{future[2].tempMax}} ℃</text></view>
      <view style="margin-top: 15rpx;"><text space="nbsp">{{future[2].textDay}}</text></view>
    </view>
  </view>

 

样式文件 pages/weather/weather.wxss

查看代码

/* pages/weather/weather.wxss */


.title {
  display: flex;
  justify-content: center;
  margin-top: 40rpx;
  
}
.title text {
  font-family: sans-serif;
  font-size: 36rpx;
  font-weight: bold;  /*加粗*/
  letter-spacing: 4rpx; /*字符之间的间距*/

}

.search {
  display: flex;
  justify-content: center;
  
}
/* .search-container {
  height: 88rpx;
  background-color: #ada5a5;
  display: flex;
  align-items: center;
  padding: 0 10rpx;
} */

.search-container  {
  font-size: 28rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
  height: 60rpx;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;  /*光标居中，在input标签下设置这个即可*/
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 5px 5px 10px #cccccc,
              inset -5px -5px 10px #ffffff;
}


.placeho {
  font-size: 22rpx;
  color: rgb(152, 153, 155);
  text-align: center;
}

.search-button {
  margin-left: 60rpx;
  margin-top: 20rpx;
  height: 55rpx;
  width: 120rpx;
  border-radius: 8px;
  background: linear-gradient(145deg, #e6e6e6, #ffffff);
  box-shadow:  18px 18px 24px #e2e0e0,
              -18px -18px 24px #ffffff;
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
}

.search-button view {
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-button image{
  height: 34rpx;
  width: 34rpx;
  margin-left: 5rpx;
}

.search-button text{
  font-size: 26rpx;
}

/* 热门城市 样式*/
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.cards__item {
  display: flex;
  flex-basis: 25%;
  /* padding-left: 8px;
  padding-right: 8px; */
  margin: 20rpx 0 0 20rpx;
  justify-content: center;
  align-items: center;
  height: 60rpx;
  /* width: 1000rpx; */
  border: 1rpx solid rgb(211, 210, 210);
  font-size: 24rpx;
  border-radius: 8px;
  background: linear-gradient(145deg, #d8d8d8, #ffffff);
  box-shadow:  18px 18px 24px #e2e0e0,
              -18px -18px 24px #ffffff;
}
.choose {
  display: flex;
  flex-basis: 25%;
  /* padding-left: 8px;
  padding-right: 8px; */
  margin: 20rpx 0 0 20rpx;
  justify-content: center;
  align-items: center;
  height: 60rpx;
  /* width: 1000rpx; */
  border: 1rpx solid rgb(211, 210, 210);
  font-size: 24rpx;
  color: white;
  border-radius: 8px;
  background: #0cb5df;
box-shadow:  14px 14px 59px #fcfdfd,
             -14px -14px 59px #e6f0f5;
}

/* 实时天气样式 */
.top-box {
  border-radius: 5px;
  background: #ace3fb;
  box-shadow: inset 6px 6px 12px #92c1d5,
            inset -6px -6px 12px #c6ffff;
  height: 100%;
  margin-left: 20rpx;
  margin-right: 20rpx;
}
.weather-image {
  margin-top: 20rpx;
  
  padding-top: 40rpx;
  /* width: 100%; */
  
  display: flex;
  justify-content: center;
  
}

/* 调整天气图标大小 */
.weather-image image {
  width: 150rpx;
  height: 150rpx;
  filter: drop-shadow(red);
}
/* 调整文本位置 */
.weather-text {
  margin-left: 50rpx;
  display: flex;
  flex-direction: column; 
}

.weather-text text {
   margin: 4rpx;
}
.indices {
  display: flex;
  justify-content: center;
  font-size: 26rpx;
  margin: 50rpx 30rpx 0 30rpx;
}
.next {
  margin-top: 60rpx;
  white-space: nowrap;
  /* display: flex;
  justify-content: center; */
}

.next-son {
  /* align-items: center;
  justify-content: center; */
  width: 20%;
  display: inline-block;
  margin-bottom: 20rpx;
  
}
.next-son text {
  font-size: 26rpx;
}
.next-son image {
  width: 40rpx;
  height: 40rpx;
  margin: 15rpx 0 15rpx 0;
}

.next-son view {
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center; 
}

/* 未来3天天气的样式 */
.future-3d-father {
  margin-top: 20rpx;
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  height: 100%;
  margin-left: 20rpx;
  margin-right: 20rpx;
  padding-bottom: 20rpx;  /*里面填充*/
  margin-bottom: 40rpx;  /*外壳距底部*/
  border-radius: 5px;
  background: #ace3fb;
  box-shadow: inset 6px 6px 12px #92c1d5,
            inset -6px -6px 12px #c6ffff;
}
.future-3d-father view {
  
}
.future-3d-son1  {
  margin-top: 40rpx;
  width: 33.33%;
  
  /* height: 100rpx; */
  /* display: flex; */
  
  align-items: center;
  justify-content: center;
}
.future-3d-son2 {
  margin-top: 40rpx;
  width: 33.33%;
  /* height: 220rpx; */
  /* display: flex; */
  align-items: center;
  justify-content: center;
  border-left: 1rpx dashed black;
  border-right: 1rpx dashed black;
}

.future-3d-son3 {
  margin-top: 40rpx;
  width: 33.33%;
  /* height: 100rpx; */
  /* display: flex; */
  align-items: center;
  justify-content: center; 
}

.future-3d-son1 view {
  display: flex;
  flex-direction: column;  /*使元素纵向布局（默认为横向）*/
  align-items: center;
  justify-content: center; 
}

.future-3d-son2 view {
  display: flex;
  flex-direction: column;  /*使元素纵向布局（默认为横向）*/
  align-items: center;
  justify-content: center; 
}

.future-3d-son3 view {
  display: flex;
  flex-direction: column;  /*使元素纵向布局（默认为横向）*/
  align-items: center;
  justify-content: center; 
}

.future-3d-father image {
  width: 50rpx;
  height: 50rpx;
  margin: 15rpx 0 15rpx 0;
}
.banquan {
  height: 20rpx;
}