个人微信小程序（生活服务）——天气页面

续上文的开发指南：http://blog.csdn.net/u013948010/article/details/78530173
这篇主要是讲一下天气主页面的设计实现。

index界面获取数据

主页面的index.js函数已经实现了访问和风天气接口，并把数据存入全局变量中，上一篇也有说到：

weatherData
air

所以天气页面直接取这两个全局数据就可以了。
主页面获取天气数据的代码

//获取天气
  getWeather:function(e){
    var city = this.data.location.slice(0, 2); //分割字符串
    var that = this;
    var url = "https://free-api.heweather.com/s6/weather";
    var param = {
      key: "你的key",
      location: city
    };
    //发出请求
    wx.request({
      url: url,
      data: param,
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        console.log(res);
        app.globalData.weatherData = res.data.HeWeather6[0];
        that.setData({
          weatherData: app.globalData.weatherData.now, //今天天气情况数组 
          dress: res.data.HeWeather6[0].lifestyle[1] //生活指数
        });
      }
    })
  },
  getAir: function (e){
    var city = this.data.location.slice(0, 2); //分割字符串
    var that = this;
    var url = "https://free-api.heweather.com/s6/air/now";
    var param = {
      key: "你的key",
      location: city
    };
    //发出请求
    wx.request({
      url: url,
      data: param,
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        console.log(res);
        app.globalData.air = res.data.HeWeather6[0].air_now_city;
        that.setData({
          air: app.globalData.air
        });
      }
    })
  },

天气页面设计

天气页面大概是这样子的：

上面是今日天气详情显示，下面是近三日的天气情况。
背景图片是自己找的，存入images/weather/文件夹中：

<image class="bg" mode="aspectFill" src="../../images/weather/day.jpg"></image>

天气小图标是在和风天气网站上根据天气代码下载的，存入images/weather/文件夹中:

<image class="typeImg" src="../../images/weather/{{fc.cond_code_d}}.png">

weather.wxml设计

<!--index.wxml-->
<image class="bg" mode="aspectFill" src="../../images/weather/day.jpg"></image>
<view class="wrapper">
  <view class="curWeather">
    <view class="curTemperature">
      <view class="tmp">{{now.tmp}}°</view>
      <view class="city">{{city}}{{district}}</view>
      <view class="type">{{now.cond_txt}} | 空气 {{quality.qlty}}</view>
    </view>
    <view class="curExtern">
      <view class="wind">
        <view class="">{{now.wind_dir}}</view>
        <view wx:if="{{now.wind.sc=='微风'}}" class="val">{{"<="}}2级</view>
        <view wx:else class="val">{{now.wind_sc}}级</view>
      </view>
      <view class="line"></view>
      <view class="relWet">
        <view class="">相对湿度</view>
        <view class="val">{{now.hum}}%</view>
      </view>
      <view class="line"></view>
      <view class="humanTmp">
        <view class="">体感温度</view>
        <view class="val">{{now.fl}}°</view>
      </view>
    </view>
  </view>
  <view class="forecast">
    <block wx:for="{{forecast}}" wx:for-index="index" wx:for-item="fc">
      <view class="castItem">
        <view class="castDay">{{showday[index]}}</view>
        <view class="castType">
          <image class="typeImg" src="../../images/weather/{{fc.cond_code_d}}.png"></image>
          {{fc.cond_txt_d}} | {{fc.wind_sc}}
        </view>
        <view class="castTmp">
          {{fc.tmp_max}}° / {{fc.tmp_min}}°
        </view>
      </view>
    </block>
  </view>
</view>

weather.wxss设计

/**index.wxss**/
.wrapper{
  width:100%;
  height:100%;
  box-sizing: border-box;
  position:absolute;/*绝对定位*/
  top:0;
  left:0;
  padding:30rpx;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.curWeather{
  height:650rpx;
  display: flex;
  flex-direction: column;/*纵向*/
}

.bg{
  height:700rpx; 
  width:750rpx;
}

.curTemperature{
  color:#fff;
  font-size: 0.8em;
  flex-grow: 1;/*表示将剩余的空间分配给它*/
}

.tmp{
  font-size: 5em;
}
.curExtern{
  display: flex;
  flex-direction: row;/*横向*/
  justify-content: space-around;
  color:#fff;
}
.val{
  text-align: center;
  font-size: 1.2em;
}
.line{
  border:0.9rpx solid #fff;
}
.typeImg{
  width:50rpx;
  height:50rpx;
  vertical-align: middle;
}
.castItem{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1rpx solid #ccc; 
  padding:50rpx 10rpx;
}
.forecast{
  color:#8BC34A;
  /*background: #aaa;*/
  margin-top:40rpx;
}

天气页面逻辑设计

weather.js设计

数据直接获取全局数据：
that.setData({
city: app.globalData.defaultCity, //今天天气情况数组
district: app.globalData.defaultCounty //生活指数
});

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    showday: ['今天', '明天', ''],
    city:'', //城市
    district:'', //区域
    now:'',
    forecast:'',//三日天气预报
    quality:'' //空气质量
  },
  onShow: function () {
    var that = this;
    var city = app.globalData.defaultCity.slice(0, 2);
    that.setData({
      city: app.globalData.defaultCity, //今天天气情况数组 
      district: app.globalData.defaultCounty //生活指数
    });
    that.getWeather(city);//获得天气
  },
  //当页面加载完成
  onLoad: function () {
    var that = this;
    var date = new Date();
    console.log(date.getDay());
    that.setData({
      'showday[2]': this.data.weekday[(date.getDay() + 2) % 7],
    });
    console.log(this.data.showday);

  },
  //获取天气
  getWeather: function (city) {
    var that = this;
    that.setData({
          now: app.globalData.weatherData.now, //今天天气情况数组 
          forecast: app.globalData.weatherData.daily_forecast,
          quality: app.globalData.air
    });
  },
});