这个案例是仿UC中天气界面做的中间也有点出入，预留了显示当前城市名字和刷新图标的位置，自己可以写下，也可以添加搜索城市。值得注意的是100%这个设置好像已经不好使了，可以通过获取设备的高度通过数据绑定设置高度。地址：https://github.com/shuncaigao/Weather
界面主要分为四部分：
第一部分
这里是预留的一块可以自行添加补充下
<view class="newTopView">
<!--左边添加当前城市名字，点击跳转选择城市 右边添加刷新当前天气-->
</view>
第二部分：
<view class="topView">
<view class="degreeView">
<!--当前温度-->
<text class="degree">{{currentTemperature}}</text>
<!--度数图标-->
<image class="circle" src="../../image/circle.png"></image>
</view>
<view class="detailInfo">
<view class="degreeView">
<!--夜间天气情况-->
<text class="detailInfoDegree">{{nightAirTemperature}}</text>
<image class="detailInfoCircle" src="../../image/circle.png" />
<text class="detailInfoLine">/</text>
<!--白天天气-->
<text class="detailInfoDegree">{{dayAirTemperature}}</text>
<!-- style优先级比class高会覆盖class中相同属性 -->
<image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
<!-- 当前天气名字 -->
<text class="detailInfoName">{{weather}}</text>
</view>
</view>
</view>
第四部分：
<!-- 底部view -->
<view class="bottomView">
<!--数据返回的不是数组 在js中拼接的数组-->
<block wx:for-items="{{list}}">
<view class="bottomItemView">
<image class="bottomImage" src="{{item.day_weather_pic}}" style="margin-bottom: 15rpx;" />
<text wx:if="{{item.weekday == 1}}" class="bottomText">星期一</text>
<text wx:elif="{{item.weekday == 2}}" class="bottomText">星期二</text>
<text wx:elif="{{item.weekday == 3}}" class="bottomText">星期三</text>
<text wx:elif="{{item.weekday == 4}}" class="bottomText">星期四</text>
<text wx:elif="{{item.weekday == 5}}" class="bottomText">星期五</text>
<text wx:elif="{{item.weekday == 6}}" class="bottomText">星期六</text>
<text wx:else="{{item.weekday == 7}}" class="bottomText">星期日</text>
<view class="degreeView" style="margin-top: 20rpx;">
<text class="detailInfoDegree">{{item.night_air_temperature}}</text>
<image class="detailInfoCircle" src="../../image/circle.png" />
<text class="detailInfoLine">/</text>
<text class="detailInfoDegree">{{item.day_air_temperature}}</text>
<!-- style优先级比class高会覆盖class中相同属性 -->
<image class="detailInfoCircle" style="margin-left: 57rpx; margin-right: 40rpx" src="../../image/circle.png" />
</view>
</view>
