Uniapp实现气象监测页面

页面效果图展示：

实现代码：
 

<template>
  <view class="content">
    <view class="content-top">
      <text class="name">{{city}}</text>
    </view>
    <view class="background">
      <view class="content-middle">
        <text class="temp-left">{{dataArr.temperature}}°</text>
        <view class="temp-middle">
          <text class="temp-weather">{{dataArr.weather}}</text>
          <text class="temp-maxmin">{{dataArr.temperature-3}}/{{dataArr.temperature-(-3)}}℃</text>
        </view>
        <image :src="selecturl" mode="aspectFit" class="temp-icon"> </image>
      </view>
      <view class="content-bottom">
        <view class="info">
          <image class="info-icon" src="../../static/images/ic_qxjc_weater.png" mode="aspectFit"></image>
          <text class="info-data">{{dataArr.weather}}</text>
          <text class="info-explain">天气</text>
        </view>
        <view class="info">
          <image class="info-icon" src="../../static/images/ic_qxjc_leaf.png" mode="aspectFit"></image>
          <text class="info-data">{{dataArr.humidity}}</text>
          <text class="info-explain">空气湿度</text>
        </view>
        <view class="info">
          <image class="info-icon" src="../../static/images/ic_qxjc_temp.png" mode="aspectFit"></image>
          <text class="info-data">{{dataArr.temperature}}</text>
          <text class="info-explain">温度</text>
        </view>
        <view class="info">
          <image class="info-icon" src="../../static/images/ic_qxjc_windy.png" mode="aspectFit"></image>
          <text class="info-data">暂无数据</text>
          <text class="info-explain">风速</text>
        </view>
        <view class="info">
          <image class="info-icon" src="../../static/images/ic_qxjc_celsius.png" mode="aspectFit"></image>
          <text class="info-data">{{dataArr.temperature-(-3)}}</text>
          <text class="info-explain">当天最高温度</text>
        </view>
        <view class="info">
          <image class="info-icon" src="../../static/images/ic_qxjc_celsius.png" mode="aspectFit"></image>
          <text class="info-data">{{dataArr.temperature-3}}</text>
          <text class="info-explain">当天最低温度</text>
        </view>
        <view class="info">
          <image class="info-icon" src="../../static/images/ic_qxjc_wind.png" mode="aspectFit"></image>
          <text class="info-data">{{dataArr.winddirection}}</text>
          <text class="info-explain">风向</text>
        </view>
        <view class="info">
          <image class="info-icon" src="../../static/images/ic_qxjc_tornado.png" mode="aspectFit"></image>
          <text class="info-data">{{dataArr.windpower}}</text>
          <text class="info-explain">风力</text>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        city: "衡阳蒸湘区",
        //高德地图api的key
        gdkey: "dcc44b404271d76d8d8bf53febb5f94f",
        adcode: 0,
        dataArr: [],
        //根据天气情况选择图片，默认或无对应状态图片时显示logo
        selecturl: "../../static/logo.png",
        //预先储存相关天气的图片和名字
        imgarry: [{
            name: '阴',
            imgurl: '../../static/images/weather_ic_cloudy.png'
          },
          {
            name: '晴',
            imgurl: '../../static/images/weather_ic_sunny_day.png'
          },
          {
            name: '霾',
            imgurl: '../../static/images/weather_ic_fog.png'
          },
          {
            name: '雨',
            imgurl: '../../static/images/weather_ic_hail.png'
          }, {
            name: '雪',
            imgurl: '../../static/images/weather_ic_cloudy.png'
          }, {
            name: '扬沙',
            imgurl: '../../static/images/weather_ic_dust.png'
          }
        ]


      }
    },
    onLoad() {
      this.getadcode();
      console.log("loading.....")
    },
    methods: {
      //获取城市编码，高德地图查询使用的是编码
      async getadcode() {
        uni.request({
          url: "https://restapi.amap.com/v3/geocode/geo?parameters",
          data: {
            key: this.gdkey,
            address: this.city
          },
          success: res => {
            console.log(res.data.geocodes[0].adcode)
            this.adcode = res.data.geocodes[0].adcode
            this.getdata()

          },
          fail: err => {
            console.log(err)
          }
        })
      },
      //根据城市编码获取天气状态
      getdata() {
        uni.request({
          url: "https://restapi.amap.com/v3/weather/weatherInfo?parameters",
          data: {
            key: this.gdkey,
            city: this.adcode,
            extensions: 'base'
          },
          success: res => {
            console.log(res.data.lives[0])
            this.dataArr = res.data.lives[0]
            this.select()
          },
          fail: err => {
            console.log(err)
          }
        })
      },
      //依据天气状况对比选择对应图片url
      select() {
        this.imgarry.forEach((item, index) => {
          console.log("foreach" + this.dataArr.weather)
          if (item.name == this.dataArr.weather) this.selecturl = item.imgurl
        })
      }
    },


  }
</script>

<style lang="scss">
  .content {
    display: flex;
    flex-direction: column;

    .content-top {
      width: 100%;
      height: 70rpx;
      background-color: #68CF96;
      padding-left: 20rpx;
      padding-top: 15rpx;

      .name {
        font-size: 40rpx;
        color: #ffffff;
      }


    }

    .content-middle {
      display: flex;
      //background-color: #EEFFEE;
      width: 100%;
      height: 130rpx;
      padding-top: 20rpx;

      .temp-left {
        font-size: 60rpx;
        font-weight: bold;
        padding-left: 40rpx;
      }

      .temp-middle {
        display: flex;
        flex-direction: column;
        padding-left: 20rpx;
        font-size: 30rpx;
      }

      .temp-icon {
        padding-left: 300rpx;
        width: 130rpx;
        height: 130rpx;
      }
    }

    .content-bottom {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 750rpx;
      justify-content: center;
      // background-color: #EEFFEE;



      .info {
        display: flex;
        flex-direction: column;
        width: 300rpx;
        height: 150rpx;
        background-color: #ffffff;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px 0.3px;
        border-radius: 15rpx;
        padding-left: 20rpx;
        padding-top: 20rpx;
        margin-right: 15rpx;
        margin-bottom: 15rpx;

        .info-icon {
          width: 50rpx;
          height: 50rpx;
        }

        .info-data {
          font-size: 30rpx;
        }

        .info-explain {
          font-size: 30rpx;
          color: #d8d5d7;
        }
      }
    }

    .background::after {
      content: '';
      background: linear-gradient(to bottom, #86b972, #a0c68f, #accc9e, #b9d2ad, #c6d8bb);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0.3;
      z-index: -1;

    }
  }
</style>