实训第五天

<view class="newTopView">

<!--左边添加当前城市名字，点击跳转选择城市 右边添加刷新当前天气-->

</view>

<view class="topView">

  <view class="degreeView">

<!--当前温度-->

    <text class="degree">{{tianqi.data[0].tem}}</text>

 

  </view>

  <view class="detailInfo">

    <view class="degreeView">

<!--夜间天气情况-->

      <text class="detailInfoDegree">{{tianqi.data[0].tem2}}</text>

 

      <text class="detailInfoLine">/</text>

<!--白天天气-->

      <text class="detailInfoDegree">{{tianqi.data[0].tem1}}</text>

<!-- style优先级比class高会覆盖class中相同属性 -->

 

<!-- 当前天气名字 -->

      <text class="detailInfoName">{{tianqi.data[0].wea}}</text>

    </view>

  </view>

</view>

<!-- 中间部分 -->

<view class="centerView">

  <view class="centerItem" style="margin-right: 25rpx;">

<!-- 相同属性抽出来！ -->

<!--污染指数-->

    <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">空气质量：{{tianqi.data[0].air_level}}</text>

  </view>

  <view class="centerItem" style="margin-left: 25rpx">

    <text class="centerItemText" style="margin-left: 10rpx; margin-right: 10rpx">风向：{{tianqi.data[0].win_speed}}</text>

<!--风-->

    <text class="centerItemText">{{tianqi.data[0].win[0]}}</text>

  </view>

</view>

<!-- 底部view -->

<view class="bottomView">

 <!--数据返回的不是数组 在js中拼接的数组-->

  <block wx:for-items="{{tianqi.data}}" wx:key="date">

    <view class='bottomItem'>

    <view class="bottomItemView">

      <image class="bottomImage" src="../../sogo/{{item.wea_img}}.png"            style="margin-bottom: 15rpx;" />

      <text class="bottomText">{{item.week}}</text>

    </view>

    <view class="degreeView" style="margin-top: 20rpx;">

      <text class="bottomText">{{item.tem2}}</text>

      <text class="bottomText">/</text> 

      <text class="bottomText">{{item.tem1}}</text>

    </view>

    </view>

  </block>

</view>

感想：今天我们学习的是显示一个天气预报的页面。发现制作微信小程序的相关功能还是相当有趣的，可以制作自己喜欢的页面。了解了制作页面的相关步骤以及理解了相关的程序，获益很多。