实训第七天：天气预报小程序实现自动定位和布局完善

实现自动定位：接入腾讯地图的api，并申请一个key
获取位置接口和经纬度，用位置服务逆解析出ip地址，再将ip地址传值到获取实况天气的接口
代码：
 // wx获取位置接口
    wx.getLocation({
     success: function (res) {
     // 获取到经纬度
    console.log(res);
      // 逆地址解析
          qqmapsdk.reverseGeocoder({
          location:{
            latitude: res.latitude,
            longitude: res.longitude
          },
          success:function(res){
            console.log(res.result.address_component.district.substr(0,2));
            _this.weathertoday(res.result.address_component.district.substr(0, 2));
            _this.weatherweekday(res.result.address_component.district.substr(0, 2));
            }
        })
      }
    });
  },
// 天气api实况天气
  weatherweekday: function (city) {
    var _this = this;
    wx.request({
      url: 'https://www.tianqiapi.com/api/?version=v1',
      data: {
        'city': city
      },
      method: 'GET',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        _this.setData({
          weatherweek: res.data
        });
        console.log("7日天气 =>",_this.data.weatherweek)
      }
    });
  }
})
2.天气预报页面布局：可以用wx：for循环实现
①滚动布局：

<view class="weekday">7日天气</view>
<scroll-view class="scroll-view_H" scroll-x="true">
   <view class="scroll-view-item_H" wx:for="{{weatherweek.data}}">
      <view>{{item.date}}</view>
   <view>{{item.tem2}}~{{item.tem1}}</view>
      <view class='wea'>{{item.wea}}<image class='wea_img' src='../../weaicon/{{item.wea_img}}.png'></image></view>
      <view>{{item.win[0]}}{{item.win_speed}}</view> 
  </view>
</scroll-view>
②表格布局：

<view class="detail">
  <view class="item">
    <text>温度(℃)</text>
    <text>{{weather.tem}}</text>
  </view>
  <view class="item">
      <text>湿度(%)</text>
    <text>{{humidity}}</text>
  </view> 
  <view class="item">
        <text>PM2.5</text>
    <text>{{weather.air_pm25}}</text>
  </view>
    <view class="item">
      <text>气压(hPa)</text>
      <text>{{weather.pressure}}</text>
    </view>   
  <view class="item">
    <text>风向</text>
    <text>{{weather.win}}</text>
  </view> 
  <view class="item">
   <text>风速</text>
    <text>{{weather.win_meter}}</text></view>  
      <view class="item">
      <text>风速等级</text>
    <text>{{weather.win_speed}}</text>
  </view>  
  <view class="item">
  <text>能见度</text>
    <text>{{weather.visibility}}</text>
  </view>  
</view>
③天气指数布局：
<view class='mar-left'>
<text class='foot'>生活指数</text>
<view>
<image class='photo2' src='../../weaicon/衣服.png'></image>
<view class='tips'>
<text class='word'>穿衣指数 热</text>
<view class='life'>{{weather.air_tips}}</view>
</view>
</view>
<view>
<image class='photo2' src='../../weaicon/药丸.png'></image>
<view class='tips'>
<text class='word'>感冒指数 少发</text>
<view class='life'>{{weather.air_tips}}</view>
</view>
</view>
<view>
实现页面：