我知微风意 🤡| Vue.js手搓天气组件

抢救完水课"地球科学概论" , 我独自一人走在回寝室的路上，路灯冷白的光洒下，将我的影子拉得时长时短。

周围的一切都显得那么安静，而我的思绪却在这宁静之中开始飘飞 :

这微风中夹杂着淡淡寒意 , 是在提醒我多穿衣服吧 , 还是在说我明天的水课考试 : 风萧萧兮易水寒 ,壮士一去不复返 ~

困在代码里太久 , 今天刚好想搓一个天气组件 , 感知一下这个真实世界的冷暖 ~

回到寝室 , 我从书包拿出"滚烫"的电脑 , 扔掉背了几个小时的书 , 插上电源 , 开始回顾所学 , 并开始构思这个组件的设计。

我想做的是下面这样的组件

之所以说这个是组件 , 视角在于我将其放在一个庞大的项目之中的 , 我们可以称之为天气组件 , 于是我开始构思 ......

对于组件化思想的理解 ,可以看我的这篇文章

Vue与React| 组件化思想与CLI命令行

搓

我的编码思路:

实现静态页面
实现动态组件
动态显示初始化数据
- 天气------ 调用高德地图的 api
- 时间

使用 vite + vue 的方式初始化项目后 , 根据我预先想好的思路 , 开始搓

首先实现静态页面

分为导航栏和主体来搓

js 复制代码

<template>
  <div class="container">
    <!-- 导航 -->
    <!-- html5 语义化标签 -->
    <nav class="nav">
      <div class="time">{{localTime}}</div>
      <div class="city">切换城市</div>
    </nav>
    
    <main class="city-info">
      <div class="city-name">{{weatherData.city}}</div>
      <div class="weather">{{weatherData.weather}}</div>
      <h2 class="temp">
        <em>{{weatherData.temperature}}</em>C
      </h2>
      <div class="detail">
        <span>风力: {{weatherData.windPower}}级</span>
        <span>风向: {{weatherData.windDirection}}</span>
        <span>空气湿度: {{weatherData.humidity}}</span>
      </div>
    </main>
    <!-- 天气 -->
  </div>
</template>

<script setup>

</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #000;
  opacity: 0.6;
  color: #fff;
}
.nav {
  /* position: absolute; */
  overflow: auto;
  padding: 10px;
}
.city {
  float: right;
}
.time {
  float: left; 
}
.city-info {
  text-align: center;
}
.temp {
  font-size: 26px;
}
.temp em {
  font-size: 34px;
}
</style>

实现动态组件和数据交互

js 复制代码

<script setup>

import { ref , onMounted} from "vue"
import AMapLoader from "@amap/amap-jsapi-loader"
const localTime = ref("00:00-------------")
const weatherData = ref({
  city: "北京",
  weather: "晴",
  temperature: 20,
  windPower: 1,
  windDirection: "东北",
  humidity: 50
})
// 调用高德地图的api
const init_map = () =>{
  AMapLoader.load({
    key:'your-key',
    version : "2.0" ,
    plusins:['AMap.CitySearch']
  }).then(AMap =>{
    AMap.plugin('AMap.CitySearch',()=>{
      let citySearch = new AMap.CitySearch();
      citySearch.getLocalCity((status,result)=>{
        if(status === 'complete' && result.info === 'OK'){
          if(result && result.city && result.bounds){
            let cityName = result.city.replace(/市$/,'');
            weatherData.value.city = cityName;
          }
        }
      })
    })
  })
}
// 组件挂载完成时，调用init_map方法
onMounted(()=>{
  init_map()
  setInterval(()=>{
     localTime.value = new Date().toLocaleString()
  })
})

</script>

总结

原谅我水文 ,就当小 demo 实现吧👀 , 当我的一次生活随笔 ~ , 且行且记