vue 项目 web端如何实现天气预报2

在web段实现天气展示

首先我们要获取到天气信息，我们可以请求下面的接口

访问上面的接口后，可以看到返回值，拿到返回值后对数据进行处理和渲染就可以了

注意：通过返回值我们可以看到，wea_img的属性值是汉语拼音’yu’,
我们如果想要展示气象图片的话就需要将各种天气的图片放在public文件夹下

在使用图片的时候通过绑定src属性拼接路径拿到展示的图片，具体代码在下面 有注释。

js代码

export function getSevenDaysWeather(query) {
  const url = 'https://tianqiapi.com/api?' + $.param(query)
  return axios.get(url)
}

<script>
import { getSevenDaysWeather } from '@/api/weather'
export default {
  data() {
    return {
      weather: {},
      weaImgPrefix: 'img/weather/'  // 图片放置的路径
    }
  },
  created() {
    this.initWeather()
  },
  methods: {
    async initWeather() {
      const WEATHER_PARAMS = {
        appid: '25592716',
        appsecret: 'gcJK4Gm7',
        version: 'v1',
        vue: 1
      }
      const result = await getSevenDaysWeather(WEATHER_PARAMS)
      if (result) {
        this.weather = result.data.data.splice(0, 1)
      }
    }
  }
}
</script>

html代码

<template>
  <div class="wraper">
    <div class="header">气象信息</div>
    <div v-for="item in weather" :key="item.air" class="main">
      <div class="image">
       	// 绑定src属性 拼接路径
        <img :src="weaImgPrefix + item.wea_img + '.png'" alt="">
        <div class="wea">{{ item.wea }}</div>
      </div>
      <div class="infos">
        <div class="date">{{ item.date }}</div>
        <div class="temperature"><span class="tem">{{ item.tem }}</span>（实时）</div>
        <div class="limit">{{ item.tem2 }}-{{ item.tem1 }}</div>
        <div class="cloud">{{ item.win[0] }}{{ item.win_speed }}</div>
        <div class="card">
          <span>{{ item.air }}</span>
          <span>{{ item.air_level }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

css代码

<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .wraper {
    @include wraper;
    font-family: PingFangSC-Semibold;
  }
  .header {
    @include header;
  }
  .main {
    width: 100%;
    height: calc(100% - 72px);
    display: flex;
    .image {
      width: 50%;
      height: 100%;
      img {
        width: 210px;
        height: 210px;
      }
      .wea {
        margin-top: 20px;
        font-size: 16px;
      }
    }
    .infos {
      width: 50%;
      height: 100%;
      font-size: 16px;
      text-align: left;
      padding: 15px 0 0 45px;
      .temperature {
        margin: 13px 0;
        .tem {
          display: inline-block;
          font-size: 38px;
          color: #FFFFFF;
        }
      }
      .cloud {
        margin: 26px 0;
      }
      .card {
        width: 83px;
        height: 40px;
        background: #4A90E2;
        border-radius: 5px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
  }
</style>

实现效果