微信小程序 天气小程序

index.wxml:

<view class="container">
    <image class='bgi' mode='aspectFill' src='../../images/bg1.png'></image>
    <view class='body'>
        <view class='header'>
            <image src='{{nowWeatherImg}}'></image>
            <view>
                <text style='font-size:80rpx;'>{{cityname}}</text>
                <text class='txtaph'>{{weekday}}</text>
                <text class='txtaph'>{{weahterinfo}}</text>
            </view>
        </view>
        <view class='section'>
            <text>{{nowtemp}}</text>°C
        </view>
        <view class='ari-qulity'>
            <text>空气质量：<text>{{pmvalue}}</text></text>
        </view>
        <view class='weather-detail'>
            <view>
                <text>风向：{{winddir}}</text>
                <text>体感温度： {{feeltmp}}°C</text>
            </view>
            <view>
                <text>风力：{{windsc}}级</text>
                <text>相对湿度： {{hum}}</text>
            </view>
        </view>
        <view class='forecast'>
            <block wx:for="{{forecastData}}">
                <view>
                    <image style='width:120rpx; height:120rpx;' mode='aspectFit' src='../../images/140.png'></image>
                    <view>
                        <text>{{item.date}}</text>
                    </view>
                    <view>
                        <text>{{item.cond_txt_d}}</text>
                    </view>
                    <view>
                        <text>{{item.tmp_min}}°C ~ {{item.tmp_max}}°C</text>
                    </view>
                </view>
            </block>
        </view>
    </view>
</view>

index.wxss:

page {
  width: 100%; height: 100%;
  font-family: 'Comic Sans MS', cursive;
  position: relative;
}
.container{
  width: 100%;
  height: 100%;
  padding: 0;
}

.bgi{
  width: 100%; height: 100%;
  display: block;
  position: absolute;left: 0;top: 0；
}

.body{
  width: 100%;height: 100%;
  position: absolute;left: 0;top: 0;
}
.body .header{
  margin-top: 50rpx;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.body .header view{
  display: flex;
  flex-direction: column;
}
.body .header image{
  width: 160rpx; height: 160rpx;
}
.body .header  text{
  color: white;
}

.header view .txtaph{
  color: rgb(255, 255, 255);
}


.section {
  color: rgba(255,255,255, 0.7);
  font-size: 220rpx;
  text-align: center;
}

.ari-qulity {
  text-align: center;
}
.ari-qulity>text {
  background: #A5CE1B;
  border-radius: 8rpx;
  color: white;
  padding: 5rpx 15rpx;
}
.weather-detail {
  margin: 30rpx auto;
  width: 590rpx;
  padding: 10rpx 30rpx;
  background: rgba(255,255,255,0.2);
  border-radius: 25rpx;
  color: rgba(255,255,255, 0.7);
}
.weather-detail>view>text{
  display: inline-block;
  width: 50%;
}

.forecast {
  margin: 50rpx auto;
  width: 650rpx;
  background: rgba(255,255,255,0.2);
  border-radius: 25rpx;
  display: flex;
  justify-content: space-around;
  font-size: 30rpx;
  text-align: center;
  color: rgba(255,255,255, 0.7);
  padding: 15rpx 0;
}

index.js:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    nowWeatherImg: "../../images/131.png",
    cityname: "北京",
    weekday: "星期二",
    weahterinfo: "暴雨",
    nowtemp: 17,
    pmvalue: 50,
    winddir: '随便', //风向
    windsc: 'X', //风力
    feeltmp: 10, //体感温度
    hum: 30, //相对湿度
    forecastData: [null, null, null]
  },
  
  onLoad: function () {
    let that = this;
    this.setData(wx.getStorageSync('data'));
    //利用Promise这个类，将3个异步方法，按照顺序执行
    this.getLocation().then(this.getCity).then(this.getWeatherInfo).then(this.getForecast);

  },
  getForecast: function () {
    let that = this;
    return new Promise(function (done) {
      console.log("天气预查");
      wx.request({
        url: 'https://free-api.heweather.com/s6/weather/forecast?location=' + that.data.cityname + '&key=1790454674ca4af890312094cec23c95',
        success: function (res) {
          console.log("天气预查");
          that.setData({
            forecastData: res.data.HeWeather6[0].daily_forecast
          })
        }
      })
    });

  },
  getLocation: function () {
    return new Promise(function (done) {
      //第一步， 使用微信获取地理位置（经纬度）
      wx.getLocation({
        type: 'wgs84',
        success: function (res) {
          //取出经纬度
          let latitude = res.latitude;
          let longitude = res.longitude;
          //发出消息，表示已完成，并把获取的结果发出去
          done(latitude + "," + longitude);
        }
      });
    });
  },
  getCity: function (data) {
    return new Promise(function (done) {
      //第二步， 向腾讯发起网络请求，提交经纬度，并获取所在城市信息
      wx.request({
        url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + data + '&key=WV7BZ-IPMK2-PSLU2-C63EH-7FBMF-TTBX3',
        success: function (locinfo) {
          //获取到城市名称
          let cityname = locinfo.data.result.address_component.city;

          //发出消息，表示已完成，并把获取的结果发出去
          done(cityname);
        }
      });
    });
  },
  getWeatherInfo: function (data) {
    let that = this;
    return new Promise(function (done) {
      //第三步， 向和风发起网络请求，提交城市信息，获取天气预报
      wx.request({
        url: 'https://free-api.heweather.com/s6/weather/now?key=1790454674ca4af890312094cec23c95&location=' + data,
        success: function (weatherinfo) {
          console.log(weatherinfo);
          //修改页面上的信息
          that.setData({
            cityname: weatherinfo.data.HeWeather6[0].basic.location,
            weahterinfo: weatherinfo.data.HeWeather6[0].now.cond_txt,
            weekday: weatherinfo.data.HeWeather6[0].update.loc,
            nowWeatherImg: "../../images/" + weatherinfo.data.HeWeather6[0].now.cond_code + ".png",
            nowtemp: weatherinfo.data.HeWeather6[0].now.tmp,
            winddir: weatherinfo.data.HeWeather6[0].now.wind_dir,
            windsc: weatherinfo.data.HeWeather6[0].now.wind_sc,
            feeltmp: weatherinfo.data.HeWeather6[0].now.fl,
            hum: weatherinfo.data.HeWeather6[0].now.hum
          });
          wx.setStorageSync('data', that.data);
          done();
        }
      })

      //请求空气质量
      wx.request({
        url: 'https://free-api.heweather.com/s6/air/now?location=' + data + '&key=1790454674ca4af890312094cec23c95',
        success: function (airqulity) {
          let pm25 = airqulity.data.HeWeather6[0].air_now_city.pm25;
          console.log(pm25);
          that.setData({
            pmvalue: pm25
          })
        }
      })
    });
  }
})