大屏项目_每小时更新天气，展示天气信息，展示2022-07-09 星期六 14:35 (5)

寻找能够免费获取天气的接口，我这里使用的是 和风天气

登录到官网，需要注册申请个人的key，还需要找到查询地区的location

每小时调接口

    import axios from 'axios';
    
     useEffect(() => {
        pollingFunction(getWeather, 1000 * 60 * 60);
      }, []);
      
       // 调取天气接口，设置动态数据
      const getWeather = () => {
        axios
          .get('https://devapi.qweather.com/v7/weather/now', {
            params: {
              location: '101210611',
              key: '3e86165fb7ec44b8b1a7aa38868c3589',
            },
          })
          .then((res) => {
            res && setWeather(res.data.now);
          });
      };
      
      // 接口轮询
     const pollingFunction = (func, time, endTime, immediate = true) => {
        immediate && func(); //是否立即执行一次
        const startTime = new Date().getTime();
        let pollTimer = setInterval(() => {
          const nowTime = new Date().getTime();
          if (endTime && nowTime - startTime >= endTime) {
            pollTimer && clearInterval(pollTimer);
          }
          func();
        }, time);
        return pollTimer;
      };

展示图标的问题

查询天气官方文档，未找到怎么设置天气图标，通过百度查询到方法，暂时用这种

       <div className={styles.weather}>
          <div>{weather.text}</div>
          <div className={styles.icon}>
            {weather?.icon && (
              <img src={require(`../../../node_modules/qweather-icons/icons/${weather?.icon}.svg`)}></img>
            )}
          </div>
          <div>{weather.temp}°C</div>
        </div>

这里是按照图标依赖后，直接去依赖里寻找，与icon值相同的图片

展示图标的样式问题

    .weather {
        position: absolute;
        top: 35px;
        right: 20px;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 280px;
        min-width: 280px;
        height: 22px;
        color: #39a4e8;
        font-size: 16px;
        
        // 这里想改变默认的svg颜色，通过这种方法可以实现改变颜色
        .icon {
          display: inline-block;
          overflow: hidden;
          line-height: 16px;
          img {
            position: relative;
            left: -17px;
            width: 18px;
            height: 16px;
            filter: drop-shadow(#39a4e8 16px 0);
          }
        }
  }
    

按照要求展示当前时间，要求实时更新时间

      // 上面的轮询方法，每秒获取当前时间
      useEffect(() => {
        pollingFunction(getNowTime, 1000);
      }, []);
      
      const getNowDate = () => {
        let myDate = new Date();
        let year = myDate.getFullYear(); //获取当前年
        let mon = myDate.getMonth() + 1; //获取当前月
        let date = myDate.getDate(); //获取当前日
        let now = year + '-' + mon + '-' + date;
        return now;
      };
      
      // 这里是在当分钟小于10时，需要添加0
        const addZero = (i) => {
        if (i < 10) {
          i = '0' + i;
        }
        return i;
      };
      
      const getNowTime = () => {
        console.log('first');
        let myDate = new Date();
        let hours = myDate.getHours(); //获取当前小时
        let minutes = myDate.getMinutes(); //获取当前分钟
        let now = hours + ':' + addZero(minutes);
        setShowTime(now);
      };
      
      // 获取当前星期
      const getNowday = () => {
        let myDate = new Date();
        let date = myDate.getDay();
        switch (date) {
          case 1:
            return '星期一';
          case 2:
            return '星期二';
          case 3:
            return '星期三';
          case 4:
            return '星期四';
          case 5:
            return '星期五';
          case 6:
            return '星期六';
          case 0:
            return '星期日';
        }
      };