【愚公系列】《微信小程序与云开发从入门到实践》053-天气预报小程序的开发（当日天气模块开发）

// index.js
let networkModule = require('../../utils/network.js');

Page({
  data: {
    currentCity: "北京市",  // 当前城市，默认值为北京市
    weatherData: {}         // 存储天气数据
  },

  onShow: function () {
    // 获取存储的当前城市，如果没有则默认设置为“北京市”
    let city = wx.getStorageSync('currentCity') || "北京市";
    this.setData({
      currentCity: city
    });
    this.refreshWeatherData();  // 获取天气数据
  },

  // 刷新天气数据
  refreshWeatherData: function () {
    networkModule.network.getWeatherData(this.data.currentCity, (res, error) => {
      if (res) {
        this.setData({
          weatherData: res.data.showapi_res_body
        });
      } else {
        wx.showToast({
          title: '获取天气失败',
          icon: 'none'
        });
      }
    });
  },

  // 选择城市事件
  selectCityEvent: function () {
    wx.navigateTo({
      url: '../selectCity/selectCity?type=1'  // 跳转到城市选择页面
    });
  }
});

<!-- index.wxml -->
<view class="container">
  <!-- 上部分：显示城市和选择城市按钮 -->
  <view class="header">
    <view class="location">
      <text class="currentCity">{{currentCity}}</text>
      <text class="selectBtn" bindtap="selectCityEvent">选择城市</text>
    </view>
    <view class="now_top">
      <view class="now_left">
        <text class="now_temperature">{{weatherData.now.temperature ? weatherData.now.temperature : "~"}}℃</text>
      </view>
      <view class="now_right">
        <view class="new_right_item">{{weatherData.now.weather}}<image class="new_right_item_icon" src="{{weatherData.now.weather_pic}}"></image></view>
        <view class="new_right_item">空气湿度：{{weatherData.now.sd}}</view>
        <view class="new_right_item">空气指数：{{weatherData.now.aqi}}</view>
        <view class="new_right_item">{{weatherData.now.wind_direction}}  {{weatherData.now.wind_power}}</view>
        <view class="new_right_item">降水量：{{weatherData.now.rain}}mm</view>
      </view>
    </view>
    <view class="now_bottom">
      <view class="now_left">
        <view class="now_bottom_item">空气质量：{{weatherData.now.aqiDetail.quality}}</view>
        <view class="now_bottom_item">一氧化碳均值：{{weatherData.now.aqiDetail.co}}mg/m³</view>
        <view class="now_bottom_item">二氧化氮均值：{{weatherData.now.aqiDetail.no2}}μg/m³</view>
        <view class="now_bottom_item">臭氧均值：{{weatherData.now.aqiDetail.o3}}μg/m³</view>
        <view class="now_bottom_item">二氧化硫均值：{{weatherData.now.aqiDetail.so2}}μg/m³</view>
      </view>
      <view class="now_right">
        <view class="now_bottom_item">PM10：{{weatherData.now.aqiDetail.pm10}}</view>
        <view class="now_bottom_item">PM2.5：{{weatherData.now.aqiDetail.pm2_5}}</view>
        <view class="now_bottom_item">污染：{{weatherData.now.aqiDetail.primary_pollutant}}</view>
        <view class="now_bottom_item">城市排名：{{weatherData.now.aqiDetail.num}}</view>
      </view>
    </view>
    <view class="now_time">数据更新时间：{{weatherData.now.temperature_time}}</view>
  </view>
</view>

/**index.wxss**/
.header {
  background-image: linear-gradient(to left bottom, #8b82f2,#4b3fa0);
  width: 100%;
  height: 800rpx;
}

.location {
  color: white;
  margin: 15px;
}

.selectBtn {
  font-size: 12px;
}

.currentCity {
  margin-right: 4px;
}

.now_top{
  display: flex;
  flex-direction: row;
  margin-left: 15px;
}

.now_bottom {
  display: flex;
  flex-direction: row;
  margin-left: 15px;
  margin-top: 15px;
}

.now_temperature {
  color: white;
  font-size: 80px;

}

.now_right {
  color: white;
  margin-left: 15px;
}

.new_right_item {
  margin-top: 2px;
  margin-bottom: 2px;
}

.new_right_item_icon {
  width: 18px;
  height: 18px;
  margin-left: 5px;
}

.now_bottom_item {
  color:white;
  margin-bottom: 5px;
  font-size: 13px;
}

.now_time {
  width: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color:white;
}