• 开发一个微信小程序(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;
       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;
       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;
       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;
      /*  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;
      /*  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;
      /*  100%; */
      
      display: flex;
      justify-content: center;
      
    }
    
    /* 调整天气图标大小 */
    .weather-image image {
       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; */
       20%;
      display: inline-block;
      margin-bottom: 20rpx;
      
    }
    .next-son text {
      font-size: 26rpx;
    }
    .next-son image {
       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;
       33.33%;
      
      /* height: 100rpx; */
      /* display: flex; */
      
      align-items: center;
      justify-content: center;
    }
    .future-3d-son2 {
      margin-top: 40rpx;
       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;
       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 {
       50rpx;
      height: 50rpx;
      margin: 15rpx 0 15rpx 0;
    }
    .banquan {
      height: 20rpx;
    }
  • 相关阅读:
    网络知识学习系列(一)
    C# 开发系列(三)
    angularJS 系列(三)- 自定义 Service
    添加百度地图,显示定位
    angularJS 系列(二)——理解指令 understanding directives
    angularJS 系列(一)
    hbuilder 手机app开发系列(一)
    vue + 百度地图api
    百度地图api
    canvas的api
  • 原文地址:https://www.cnblogs.com/hanmk/p/16356403.html
Copyright © 2020-2023  润新知