实训日志 day6

最新推荐文章于 2024-09-02 23:55:01 发布

原创最新推荐文章于 2024-09-02 23:55:01 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

这篇实训日志详细记录了天气小程序的页面布局和设置过程，包括天气API接口的使用，导航条配置，用户头像和昵称的展示，地址信息获取以及天气信息的展示布局。内容涵盖WXML和WXSS的编写，用于调整组件的位置、大小和颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<!-- 导航条nav -->
<view class='nav'>
  <image class='img' src='../../assets/icons/icon.png'></image>  <!--放大镜-->
  <input class='ipt' placeholder-class='pla' placeholder='请输入城市名，快速查询天气信息' bindconfirm="finish"></input>
</view>
<!-- ENDnav -->

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

<!-- user -->
<view class='user'>

  <view class='userAvatar'>
    <open-data type="userAvatarUrl"></open-data>
  </view>

  <open-data class="userNick" type="userNickName"></open-data>
</view>
<!-- END user -->

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

<!-- location -->
<view class='map'>

  <view class='l-box'>
    <image class="img" src='../../assets/icons/location.png'></image>
    <text class='loc'>麻章</text>
  </view>
 
    <text class='r-box'>06-24 05:30 更新</text>
  
</view>
<!-- END location -->

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

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.获取天气信息

<!-- weather -->
<view class='info'>
  <view class='tem'>
    29 <text>℃</text>
  </view>
  <text class='wea'>阴</text>
  <text class='air_level'>空气质量:良</text>
</view>
<!-- END weather -->

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

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 */