uni-app 天气预报界面模板

在uni-app中创建一个天气预报界面模板，你可以使用Vue.js语法结合uni-app提供的组件和API来实现。以下是一个基本的实现示例，包括显示当前城市、温度、湿度以及简单的天气图标。

首先，确保你的uni-app项目已经创建好，并且在pages.json中配置了相应的页面路径。

1. 在pages目录下创建一个新的Vue页面，比如weather.vue

<template>
  <view class="container">
    <view class="city-info">
      <text class="city">{{ city }}</text>
    </view>
    <view class="weather-info">
      <text class="temp">{{ temp }}°C</text>
      <image :src="weatherIcon" class="icon"></image>
      <text class="humidity">{{ humidity }}%</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      city: '北京',
      temp: '25',
      humidity: '60',
      weatherIcon: 'https://example.com/sunny.png' // 替换为实际的天气图标URL
    };
  },
  methods: {
    // 你可以在这里添加获取天气数据的方法，比如通过API请求
    // fetchWeatherData() {
    //   uni.request({
    //     url: 'YOUR_WEATHER_API_URL',
    //     success: (res) => {
    //       this.city = res.data.city;
    //       this.temp = res.data.temp;
    //       this.humidity = res.data.humidity;
    //       this.weatherIcon = res.data.weatherIcon; // 根据天气状况选择图标
    //     }
    //   });
    // }
  },
  onLoad() {
    // 可以在页面加载时调用获取天气数据的方法
    // this.fetchWeatherData();
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.city-info, .weather-info {
  margin-bottom: 20px;
}
.city {
  font-size: 24px;
  font-weight: bold;
}
.temp {
  font-size: 48px;
  margin-bottom: 10px;
}
.icon {
  width: 60px;
  height: 60px;
}
.humidity {
  font-size: 18px;
  color: #666;
}
</style>

2. 在pages.json中添加页面路径

{
  "pages": [
    {
      "path": "pages/weather/weather",
      "style": {
        "navigationBarTitleText": "天气预报"
      }
    }
    // 其他页面配置...
  ]
}

说明

• 上面的代码展示了一个简单的天气预报界面，包括城市名、温度、湿度和天气图标。
• 天气数据（城市名、温度、湿度、图标）被硬编码在data中，实际应用中应通过API请求获取这些数据。
• 注释部分提供了获取天气数据的示例代码，你可以根据需要取消注释并替换为实际的API URL。
• 样式部分使用了简单的Flexbox布局，你可以根据需要调整样式以满足设计需求。