uni-app 好用的天气小程序 包含天气api调用

在开发一个包含天气API调用的uni-app天气小程序时，你可以使用现有的天气API（如和风天气、OpenWeatherMap等）来获取实时天气数据。以下是一个基本的示例，展示了如何在uni-app中调用天气API并展示天气信息。

步骤 1: 创建uni-app项目

首先，确保你已经安装了HBuilderX，这是开发uni-app的推荐IDE。然后，创建一个新的uni-app项目。

步骤 2: 安装axios进行HTTP请求

在你的项目根目录下，通过npm安装axios：

npm install axios --save

步骤 3: 编写页面代码

在pages/index/index.vue中，编写以下代码：

<template>
  <view class="container">
    <text v-if="weatherData">天气: {{ weatherData.weather[0].main }}</text>
    <text v-if="weatherData">温度: {{ weatherData.main.temp }}°C</text>
    <text v-if="!weatherData">加载中...</text>
  </view>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      weatherData: null,
    };
  },
  onLoad() {
    this.getWeather('北京'); // 替换为你想查询的城市
  },
  methods: {
    async getWeather(city) {
      try {
        const apiKey = 'YOUR_API_KEY'; // 替换为你的天气API密钥
        const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
        this.weatherData = response.data;
      } catch (error) {
        console.error('获取天气数据失败:', error);
      }
    },
  },
};
</script>

<style>
.container {
  text-align: center;
  padding: 20px;
}
</style>

步骤 4: 配置manifest.json

确保在manifest.json中配置了正确的请求权限，特别是网络请求权限。

步骤 5: 运行项目

在HBuilderX中，点击运行按钮，选择你要运行的平台（如微信小程序、H5等），然后查看效果。

注意事项

1. API密钥：你需要从天气API提供商处获取一个API密钥，并在代码中替换YOUR_API_KEY。
2. 错误处理：在实际应用中，你应该添加更多的错误处理逻辑，以处理API调用失败、网络问题等。
3. UI优化：上面的示例是一个非常基础的UI，你可以根据需要进行美化和优化。

这个示例展示了如何在uni-app中调用天气API并展示基本的天气信息。你可以根据需求进一步扩展功能，如添加更多天气信息、搜索城市、历史记录等。