APP开发-Vue3+Vant实现不同地区动态获取天气信息功能

L_不觉晓晓

已于 2022-06-28 13:35:08 修改

阅读量1.1k

点赞数

分类专栏：笔记 VUE3 Vant 文章标签： vue.js 经验分享 javascript android

于 2021-06-29 11:01:01 首次发布

本文链接：https://blog.csdn.net/m0_48209314/article/details/118327683

版权

本文分享了如何在Vue3应用中结合Vant组件库，动态获取并展示不同地区的天气信息。通过分析需求和技术选择，选择了百度地图的API接口获取天气数据，实现了包括温度、湿度在内的信息展示，并提供了省市区列表的选择功能。

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

一、需求分析：

1、在APP首页有一个需求，要求根据不同地区显示当前地区的紫外线、温度、湿度、空气质量等。并且可以切换城市。
2、功能效果如下动图

在这里插入图片描述

二、技术分析

1、实现此功能主要有以下两个方面，首先我们要获取一个省市区列表，在我们使用的前端组件Vant里面已经提供了相关组件，我们直接使用即可。还有就是天气的接口，经过调查各个主流平台提供的天气查询接口，像高德是免费提供查询的，但是没有紫外线和空气质量的数据，还有其他平台不是提供查询数据不够，就是要收费的，经过对比还是决定使用百度地图提供的天气查询的API接口，它有免费和收费两种版本，免费的可以查询温度和湿度数据，紫外线和空气质量就是收费版提供的了。我们这里就先使用免费版的了，毕竟经费有限。
百度地图开放平台： https://lbsyun.baidu.com/index.php?title=webapi/weather#service-page-anchor-1-1
Vant官网： https://vant-contrib.gitee.io/vant/v3/#/zh-CN/area

三、功能实现

1、我们首先先把省市区列表实现出来，因为我们是弹出的一个popup框，所以，我们就需要把van-area组件放在里面，默认弹框是false，当点击事件触发变为true，在显示popup框。具体操作可参考组件文档，介绍的很详细。
html代码：

<!-- 地区选择 -->
  <van-popup v-model:show="showArea">
    <van-area
      :area-list="areaList1"
      @confirm="onAreaConfirm"
      @cancel="showArea = false"
      :value="cityId"
    />
 </van-popup>

2、获取天气信息
我们要调用查询天气API首先要申请一个百度开发者账号，具体流程可参考官网，然后根据官网提供的接口进行跨域请求，我们首先要配置一下跨区请求的地址,在vue.config.js里面进行如下配置，

module.exports = {
   
  publicPath: './',
  devServer: {
   
    proxy: {
   
      '/weather/': {
   
        target: 'http://api.map.baidu.com',
        ws: true, 
        changeOrigin: true, 
      },
    },
  },
};

在自己创建的resource.js里面进行如下配置，

export default {
   
  weather: {
    url: `http://api.map.baidu.com/weather/v1/`, method: 'get' }, // 天气信息取得API
};

配置完了就可以调用API：

  setup() {
   
    const {
    proxy } = getCurrentInstance();
    const weather = () => {
   
      // 获取天气信息
      proxy.$api.weather({
   
        district_id: state.cityId, // 城市code
        data_type: 'all',
        ak: BAI_DU_KEY, // 百度开发ak
      }).then((result) => {
   
        if (result.data.status === 0) {
   
          const dataList = result.data.result;
          // 地区名称
          state.weather.location = `${
     dataList.location.city} ${
     dataList.location.name}`;
          // 温度区间
          state.weather.text_day = `${
     dataList.forecasts[0].text_day}`;
          // 温度区间
          state.weather.weather = `${
     dataList.forecasts[0].low}/${
     dataList.forecasts[0].high}℃`;
          // 温度
          state.weather.temperature = dataList.now.temp;
          // 湿度
          state.weather.humidity = dataList.now.rh;
          // todo 护理建议接口
          state.weather.ultravioletRays = '5';
          state.weather.air = '32';
          if (proxy.$store.state.user.userId === '')