前言

这篇文章将详细介绍一个基于Vue.js的天气预报应用。该应用具有显示当前时间和天气、切换城市以及展示未来几天的天气预报等功能。

vue的框架搭建

1. 创建一个vue文件夹，打开命令行输入
2. 我们选择路由，其他都是否

1. 输入第一行和第二行代码

1. 删除框住的文件和文件夹

1. 在router文件夹的index.js中删除

1. App.vue且main.js中删除第一行

1. 在views下创建index.vue中输 vb3s 写功能

代码实现

首先，我们从<template>部分开始分析：

<template>
  <!-- 省略其他代码 -->
  <div class="nav">
    <div class="time">{{ now }}</div>
    <div class="city" @click="state.show = true">切换城市</div>
  </div>
  <!-- 省略其他代码 -->
  <div class="future" v-if="state.future.length">
    <!-- 未来两天天气预报 -->
  </div>
  <!-- 省略其他代码 -->
  <div class="echarts-wrap" ref="echartsWrap"></div>
  <!-- 省略其他代码 -->
</template>

在模板中，我们可以看到以下几个关键部分：

• {{ now }}: 这是一个实时更新的时间显示。
• @click="state.show = true": 当用户点击“切换城市”按钮时，会打开一个弹出框以选择新的城市。
• .future: 这个部分展示了未来两天的天气预报。
• .echarts-wrap: 这个元素用于放置折线图。

接下来，我们看看<script setup>中的代码：

let now = ref('00:00:00');
setInterval(() => {
  now.value = new Date().toLocaleTimeString();
}, 1000);

这部分代码定义了一个名为now的ref变量来存储当前时间，并通过setInterval()函数每秒更新一次。

const state = reactive({
  city: '',
  today: {},
  show: false,
  future: {}
});

这里定义了一个名为state的对象，它包含了以下属性：

• city: 存储当前城市的名称。
• today: 存储当天的天气数据。
• show: 控制弹出框是否可见。
• future: 存储未来几天的天气预报数据。

const getWeather = (city) => {
  // 加载天气查询插件
  AMap.plugin("AMAP.Weather", function () {
    // 创建天气查询实例
    var weather = new AMap.Weather();
    // 执行实时天气信息查询
    weather.getLive(city, function (err, data) {
      console.log(err, data);
      state.today = data;
    });
    weather.getForecast(city, function (err, data) {
      console.log(err, data);
      state.future = data.forecasts;
      nextTick(() => {
        initEcharts();
      });
    });
  });
};

这个getWeather函数负责获取指定城市的天气信息。它使用高德地图API（需要引入相关库）来获取实时天气和未来几天的天气预报，并将结果分别赋值给state.today和state.future。

这是高德地图的API网址 lbs.amap.com/

const selectCity = ({ selectedOptions }) => {
  console.log(selectedOptions[1].text);
  state.city = selectedOptions[1].text;
  getWeather(selectedOptions[1].text);
  state.show = false;
};

selectCity函数处理用户选择新城市后的操作。它接收来自弹出框的选择项，然后更新state.city并调用getWeather函数获取新城市的天气信息。

const echartsWrap = ref(null);
const initEcharts = (arr) => {
  let mycharts = echarts.init(echartsWrap.value);
  mycharts.setOption({
    title: {
      text: "未来两天天气预报",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
    },
    xAxis: {
      type: "category",
      data: ["今天", "明天", "后天", "大后天"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "温度",
        type: "line",
        data: state.future.map((item) => {
          return item.dayTemp;
        }),
      },
    ],
  });
};

initEcharts函数初始化一个ECharts图表，用于绘制折线图。它使用echarts.init()方法创建一个新的图表实例，并设置各种选项，如标题、坐标轴类型、数据等。最后，它将未来几天的气温数据映射到data数组中。

图表的示例在这个链接

onMounted(() => {
});

onMounted()钩子函数确保在组件挂载完成后执行某些操作。在这个例子中，没有具体的代码，但你可以在这里添加一些初始化工作。

生命周期钩子函数的链接在这

最后，在main.js文件中，我们需要导入必要的依赖并注册它们：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

// 导入Vant UI库
import { Area, ActionSheet } from "vant";
import "vant/lib/index.css";

const app = createApp(App);

// 注册ActionSheet组件
app.use(ActionSheet);

// 注册路由模块
app.use(router);

// 注册Area组件
app.use(Area);

app.mount("#app");

这段代码导入了Vue.js、App.vue组件、路由器以及Vant UI库。然后，我们使用app.use()方法注册ActionSheet和Area组件，并将应用挂载到HTML中的某个元素上。

总结

这个Vue.js应用的功能包括：

• 实时显示时间。
• 切换城市并获取对应城市的天气信息。
• 展示未来几天的天气预报。
• 使用ECharts绘制折线图展示气温变化。