DAY05 微信小程序项目第三方接口应用（天气查询）

一.“我的”页面头像、昵称、设备信息展示

1.用弹性布局实现文本的两端对齐

<view>

<text>型号</text>

<text>{{model}}</text>

</view>

2.用open-data直接获取用户信息

3.写样式，在主轴左右居中，在交叉轴上下居中

.system.view{

/*弹性布局*/

}

在system中的view 里，每个底部都有一个边框。

4.缩小左边距离

.system{

Padding-left: 30rpx ;/*padding值不计算入宽度中，可能会造成超出页面*/

Padding-right/*不能在system中编写padding-right,应该在每个view中写， 线是不受padding值影响*/

}

5.重写在交叉轴上的排列方式Align-items

二.天气预报

1.在微信公众平台的开发设置中绑定域名https://www.tianqiapi.com

2.编写.js

  getapi: function () {

    var _this = this;

    // 获取IP地址

    wx.request({

      url: 'https://www.tianqiapi.com/ip/',

      data: {

      },

      method: 'POST',

      header: {

        'content-type': 'application/x-www-form-urlencoded'

      },

      success: function (res) {

        console.log(res);

        // 根据IP获取天气数据

        _this.weathertoday(res.data.ip); _this.weatherweekday(res.data.ip);

      }

    });

  },

  // 天气api实况天气

  weathertoday: function (ip) {

    var _this = this;

    wx.request({

      url: 'https://www.tianqiapi.com/api/?version=v6',

      data: {

        'ip': ip

      },

      method: 'GET',

      header: {

        'content-type': 'application/x-www-form-urlencoded'

      },

      success: function (res) {

        _this.setData({

          weather: res.data

        });

        console.log(_this.data.weather)

      }

    });

  },

  // 天气api实况天气

  weatherweekday: function (ip) {

    var _this = this;

    wx.request({

      url: 'https://www.tianqiapi.com/api/?version=v1',

      data: {

        'ip': ip

      },

      method: 'GET',

      header: {

        'content-type': 'application/x-www-form-urlencoded'

      },

      success: function (res) {

        _this.setData({

          weatherweek: res.data

        });

        console.log(_this.data.weatherweek)

      }

    });

3.编写.wxml

<!--index.wxml-->
<view class='container'>
<view class='a'>
<view class='city' >{{weather.city}}</view>
<view class='time'> {{weather.update_time}} 更新</view>
<view class='tem'>{{weather.tem}}℃ </view> 
<view class='padb'> {{weather.wea}}</view>
<view class='padb'>
<image mode="widthFix" src="http://cddn.huyahaha.com/tianqiapi/skin/qq/{{weather.wea_img}}.png" style="width:130rpx;" />
</view>
<view class='padb'>{{weather.win}} {{weather.win_speed}} {{weather.win_meter}}</view>
<view class='padb'>湿度: {{weather.humidity}}</view>
<view class='padb'>能见度: {{weather.visibility}}</view>
<view class='padb'>气压: {{weather.pressure}}hPa</view>
<view class='padb'>空气质量 {{weather.air_level}}</view>
<view class='tips'>{{weather.air_tips}}</view>
<view class='weekdays' style='font-size:16px; font-weight:bold;'>{{weather.city}}七日天气</view>
<block wx:for='{{weatherweek.data}}' wx:key='key_list'>
<view class='weekdays'>{{item.day}} - {{item.wea}} - {{item.win[0]}} - {{item.tem1}}/{{item.tem2}}</view>
</block>
</view>
</view>

4.编写.wxss

.container {

  height: 100%;

  text-align:center; background:#f6f8f8; padding:20rpx;font-size:16px;

} 
.padb{
padding-bottom: 20rpx;
color: #fff; 
background-size: 100% auto; 
background-position: center top; 
background-repeat: no-repeat; 
padding: 30rpx;
display: inline-block;
line-height: 0rpx;
} 
.tips{
  padding-bottom: 5rpx;
color: #fff; 
background-size: 100% auto; 
background-position: center top; 
background-repeat: no-repeat; 
padding: 5rpx;
display: inline-block; 
font-size:25rpx
}
.tem{
  margin-top: 40rpx;  
  font-size: 120rpx;
  color: #fff; 
}
.city{
font-size:16px;
float: left;
color: #fff;
}
.time{
float: right;
font-size:16px;
color: #fff; 
}
.weekdays{
padding-bottom: 5rpx;
padding: 10rpx 5rpx; 
border-bottom: 1rpx solid #eee;
color: #fff; 
font-size:28rpx
}
.a{
  width:100%;
height:1900rpx;
background:url('http://ww1.sinaimg.cn/large/005M7QYPly1fhg13oovmvj30ku1dvabu.jpg')no-repeat 0 0;
background-size: 100% 100%;}

5.小程序预览

6.遇到的问题：

①添加背景图片以后文字的格式发生改变（后通过更改背景图规格解决）

②链接的网址出现404错误

③背景图片平铺后四周均有留白