Vue实现一个天气APP

最新推荐文章于 2024-09-04 21:23:16 发布

浅山茶

最新推荐文章于 2024-09-04 21:23:16 发布

阅读量1k

点赞数

分类专栏： vue.js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_42814867/article/details/119714567

版权

本文介绍了使用Vue2.0和相关技术栈实现一个天气APP的过程，包括需求分析、定位问题解决、技术选型以及产品迭代的各个阶段。通过集成腾讯位置API获取地理位置，结合OpenWeather的天气API获取数据，利用Vuetify进行UI布局，Vuex管理状态，axios处理跨域。文章还探讨了异步处理和Promise相关知识，并展示了不同迭代阶段的代码和界面效果。

摘要由CSDN通过智能技术生成

天气APP

产品设计

需求分析

页面初始显示：当前地点以及当前时间温度
天气纠错，编辑上传正确的天气情况。
纵向排列，显示今/明/后的天气情况、最高和最低温度
【查看近15天天气】：星期几-天气图案-天气情况-最高/低温折线图
横向排列未来24小时每时刻的温度和天气图案、天气情况
左上角创建新城市，跳转到不同城市 当前温度、天气情况、最高/低温度。该页面左上角，点击跳转返回。
其他可待拓展的功能，如空气质量、极端天气风险警报、紫外线程度、穿衣程度

问题解决

位置定位并显示地点：腾讯i/百度/高德地图的api
具体实践：获取使用腾讯位置API资格、设置授权IP、使用API获取IP地理位置（要考虑处理跨域问题）、请求接口获取地点信息。

网上有很多获取位置的api，但是使用腾讯的位置服务api最好，返回的信息最全，包括经纬度，国家城市地区等。而其他绝大多数仅仅反馈了一个城市名。

显示当前时间：计时器setInterval
获取天气信息：根据当前城市获取中国天气网天气API信息

技术栈

vue 2.0 (vue3.0改动感觉不会写，没看太懂)
vuetify (布局)
vuex (多个城市信息写进内存，实现多个页面数据共享)
axios (跨域问题)
webpack
天气API-OpenWeather

产品迭代开发1.0

版本功能说明：完成最基本的逻辑，一个城市的定位功能，获取到天气API信息。

代码展示

Vue2.0写法
<template>
  <!-- vue2 要求有且仅有一个 dom 根节点，vue3 不要求 -->
  <div id="app">
    <h1>地区：{
  { cityName }}</h1>
    <!-- 注意getCurrentWeather()函数里包含参数 -->
    <button @click="getCurrentWeather(cityCode,API_KEY)">刷新</button>
    <div>{
  { isLoading ? '请求中' : currentWeather }}</div>
  </div>
</template>

<script>
//export default {
     
/**
 * js doc 注释形式
 * export default包含data()、created()等生命周期是函数;methods()是对象，格式【key:value】
 * @param data:function(参数){return对象}  或者  data(){return对象}
 *@param methods:{字符串类型的key:函数Function(参数){函数体}}/methods:{字符串类型的key(){函数体}}
 */
export default {
     
  data() {
     
    return {
     
      cityName: "白山",
      isLoading: false,
      currentWeather: " ",
      API_KEY: "e0d197a92fe1a637cf8e2938af524c4e",
      cityCode: "2038632",
    };
  },
  //函数未填写内容时，报错29:31  error  'code/key' is defined but never used  no-unused-vars
  methods: {
     
    getCurrentWeather(code, key) {
     
      this.isLoading = true;
      //关于axios的引用，get异步操作后,返回一个promise对象
      this.axios
        .get(
          `https://api.openweathermap.org/data/2.5/weather?id=${
       code}&appid=${
       key}`
        )
        .then((res) => {
     
          this.currentWeather