实训日志 day6

天气小程序页面的布局和设置

1.天气api通用接口文档

GET参数

version	String	是	接口标识, 固定值: v1
city	String	否	城市名称, 不要带市和区; 如: 青岛, 微山
ip	String	否	IP所在城市天气, 默认返回当前IP地区天气

背景图片 

page{
  height: 100%;
  /* background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561348370456&di=940bb674dcde1e5b24f8d372ac970f15&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F30%2F20160730120344_2rFBH.jpeg) no-repeat 0 0; */
  background-size: 100% 100%;
}

 

2.导航条设置 

index.wxml

index.js 

  // 输入框搜索功能
  finish:function(e){
    var _this = this;
    // console.log(e.detail.value);
    _this.setData({
      location: e.detail.value
    })
    this.getWeather(_this);
  },

 设置导航条的大小颜色，添加搜索图标

.nav{
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.nav>.ipt{
  width: 90%;
  border-bottom: 2rpx solid #ddd;
  padding-left: 60rpx;
  box-sizing: border-box;
}
.pla{
  font-size: 26rpx;
}
.nav>.img{
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 45rpx;
  top: 5rpx;
}
/* END nav */

2.获取用户头像和昵称 

index.wxml

 index.wxss

设置头像和昵称的位置，大小颜色

/* userinfo */
.user{
  margin: 20rpx 34rpx 0rpx;
  display: flex;
  align-items: center;
}
.user>.userAvatar{
  width: 55rpx;
  height: 55rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 1rpx solid #ddd;
}
.user>.userNick{
  font-size: 28rpx;
  color: #888;
  margin-left: 20rpx;
  /* font-weight: bold; */
}
/* END userinfo */

3.获取地址信息 

index.wxml

  
    
    麻章
  
 
    06-24 05:30 更新
  

设置定位地址的位置大小和颜色，和定位图标 

index.wxss

/* location */
.map{
  margin: 0 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between
}
.map .l-box{
  display: flex;
  align-items: center;
}
.map .img{
  width: 35rpx;
  height: 35rpx;
}
.map .loc{
  font-size: 54rpx;
  margin-left: 15rpx;
  color: #777;
}
.map .r-box{
  font-size: 26rpx;
  color: #999;
}
/* END location */

4.获取天气信息 

  
    29 ℃
  
  阴
  空气质量:良

设置天气内容的布局位置间距

index.wxss

/* weather */
.info{
  height: 600rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.info .tem{
  height: 400rpx;
  line-height: 400rpx;
  font-size: 120rpx;
  color: #777;
  position: relative;
}
.info .tem text{
  position:absolute;
  right:-30rpx;
  top:-15rpx;
  font-size:30rpx;
}
.info .wea{
  color: #666;
}
.info .air_level{
  margin: 10rpx;
  font-size: 30rpx;
  color: #777;
}
/* END weather */