天气预报源码

index.html

<view class='container'>
  <!-- 添加背景图片 -->
  <image src='{{backImg}}' class='bgi' mode='aspectFill'></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'>{{weatherinfo}}</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}}{{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{
  /* 使用弹性布局居中 */
  display: flex;
  justify-content: center;

  margin-top: 50rpx;

  /* 将图片居中对齐 */
  align-items: center;
}
.body .header view{
  /* 将view内的三个text竖着排列 */
  display: flex;
  flex-direction: column;
}
.body .header image{
  width: 160rpx;
  height: 160rpx;
}
.body .header text{
  color: white;
  font-weight: bolder;
}
.header view .txtaph{
  /* 字体透明度 */
  /* color: rgb(255, 255, 255);
  opacity: 0.6; */
  color: rgba(255, 255, 255, 0.8);
  /* padding-left: 30rpx; */
}

.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: 10rpx;
  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: {
    backImg:'../../images/back.jpg',
    nowweatherImg: '../../images/131.png',
    cityname: "北京",
    weekday: "更新日期",
    weatherinfo: "暴雨",
    //温度
    nowtemp: 17,
    //空气质量
    pmvalue:50,
    //风向
    winddir:"北风",
    //风力
    windsc:"X",
    //体感温度
    feeltmp:10,
    //相对湿度
    hum:30,
    forecastData: [null, null, null]
  },
  // 下拉刷新
  onPullDownRefresh: function(){
      console.log('在刷新！');
      this.onLoad();
  },

  onLoad: function () {
    var that = this;
    //1、使用微信获取地理位置（经纬度）
    //2、向腾讯发出网络请求，提交经纬度，并获取城市信息
    //3、向和风发起网络请求，提交城市信息，获取天气预报

    //1、获取地理位置信息
   /* wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        // 取出经纬度
        let latitude = res.latitude;
        let longitude = res.longitude;

        //2、根据经纬度，查找所在城市
        console.log(latitude, longitude,"经纬度");
        //向网络发起请求
        wx.request({
          //关于为什么这个url包含的网址用`，因为url里包含了变量
          url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=WV7BZ-IPMK2-PSLU2-C63EH-7FBMF-TTBX3`,
          //请求成功
          success:function(locinfo){
           console.log(locinfo,"地址信息");
           let cityname = locinfo.data.result.address_component.city;
           console.log(cityname, "城市名字");

           //3、向和风发起网络请求，提交城市信息，获取天气预报
           wx.request({
             url: 'https://free-api.heweather.com/s6/weather/now?key=289eb322373d499890558a037ee1d816&location=' + cityname,
             success:function(weatherinfo){
               console.log(weatherinfo, "对应城市的天气信息");

               //修改页面上的城市信息
               that.setData({
                 cityname: weatherinfo.data.HeWeather6[0].basic.location,
                 weatherinfo: weatherinfo.data.HeWeather6[0].now.cond_txt,
                 weekday: weatherinfo.data.HeWeather6[0].update.loc,
                 nowweatherImg:"../../images/" + weatherinfo.data.HeWeather6[0].now.cond_code + '.png',
                 backImg:'../../images/' +  weatherinfo.data.HeWeather6[0].now.cond_code + '.jpg',

                 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.request({
                url: 'https://free-api.heweather.com/s6/air/now?location=' + cityname +'&key=1790454674ca4af890312094cec23c95',
                success:function(airqulity){
                  console.log(airqulity.data.HeWeather6[0].air_now_city.pm25, "对应城市的空气质量");
                  var pm25 = airqulity.data.HeWeather6[0].air_now_city.pm25;
                  that.setData({
                    pmvalue: pm25,
                  })
                }
           })

          }
        })
      }
    });*/

 //获取缓存数据,不需要带大括号
    that.setData(wx.getStorageSync('data'))

    //异步方法：不按顺序执行
    // this.getLocation();
    // this.getCity();
    // this.getWeatherInfo();

    //利用Promise类将三个异步方法顺序执行
    this.getLocation().then(this.getCity).then(this.getWeatherInfo).then(this.getForsecast);
  },

  //获得未来三天的天气状况
  getForsecast: function(){
    var that = this;
    return new Promise(function(done){
      wx.request({
        url: 'https://free-api.heweather.com/s6/weather/forecast?location=' + that.data.cityname + '&key=289eb322373d499890558a037ee1d816',
        success: function(res){
          that.setData({
            forecastData: res.data.HeWeather6[0].daily_forecast,
          })
        }
      })
    });
  },
  //得到城市经纬度
  getLocation: function(){
    //将异步方法按顺序执行
     return new Promise(function(done){
       //1、获取地理位置信息
       wx.getLocation({
         type: 'wgs84',
         success: function (res) {
           // 取出经纬度
           var latitude = res.latitude;
           var longitude = res.longitude;
           console.log(latitude, longitude, "经纬度");
           //发出消息表示已完成，并把获取的结果发出去
           done(latitude + ',' + longitude);
           }
         });
     });
  },
  //得到城市名称
  getCity: function(data){
     return new Promise(function(done){
       //2、向腾讯发出网络请求，提交经纬度，并获取城市信息
       wx.request({
         //关于为什么这个url包含的网址用`，因为url里包含了变量
         url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + data + '&key=WV7BZ-IPMK2-PSLU2-C63EH-7FBMF-TTBX3',
         //请求成功
         success: function (locinfo) {
           console.log(locinfo, "地址信息");
           let cityname = locinfo.data.result.address_component.city;
           console.log(cityname, "城市名字");
           //发出消息。传给下一个人
           done(cityname);
         }
     });
  });
 },
 //得到城市天气状况
  getWeatherInfo: function(data){
       var that = this;
       return new Promise(function(done){
         //3、向和风发起网络请求，提交城市信息，获取天气预报
         wx.request({
           url: 'https://free-api.heweather.com/s6/weather/now?key=289eb322373d499890558a037ee1d816&location=' + data,
           success: function (weatherinfo) {
             console.log(weatherinfo, "对应城市的天气信息");
             //修改页面上的城市信息
             that.setData({
               cityname: weatherinfo.data.HeWeather6[0].basic.location,
               weatherinfo: weatherinfo.data.HeWeather6[0].now.cond_txt,
               weekday: weatherinfo.data.HeWeather6[0].update.loc,
               nowweatherImg: "../../images/" + weatherinfo.data.HeWeather6[0].now.cond_code + '.png',
               backImg: '../../images/' + weatherinfo.data.HeWeather6[0].now.cond_code + '.jpg',

               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=' + cityname + '&key=1790454674ca4af890312094cec23c95',
             success: function (airqulity) {
               console.log(airqulity.data.HeWeather6[0].air_now_city.pm25, "对应城市的空气质量");
               var pm25 = airqulity.data.HeWeather6[0].air_now_city.pm25;
               that.setData({
                 pmvalue: pm25,
               })
             }
         })
      });
  }
})

index.json

{
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}